/* Aion Marketing · Cat Guardian (kot-strażnik) — v3 (mobile: sits by the button, sometimes lies in front of it) */
.cat-guardian{
  --cg-w:120px;
  position:absolute;               /* place it with left/right/bottom in your own CSS */
  width:var(--cg-w);
  aspect-ratio:462/643;
  pointer-events:none;             /* never blocks the page… */
  z-index:3;
  user-select:none;
  -webkit-user-select:none;
}
.cg-cat{position:absolute;inset:0;transform-origin:50% 96%;will-change:transform,opacity,filter}
.cg-frame{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;opacity:0;transition:opacity .14s linear;
  -webkit-user-drag:none;pointer-events:none;
}
.cat-guardian[data-frame="sit"]    .cg-f-sit,
.cat-guardian[data-frame="look"]   .cg-f-look,
.cat-guardian[data-frame="crouch"] .cg-f-crouch{opacity:1}

/* …except the tail hotspot */
.cg-tail{
  position:absolute;left:4%;top:82%;width:62%;height:16%;
  padding:0;margin:0;border:0;background:transparent;border-radius:50%;
  pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;
  outline:none;
}
.cg-tail:focus-visible{outline:1px dashed rgba(138,133,128,.6);outline-offset:2px}
.cat-guardian:not([data-frame="sit"]) .cg-tail,
.cat-guardian.is-gone .cg-tail{pointer-events:none}

/* 1 · look = frame swap only · 2 · tense: settles low, ears forward */
.cat-guardian[data-stage="tense"] .cg-cat{animation:cg-tense .45s cubic-bezier(.3,.7,.4,1) both}
@keyframes cg-tense{
  0%  {transform:none}
  60% {transform:translateY(2.5%) scale(1.05,.94)}
  100%{transform:translateY(2%) scale(1.04,.95)}
}
/* 3 · ready: crouched, slow butt wiggle until the visitor hits send */
.cat-guardian[data-stage="ready"] .cg-cat{animation:cg-ready 1.25s ease-in-out infinite}
@keyframes cg-ready{
  0%,100%{transform:translate(0,3%) scale(1.06,.92)}
  25% {transform:translate(-1.4%,3%) rotate(-1.2deg) scale(1.06,.92)}
  75% {transform:translate(1.4%,3%) rotate(1.2deg) scale(1.06,.92)}
}
/* 4 · short hop out toward the gutter beside the container */
.cat-guardian.is-pounce .cg-cat{animation:cg-hop .4s cubic-bezier(.4,0,.6,1) forwards}
@keyframes cg-hop{
  0%  {transform:translateY(3.5%) scale(1.08,.9);opacity:1;filter:blur(0)}
  20% {transform:translateY(5%) scale(1.12,.86);opacity:1}
  55% {transform:translate(calc(var(--cg-px,0px)*.55),calc(var(--cg-py,-80px) * 1.1)) scale(.95,1.08);opacity:1;filter:blur(0)}
  100%{transform:translate(var(--cg-px,0px),calc(var(--cg-py,-80px) * .4)) scale(1.1);opacity:0;filter:blur(4px)}
}
.cat-guardian.is-gone .cg-cat{opacity:0}
/* comes back quietly after the marks fade */
.cat-guardian.is-return .cg-cat{animation:cg-return .9s ease-out both}
@keyframes cg-return{0%{opacity:0;transform:translateY(-6%)}100%{opacity:1;transform:none}}

