/* =============================================================
   animations.css — переходы слайдов и поэтапное появление
   ============================================================= */

/* --- Состояния слайда -------------------------------------
   .is-active   — текущий, виден
   .is-prev     — ушёл влево (при движении вперёд)
   .is-next     — ждёт справа (при движении назад)
   Направление задаётся data-dir на .deck:
     data-dir="fwd"  — листаем вперёд
     data-dir="back" — листаем назад
   ----------------------------------------------------------- */

/* Дека получает перспективу — слайды двигаются в глубину (3D) */
.deck { perspective: 1800px; transform-style: preserve-3d; }

.slide {
  transition:
    opacity var(--t-slide) var(--ease-out),
    transform var(--t-slide) var(--ease-out),
    filter var(--t-slide) var(--ease-out),
    visibility 0s linear var(--t-slide);
  /* стартовое состояние: чуть в глубине, снизу, размыто */
  transform: translate3d(0, 40px, -120px) scale(0.96);
  filter: blur(8px);
}

.slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--t-slide) var(--ease-out),
    transform var(--t-slide) var(--ease-out),
    filter var(--t-slide) var(--ease-out),
    visibility 0s;
}

/* Уходящий слайд вперёд — уезжает влево, отдаляется вглубь, размывается,
   с лёгким 3D-разворотом — кинематографичный уход «за камеру». */
.deck[data-dir="fwd"] .slide.is-leaving {
  opacity: 0;
  transform: translate3d(-9%, 0, -200px) scale(0.94) rotateY(7deg);
  filter: blur(10px);
}
.deck[data-dir="back"] .slide.is-leaving {
  opacity: 0;
  transform: translate3d(9%, 0, -200px) scale(0.94) rotateY(-7deg);
  filter: blur(10px);
}

/* Входящий слайд выезжает из глубины со стороны, противоположной движению */
.deck[data-dir="fwd"] .slide.is-entering {
  transform: translate3d(9%, 0, -160px) scale(0.95) rotateY(-6deg);
  filter: blur(9px);
}
.deck[data-dir="back"] .slide.is-entering {
  transform: translate3d(-9%, 0, -160px) scale(0.95) rotateY(6deg);
  filter: blur(9px);
}

/* =============================================================
   Stagger: поэтапное появление содержимого активного слайда
   Каждому анимируемому элементу присваивается --i (индекс).
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(6px);
}

.slide.is-active .reveal {
  animation: reveal-in 760ms var(--ease-out) forwards;
  animation-delay: calc(120ms + var(--i, 0) * 85ms);
}

@keyframes reveal-in {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

/* Свечение крупных цифр при появлении */
.slide.is-active .bstat__num,
.slide.is-active .relevance__big {
  animation: pop-num 900ms var(--ease-out) both;
  animation-delay: calc(220ms + var(--i, 0) * 85ms);
}
@keyframes pop-num {
  0%   { opacity: 0; transform: translateY(10px) scale(0.96); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- «Дыхание» фонового свечения -------------------------- */
@keyframes breathe {
  0%, 100% { opacity: 0.55; transform: translateY(0) scale(1); }
  50%      { opacity: 0.85; transform: translateY(2%) scale(1.05); }
}

/* --- Парение и «биение» сердечка на финале ---------------- */
@keyframes heart-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}

/* --- Бегущий блик по ленте DevSecOps ---------------------- */
@keyframes band-sweep {
  0%   { left: -30%; }
  60%, 100% { left: 130%; }
}

/* --- Импульс-сигнал, текущий вдоль змейки-пути (слайд 5) --- */
@keyframes snake-flow {
  from { stroke-dashoffset: 1760; }
  to   { stroke-dashoffset: 0; }
}

/* --- Заполнение шкалы риска снизу вверх (слайд 4) --------- */
@keyframes scale-fill {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* --- Прорисовка ветвей дерева безопасности (слайд 6) ------ */
@keyframes branch-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* --- Ракета взлетает по диагонали (слайд 7) --------------- */
@keyframes rocket-fly {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(10px, -16px) rotate(2deg); }
}
/* след траектории прорисовывается снизу вверх (pathLength=1) */
@keyframes trail-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
/* импульс энергии, бегущий от практики к щиту по ветви */
@keyframes spark-run {
  0%   { stroke-dashoffset: 1;  opacity: 0; }
  10%  { opacity: 1; }
  60%  { opacity: 1; }
  80%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Вспышка свечения щита — пик в момент прихода палочек (~78% цикла),
   остальное время спокойно. Период совпадает со spark-run (2.8s). */
@keyframes shield-charge {
  0%, 70%  { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  80%      { opacity: 0.95; transform: translate(-50%, -50%) scale(1.22); }
  100%     { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
}
/* Сам щит мягко вспыхивает в тот же момент сбора энергии */
@keyframes shield-flash {
  0%, 70%, 100% {
    filter: drop-shadow(0 34px 66px rgba(0,0,0,0.6)) drop-shadow(0 0 46px rgba(255,255,255,0.10));
  }
  80% {
    filter: drop-shadow(0 34px 66px rgba(0,0,0,0.6)) drop-shadow(0 0 58px rgba(255,255,255,0.32));
  }
}

/* --- Стрелка-коннектор «цель → гипотеза» ------------------ */
@keyframes duo-pulse {
  0%, 100% { transform: translateX(-2px); opacity: 0.7; }
  50%      { transform: translateX(2px);  opacity: 1; }
}

/* --- Глаз на титуле: вращение кольца-сканера и пульс свечения --- */
@keyframes scan-rot {
  to { transform: rotate(360deg); }
}

/* --- Волна-кольцо от ядра DevSecOps (слайд 9) ------------- */
@keyframes core-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}

/* --- Печать «Цель достигнута» (слайд 10) ------------------ */
/* внешнее кольцо: появляется (масштаб + прозрачность) */
@keyframes seal-ring-in {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
/* непрерывное вращение кольца — через отдельное свойство rotate,
   чтобы не конфликтовать с transform появления */
@keyframes seal-ring-spin {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}
/* ядро печати: «впечатывается» */
@keyframes seal-core-in {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
/* окружность и галочка прочерчиваются (pathLength=1) */
@keyframes seal-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes heart-beat {
  0%, 100%   { scale: 1; }
  15%        { scale: 1.08; }
  30%        { scale: 1; }
  45%        { scale: 1.05; }
  60%        { scale: 1; }
}
/* тень под парящим сердцем: сжимается, когда сердце выше */
@keyframes shadow-breathe {
  0%, 100% { transform: translateX(-50%) scale(1);    opacity: 0.55; }
  50%      { transform: translateX(-50%) scale(0.72); opacity: 0.3; }
}

/* --- Плавное появление элементов навигации при загрузке --- */
.counter,
.progress {
  animation: fade-up 700ms var(--ease-out) both;
  animation-delay: 400ms;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}