/* Эффекты движка: кот, частицы, свечения, кольца, статус, курсор.
   Вёрстку не трогает — только то, что создаёт или переключает js. */

#cat{position:absolute;left:0;top:0;max-width:none;pointer-events:none;will-change:left,top,transform}
/* слой кота поверх страницы: по горизонтали обрезан экраном, по вертикали открыт */
#cat-stage{position:absolute;left:0;top:0;width:100%;height:0;overflow-x:clip;overflow-y:visible;pointer-events:none;z-index:30}
#fx-layer{position:absolute;inset:0;pointer-events:none;z-index:20}
#cat-fx{position:absolute;left:0;top:0;width:0;height:0;z-index:40;pointer-events:none}
/* нижний край окна: вне героя кот ходит тут, из-за краёв окна только входит и выходит */
#cat-dock{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:30}

/* кот в кресле: слоями поверх неподвижного кресла, поза сменяется наплывом */
.seat-cat{position:absolute;inset:0;pointer-events:none;transform-origin:50% 62%}
.seat-cat canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:none;opacity:0;z-index:1;
  transition:opacity .3s ease-in}
.seat-cat canvas.vis{opacity:1;z-index:2;transition:opacity .3s ease-out}
.seat-cat.cut canvas{transition:none}
.seat-cat.sofa{animation:seatBreath 3s steps(1) infinite}
/* сдвиг на целый пиксель: растяжение пиксельной картинки даёт полосы */
@keyframes seatBreath{0%,55%{transform:translateY(0)}56%,100%{transform:translateY(1px)}}
.seat-glow{position:absolute;left:61.5%;top:44%;width:16%;height:16%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(214,255,150,.8),rgba(168,251,5,0));mix-blend-mode:screen;opacity:0;z-index:3;
  pointer-events:none;transition:opacity .4s}
.seat-cat.phone .seat-glow{animation:seatGlow 2.6s ease-in-out infinite}
@keyframes seatGlow{0%,100%{opacity:.12}50%{opacity:.34}}

/* ---------- частицы ---------- */
.fx{position:absolute;max-width:none;max-height:none;pointer-events:none;user-select:none;transform:translate(-50%,-50%);
  --dx:0px;--dy:0px;--rot:0deg;--s:1;--fx:1;image-rendering:pixelated;will-change:transform,opacity}

@keyframes fxRise{
  0%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--s) * .4))}
  15%{opacity:1;transform:translate(-50%,-70%) scale(calc(var(--s) * 1.1))}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% - 70px)) scale(var(--s))}
}
.fx-rise{animation:fxRise 1.3s ease-out forwards}

@keyframes fxPop{
  0%{opacity:0;transform:translate(-50%,-30%) scale(calc(var(--s) * .3))}
  25%{opacity:1;transform:translate(-50%,-60%) scale(calc(var(--s) * 1.15))}
  40%{transform:translate(-50%,-55%) scale(var(--s))}
  80%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-70%) scale(var(--s))}
}
.fx-pop{animation:fxPop .9s ease-out forwards}

@keyframes fxZzz{
  0%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--s) * .5))}
  20%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + 34px),calc(-50% - 60px)) scale(calc(var(--s) * 1.1))}
}
.fx-zzz{animation:fxZzz 1.8s ease-out forwards}

/* «?» и «!» над котом у нижнего края: выскочил, повисел, растаял */
@keyframes fxMark{
  0%{opacity:0;transform:translate(-50%,-30%) scale(calc(var(--s) * .3))}
  12%{opacity:1;transform:translate(-50%,-60%) scale(calc(var(--s) * 1.15))}
  20%{transform:translate(-50%,-55%) scale(var(--s))}
  85%{opacity:1;transform:translate(-50%,-58%) scale(var(--s))}
  100%{opacity:0;transform:translate(-50%,-70%) scale(var(--s))}
}
.fx-mark{animation:fxMark 2.1s ease-out forwards}

@keyframes fxPuff{
  0%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--s) * .4))}
  20%{opacity:.95}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(calc(var(--s) * 1.25))}
}
.fx-puff{animation:fxPuff .65s ease-out both}