/* tail yank: jolt + squash/stretch + startle marks */
.cat-guardian.is-yank .cg-cat{animation:cg-yank .34s cubic-bezier(.3,1.6,.5,1) both}
@keyframes cg-yank{
  0%  {transform:scale(1.07,.9)}
  30% {transform:translateY(-14%) scale(.93,1.1) rotate(-2deg)}
  55% {transform:translateY(-4%) scale(.98,1.03) rotate(1.5deg)}
  75% {transform:translateY(0) scale(1.05,.94)}
  88% {transform:translateX(-1.5%)}
  100%{transform:none}
}
.cg-startle{position:absolute;left:34%;top:-6%;width:40%;height:14%;opacity:0;pointer-events:none;overflow:visible}
.cg-startle path{stroke:#a3183c;stroke-width:1.4;stroke-linecap:round;fill:none}
.cat-guardian.is-yank .cg-startle{animation:cg-startle .6s ease-out both}
@keyframes cg-startle{0%{opacity:0;transform:scale(.6) translateY(20%)}20%{opacity:1;transform:scale(1.08)}70%{opacity:1}100%{opacity:0;transform:scale(1.15) translateY(-10%)}}
.cat-guardian.is-yank .cg-tail{animation:cg-tailwag .4s ease-in-out}
@keyframes cg-tailwag{0%,100%{transform:none}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}

/* 5 · side marks: soft shadow + claws, only in the gutters outside the container */
.cg-sides{position:fixed;inset:0;pointer-events:none;z-index:2147483000;opacity:1;transition:opacity .7s ease}
.cg-sides.cg-fade{opacity:0}
.cg-side{position:absolute;overflow:hidden;opacity:0;animation:cg-side-in .35s ease-out forwards}
.cg-side--left {background:linear-gradient(to left, rgba(10,4,6,.34), rgba(10,4,6,.10) 45%, transparent 85%);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent)}
.cg-side--right{background:linear-gradient(to right, rgba(10,4,6,.34), rgba(10,4,6,.10) 45%, transparent 85%);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent)}
@keyframes cg-side-in{to{opacity:1}}
.cg-side svg{position:absolute;inset:0;display:block;opacity:.7}
.cg-side .cg-reveal{stroke-dasharray:1 1;stroke-dashoffset:1;animation:cg-draw .26s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:calc(.08s + var(--cg-delay,0s))}
@keyframes cg-draw{to{stroke-dashoffset:0}}
.cg-side .cg-core{animation:cg-pulse 1.6s ease-in-out .3s both}
@keyframes cg-pulse{0%{opacity:.5}40%{opacity:1}100%{opacity:.7}}
/* reduced motion: shadow only, fades in/out */
.cg-sides.cg-static{opacity:0;animation:cg-static 1.8s ease both}
.cg-sides.cg-static .cg-side{animation:none;opacity:1}
@keyframes cg-static{0%{opacity:0}30%{opacity:.6}70%{opacity:.6}100%{opacity:0}}

/* 6 · mobile (JS adds .cg-m on ≤768px and positions it beside the submit button) */
.cat-guardian.cg-m{z-index:4}
.cat-guardian.cg-m.is-m-away .cg-cat{animation:cg-m-away .3s cubic-bezier(.4,0,.7,1) forwards}
@keyframes cg-m-away{
  0%  {transform:none;opacity:1}
  35% {transform:translateY(4%) scale(1.08,.9)}
  100%{transform:translate(-55%,-18%) scale(.9,1.06);opacity:0}
}
.cg-lie{
  position:absolute;z-index:5;display:block;
  opacity:0;visibility:hidden;pointer-events:none;
  touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;cursor:pointer;
}
.cg-lie-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:50% 100%;
  -webkit-user-drag:none;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.cg-lie.is-in{visibility:visible;opacity:1;pointer-events:auto;animation:cg-lie-in .5s cubic-bezier(.25,.9,.35,1.15) both}
.cg-lie.is-in .cg-lie-img{animation:cg-breathe 2.2s ease-in-out .5s infinite}
@keyframes cg-lie-in{
  0%  {opacity:0;transform:translate(28%,-22%) scale(.86,1.08)}
  55% {opacity:1;transform:translate(-2%,3%) scale(1.04,.93)}
  100%{opacity:1;transform:none}
}
@keyframes cg-breathe{0%,100%{transform:none}50%{transform:scale(1.008,1.03)}}
.cg-lie.is-out{visibility:visible;animation:cg-lie-out .36s cubic-bezier(.4,0,.8,.6) both}
@keyframes cg-lie-out{
  0%  {opacity:1;transform:none}
  30% {opacity:1;transform:translateY(-6%) scale(.97,1.06)}
  100%{opacity:0;transform:translate(34%,-30%) scale(.8,1.1)}
}

@media (prefers-reduced-motion:reduce){
  .cat-guardian .cg-cat,.cat-guardian .cg-startle,.cat-guardian .cg-tail{animation:none!important}
  .cg-lie{display:none!important}
}