/* GradVPN · анимации дизайн-системы. Только CSS (keyframes + SVG SMIL), без библиотек.
   Всё выключается при prefers-reduced-motion: reduce (блок в конце файла). */

@keyframes gv-float{0%,100%{transform:translateY(0) scale(1.07)}50%{transform:translateY(-12px) scale(1.07)}}
@keyframes gv-glint{0%,62%{transform:translateX(-180%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
@keyframes gv-pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.8);opacity:0}}
@keyframes gv-twinkle{0%,100%{opacity:.15;transform:scale(.55) rotate(0)}50%{opacity:1;transform:scale(1) rotate(20deg)}}
@keyframes gv-drift{0%{transform:translateX(-24px)}100%{transform:translateX(24px)}}
@keyframes gv-dash{to{stroke-dashoffset:-240}}
@keyframes gv-chip{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes gv-rise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes gv-wave{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}}
@keyframes gv-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes gv-pop{0%{transform:scale(.96)}60%{transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes gv-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes gv-fill{from{width:0}}
@keyframes gv-confetti{0%{transform:translateY(-20px) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(260px) rotate(540deg);opacity:0}}
@keyframes gv-check{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}
/* адаптация: на доске нет ожидания (проверка оплаты, выдача ключа) */
@keyframes gv-spin{to{transform:rotate(360deg)}}

.gv-knight{animation:gv-float 6s ease-in-out infinite;transform-origin:50% 60%}
.gv-glint{animation:gv-glint 5.5s ease-in-out infinite}
.gv-ping{position:relative}
.gv-ping::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:gv-pulse 2s ease-out infinite}
.gv-star{animation:gv-twinkle 3s ease-in-out infinite;transform-origin:center}
.gv-cloud{animation:gv-drift 14s ease-in-out infinite alternate}
.gv-dash{stroke-dasharray:6 10;animation:gv-dash 6s linear infinite}
.gv-chip{animation:gv-chip 5s ease-in-out infinite}
.gv-wave{animation:gv-wave 3.2s ease-in-out infinite;transform-origin:50% 85%}
.gv-bob{animation:gv-bob 5s ease-in-out infinite}
.gv-pop{animation:gv-pop .35s ease-out}
.gv-in{animation:gv-in .5s var(--gv-ease) both}
.gv-fill{animation:gv-fill 1.2s var(--gv-ease) both}
.gv-conf{position:absolute;top:0;width:10px;height:14px;border-radius:3px;animation:gv-confetti 2.4s ease-in infinite}
.gv-check-draw{stroke-dasharray:40;animation:gv-check .6s .2s ease-out both}

/* Появление секций при прокрутке. Прячем, только если JS запустился (класс .js на <html>),
   иначе без скриптов контент остался бы невидимым. Показывает scripts/site.js. */
.js .gv-reveal{opacity:0;transform:translateY(32px);transition:opacity .9s var(--gv-ease),transform .9s var(--gv-ease);transition-delay:var(--d,0s)}
.js .gv-reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .gv-reveal{opacity:1;transform:none}
  .gv-glint{display:none!important}
}