@keyframes fxStreak{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--rot)) scaleX(calc(var(--fx) * .5))}
  30%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--rot)) scaleX(calc(var(--fx) * 1.2))}
}
.fx-streak{animation:fxStreak .5s ease-out both}

@keyframes fxFly{
  0%{opacity:1;transform:translate(-50%,-50%) scale(var(--s)) rotate(0)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(calc(var(--s) * .5)) rotate(90deg)}
}
.fx-fly{animation:fxFly .7s ease-out forwards}

@keyframes fxTwinkle{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(0)}
  40%{opacity:1;transform:translate(-50%,-50%) scale(var(--s)) rotate(45deg)}
  100%{opacity:0;transform:translate(-50%,-80%) scale(calc(var(--s) * .4)) rotate(90deg)}
}
.fx-twinkle{animation:fxTwinkle .9s ease-out both}

@keyframes fxFlash{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  25%{opacity:1;transform:translate(-50%,-50%) scale(calc(var(--s) * 1.1))}
  100%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--s) * 1.5))}
}
.fx-flash{animation:fxFlash .55s ease-out forwards}

/* искра-игрушка, за которой охотится кот */
@keyframes fxToy{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-62%) scale(.85) rotate(20deg)}
  100%{transform:translate(-50%,-50%) scale(1) rotate(0)}
}
.fx-toy{animation:fxToy 1.1s ease-out forwards, fxToyBob 1.2s ease-in-out 1.1s infinite;
  filter:drop-shadow(0 0 6px rgba(168,251,5,.9))}
@keyframes fxToyBob{50%{transform:translate(-50%,-70%) scale(.9) rotate(15deg)}}

/* запасные значки, пока нет картинок */
.fx-g{display:block;font-family:"Pixelify Sans","Courier New",monospace;font-weight:700;line-height:1;
  color:#A8FB05;text-shadow:-2px 0 #0B0B0E,2px 0 #0B0B0E,0 -2px #0B0B0E,0 2px #0B0B0E}
.fx-g-heart::before,.fx-g-heart-small::before{content:"\2665";font-size:30px}
.fx-g-heart-small::before{font-size:20px}
.fx-g-exclaim::before{content:"!";font-size:40px}
.fx-g-question::before{content:"?";font-size:36px}
.fx-g-zzz::before{content:"z";font-size:26px}
.fx-g-sparkle-a,.fx-g-sparkle-b{width:22px;height:22px;background:#A8FB05;text-shadow:none;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.fx-g-sparkle-b{width:14px;height:14px;background:#fff}
.fx-g-dust-1,.fx-g-dust-2,.fx-g-dust-3,.fx-g-dust-4{width:26px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 2px #d8dcd6, 10px -6px 0 -2px #fff, 10px -6px 0 0 #d8dcd6;text-shadow:none}
.fx-g-dust-3,.fx-g-dust-4{width:36px;height:26px}
.fx-g-speed-lines{width:70px;height:22px;text-shadow:none;
  background:linear-gradient(#7ED100 0 0) 0 2px/100% 3px no-repeat,
             linear-gradient(#7ED100 0 0) 14px 10px/80% 3px no-repeat,
             linear-gradient(#7ED100 0 0) 6px 18px/70% 3px no-repeat}
.fx-g-burst{width:90px;height:90px;background:#fff;text-shadow:none;
  clip-path:polygon(50% 0,58% 36%,85% 12%,66% 44%,100% 50%,66% 57%,85% 88%,58% 64%,50% 100%,42% 64%,15% 88%,34% 57%,0 50%,34% 44%,15% 12%,42% 36%)}

/* ---------- речь кота ---------- */
.cat-say{
  position:absolute;left:0;top:0;z-index:45;
  max-width:260px;padding:9px 14px;
  background:#A8FB05;color:#0B0B0E;
  border:3px solid #0B0B0E;border-radius:14px;
  box-shadow:4px 4px 0 #0B0B0E;
  font-weight:800;font-size:15px;line-height:1.2;white-space:nowrap;
  pointer-events:none;opacity:0;transform:translateY(6px) scale(.9);
  transition:opacity .18s ease, transform .22s cubic-bezier(.3,1.6,.5,1);
  --tail:40px;
}
.cat-say::after{
  content:"";position:absolute;left:var(--tail);bottom:-15px;margin-left:-8px;
  border:8px solid transparent;border-top-color:#0B0B0E;
}
.cat-say.show{opacity:1;transform:none}
.cat-say.side-l::after,.cat-say.side-r::after{bottom:auto;top:14px;margin-left:0;border-top-color:transparent}
.cat-say.side-l::after{left:100%;border-left-color:#0B0B0E}
.cat-say.side-r::after{left:auto;right:100%;border-right-color:#0B0B0E}

/* вайфай над котом, уснувшим в кресле */
.cat-wifi{position:absolute;left:0;top:0;width:28px;height:22px;z-index:41;pointer-events:none;opacity:0;transition:opacity .4s}
.cat-wifi.show{opacity:1}
.cat-wifi i{position:absolute;left:50%;bottom:0;border:3px solid #7ED100;border-color:#7ED100 transparent transparent;
  border-radius:50%;transform:translateX(-50%);animation:wifiPulse 1.8s infinite}
.cat-wifi i:nth-child(1){width:6px;height:6px;border:0;background:#7ED100;border-radius:0}
.cat-wifi i:nth-child(2){width:16px;height:16px;bottom:-6px;animation-delay:.3s}
.cat-wifi i:nth-child(3){width:28px;height:28px;bottom:-12px;animation-delay:.6s}
@keyframes wifiPulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- кнопка ---------- */
/* выключено: серебристый купол, свечения нет (слои кнопки — в style.css).
   scale у свечения — отдельным свойством, чтобы не спорить с transform вёрстки */
.power-glow{opacity:0;transform-origin:50% 85%;transition:opacity .4s ease}
.power-glow.is-on{opacity:1;animation:glowBreath 2.4s ease-in-out infinite;filter:blur(8px) brightness(1.15) saturate(1.3)}
.power-glow.is-igniting{animation:glowIgnite 1.15s ease-out forwards;filter:blur(8px) brightness(1.15) saturate(1.3)}
@keyframes glowBreath{0%,100%{opacity:.7;scale:.96}50%{opacity:1;scale:1.05}}
/* разгорается снизу и к концу выходит на начало дыхания */
@keyframes glowIgnite{
  0%{opacity:0;scale:.5 .2}
  35%{opacity:.6;scale:.8 .6}
  80%{opacity:1;scale:1.12}
  100%{opacity:.7;scale:.96}
}

#power-img{transform-origin:50% 100%}
#power:not(.is-on):hover{filter:drop-shadow(0 calc(18 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.25))}
#power.is-lit{filter:drop-shadow(0 0 18px rgba(168,251,5,.8)) drop-shadow(0 14px 14px rgba(0,0,0,.2));transition:transform .15s ease, filter .5s ease}

/* нажали: проседание за 80 мс, потом серый наливается зелёным, в конце вспышка ярче */
@keyframes powerPress{0%{transform:none}30%{transform:scale(.96)}100%{transform:none}}
#power.no-trans,#power.no-trans #power-img,.power-glow.no-trans{transition:none!important}

/* кольца включения */
.fx-ring{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  border:4px solid #A8FB05;box-shadow:0 0 14px rgba(168,251,5,.9), inset 0 0 10px rgba(168,251,5,.6);
  pointer-events:none;opacity:0;animation:ringOut 1s ease-out forwards}
@keyframes ringOut{
  0%{opacity:1;transform:scale(.3)}
  70%{opacity:.6}
  100%{opacity:0;transform:scale(var(--s,7))}
}
.fx-ground{position:absolute;width:120px;height:30px;margin:-15px 0 0 -60px;border-radius:50%;
  border:3px solid rgba(168,251,5,.9);box-shadow:0 0 18px rgba(168,251,5,.8);
  pointer-events:none;animation:groundOut 1.2s ease-out forwards}
@keyframes groundOut{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(3.2)}}

.fx-pix{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;pointer-events:none}

/* «VPN connection sequence»: точка → кольцо → двойное кольцо → разлёт → галочка */
.fx-conn{position:absolute;width:48px;height:48px;margin:-24px 0 0 -24px;pointer-events:none}
.fx-conn b{position:absolute;inset:0;border-radius:50%}
.fx-conn .c-dot{background:#A8FB05;transform:scale(.2);box-shadow:0 0 12px #A8FB05;animation:connDot .5s ease-out forwards}
.fx-conn .c-ring{border:3px solid #A8FB05;box-shadow:0 0 10px rgba(168,251,5,.9);opacity:0;animation:connRing .9s .3s ease-out forwards}
.fx-conn .c-ring2{inset:12px;border:3px solid #A8FB05;opacity:0;animation:connRing .7s .55s ease-out forwards}
.fx-conn .c-check{background:#A8FB05;border:3px solid #0B0B0E;opacity:0;transform:scale(.3);
  animation:connCheck .45s 1.05s cubic-bezier(.3,1.6,.5,1) forwards, connOut .5s 2.6s ease-in forwards}
.fx-conn .c-check::after{content:"";position:absolute;left:30%;top:22%;width:30%;height:44%;
  border:solid #0B0B0E;border-width:0 5px 5px 0;transform:rotate(45deg)}
@keyframes connDot{0%{transform:scale(.1);opacity:0}60%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(.5)}}
@keyframes connRing{0%{opacity:0;transform:scale(.4)}40%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
@keyframes connCheck{to{opacity:1;transform:scale(1)}}
@keyframes connOut{to{opacity:0;transform:scale(.8)}}

/* ---------- статус ---------- */
#vpn-status .st-bar{display:inline-block;width:70px;height:10px;margin-right:8px;vertical-align:middle;
  border:2px solid currentColor;padding:1px;box-sizing:content-box}
#vpn-status .st-bar i{display:block;height:100%;width:0;background:#7ED100;transition:width .15s steps(4)}
#vpn-status.is-on{animation:statusPop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes statusPop{0%{transform:scale(.8)}100%{transform:none}}

/* плашка «интернет открыт» у статуса */
.fx-open{position:absolute;z-index:21;pointer-events:none;white-space:nowrap;
  font-family:var(--pixel,inherit);font-weight:700;font-size:13px;letter-spacing:.04em;
  padding:5px 10px;border:2px solid #0B0B0E;border-radius:8px;background:#A8FB05;color:#0B0B0E;
  box-shadow:3px 3px 0 #0B0B0E;opacity:0;transform:translateY(6px);transition:opacity .25s, transform .3s cubic-bezier(.3,1.6,.5,1)}
.fx-open.show{opacity:1;transform:none}
.fx-open::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;background:#0B0B0E;border-radius:50%;
  vertical-align:1px;animation:wifiPulse 1.4s infinite}

/* ---------- шаги «как работает» подсвечиваются по очереди ---------- */
.step.is-lit .step-num{animation:stepLit .5s cubic-bezier(.3,1.6,.5,1)}
.step.is-lit .step-img,.step.is-lit .step-list{filter:drop-shadow(0 0 14px rgba(168,251,5,.6))}
@keyframes stepLit{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1)}}

.js-vpn-cta.is-on{filter:saturate(1.15)}

/* ---------- курсор (только десктоп) ---------- */
body.has-kbcursor,body.has-kbcursor a,body.has-kbcursor button,body.has-kbcursor [data-cursor]{cursor:none}
#kbcursor{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity .15s;will-change:transform}
#kbcursor.ready{opacity:1}
#kbcursor.ready.idle{opacity:.35;transition:opacity .6s}
#kbcursor svg{display:block;position:absolute;left:0;top:0;shape-rendering:crispEdges;transition:transform .12s ease}
#kbcursor .kc-paw{opacity:0;left:-12px;top:-12px}
#kbcursor.paw .kc-arrow{opacity:0}
#kbcursor.paw .kc-paw{opacity:1}
#kbcursor.down svg{transform:scale(.85)}

@media (prefers-reduced-motion: reduce){
  .fx,.fx-ring,.fx-ground,.fx-pix,.fx-conn,#cat-fx,.cat-wifi{display:none!important}
  .seat-cat,.seat-glow{animation:none!important}
  .seat-glow{display:none}
  .seat-cat canvas{transition:none!important}
  .power-glow,#power.is-igniting #power-img,#vpn-status.is-on,.step.is-lit .step-num{animation:none!important}
  #power,#power-img,.power-glow{transition:none!important}
  .cat-say,.fx-open{transition:none}
}