/* НЕ ЖАЛЬ — хореографія руху.
 *
 * Принципи (звірено з практикою Emil Kowalski / Val Head / Saul Bass):
 * 1. Базовий стан = ФІНАЛЬНИЙ. Рух додається лише коли він дозволений.
 * 2. Різний регістр — різна крива. Пояснення входить плавно (expo-out),
 *    штамп б'є з перельотом, загроза зривається різко.
 * 3. Stagger 50-70 мс. Більше — читається як черга, менше — як злипання.
 * 4. Анімуємо лише transform / opacity / clip-path.
 * 5. Рух ПОЯСНЮЄ: у схемах лінія малюється в порядку читання сенсу.
 */

:root {
  /* криві */
  --e-out:   cubic-bezier(0.16, 1, 0.30, 1);      /* головний вхід, expo-out */
  --e-slam:  cubic-bezier(0.20, 1.6, 0.40, 1);    /* штамп із перельотом */
  --e-sharp: cubic-bezier(0.40, 0.00, 0.20, 1);   /* різкий монтажний зріз */
  --e-soft:  cubic-bezier(0.33, 1, 0.68, 1);

  /* тривалості */
  --d-micro: 140ms;
  --d-title: 280ms;
  --d-card:  420ms;
  --d-fig:   560ms;
  --d-draw:  900ms;
  --stagger:  60ms;
}

/* ============================================================
   МОДЕЛЬ БЕЗПЕКИ: все ВИДИМЕ за замовчуванням. Прихований старт
   (.pre) додає ЛИШЕ JS і лише елементам нижче в'юпорту; будь-який
   збій JS/IO = сайт статично видимий, а не чорний.
   ============================================================ */
.motion-on .reveal.pre { opacity: 0; transform: translateY(18px); }
.motion-on .reveal.in {
  opacity: 1; transform: none;
  transition: opacity var(--d-card) var(--e-out), transform var(--d-card) var(--e-out);
}
.motion-on .reveal.d1.in { transition-delay: var(--stagger); }
.motion-on .reveal.d2.in { transition-delay: calc(var(--stagger) * 2); }
.motion-on .reveal.d3.in { transition-delay: calc(var(--stagger) * 3); }

/* ============================================================
   ТИТР ГЛАВИ — монтажний зріз (wipe), а не «випливання»
   ============================================================ */
.motion-on .chapter-head.pre .chapter-num { opacity: 0; transform: translateX(-14px); }
.motion-on .chapter-head.pre .chapter-title { clip-path: inset(0 100% 0 0); }
.motion-on .chapter-head.pre .chapter-lead { opacity: 0; transform: translateY(10px); }

.motion-on .chapter-head.in .chapter-num {
  opacity: 1; transform: none;
  transition: opacity var(--d-micro) var(--e-sharp), transform var(--d-micro) var(--e-sharp);
}
.motion-on .chapter-head.in .chapter-title {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--d-title) var(--e-sharp) 80ms;
}
.motion-on .chapter-head.in .chapter-lead {
  opacity: 1; transform: none;
  transition: opacity var(--d-card) var(--e-out) 260ms, transform var(--d-card) var(--e-out) 260ms;
}

/* ============================================================
   ДОСЬЄ КАСТУ — freeze-frame: портрет → ШТАМП б'є → протокол
   ============================================================ */
.motion-on .dossier.pre .portrait { opacity: 0; transform: scale(1.04); }
.motion-on .dossier.pre .stamp    { opacity: 0; transform: scale(1.9) rotate(-2deg); }
.motion-on .dossier.pre .role,
.motion-on .dossier.pre .filestat,
.motion-on .dossier.pre .desc,
.motion-on .dossier.pre .busts    { opacity: 0; transform: translateY(8px); }

.motion-on .dossier.in .portrait {
  opacity: 1; transform: none;
  transition: opacity var(--d-card) var(--e-out), transform var(--d-card) var(--e-out);
}
.motion-on .dossier.in .stamp {
  opacity: 1; transform: scale(1) rotate(-2deg);
  transition: opacity 90ms linear 200ms, transform 200ms var(--e-slam) 200ms;
}
.motion-on .dossier.in .role     { opacity: 1; transform: none; transition: opacity 240ms var(--e-out) 320ms, transform 240ms var(--e-out) 320ms; }
.motion-on .dossier.in .filestat { opacity: 1; transform: none; transition: opacity 240ms var(--e-out) 380ms, transform 240ms var(--e-out) 380ms; }
.motion-on .dossier.in .desc     { opacity: 1; transform: none; transition: opacity 240ms var(--e-out) 440ms, transform 240ms var(--e-out) 440ms; }
.motion-on .dossier.in .busts    { opacity: 1; transform: none; transition: opacity 240ms var(--e-out) 500ms, transform 240ms var(--e-out) 500ms; }

/* ============================================================
   МІФ-КАРТКА — ритм «твердження → пауза → спростування»
   Саме пауза несе сенс: спершу чуємо вулицю, потім відповідає наука.
   ============================================================ */
.motion-on .myth.pre .myth-street { opacity: 0; transform: translateX(-12px); }
.motion-on .myth.pre .myth-truth  { opacity: 0; transform: translateY(10px); }
.motion-on .myth.in .myth-street {
  opacity: 1; transform: none;
  transition: opacity var(--d-card) var(--e-out), transform var(--d-card) var(--e-out);
}
.motion-on .myth.in .myth-truth {
  opacity: 1; transform: none;
  transition: opacity var(--d-card) var(--e-out) 200ms, transform var(--d-card) var(--e-out) 200ms;
}

/* Загроза заходить різкіше — інший емоційний регістр */
.motion-on .myth.warning.pre { opacity: 0; transform: translateY(14px) scale(0.99); }
.motion-on .myth.warning.in {
  opacity: 1; transform: none;
  transition: opacity 200ms var(--e-sharp), transform 220ms var(--e-sharp);
}

/* ============================================================
   СХЕМА-ДОКАЗ — панель заходить, потім лінії малюються
   ============================================================ */
.motion-on .sci-panel.pre { opacity: 0; transform: translateY(14px); }
.motion-on .sci-panel.in {
  opacity: 1; transform: none;
  transition: opacity var(--d-fig) var(--e-out), transform var(--d-fig) var(--e-out);
}

/* Лінія «малюється» — довжину задає JS через --len */
.motion-on .sci-panel.pre .draw {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
.motion-on .sci-panel.in .draw {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--d-draw) var(--e-soft) var(--draw-delay, 220ms);
}

/* Елементи схем */
.motion-on .sci-panel.pre .pop { opacity: 0; transform: scale(0.86); transform-box: fill-box; transform-origin: center; }
.motion-on .sci-panel.in .pop {
  opacity: 1; transform: scale(1);
  transition: opacity 260ms var(--e-out) var(--pop-delay, 200ms), transform 300ms var(--e-slam) var(--pop-delay, 200ms);
}
.motion-on .sci-panel.pre .grow-x { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; }
.motion-on .sci-panel.in .grow-x {
  transform: scaleX(1);
  transition: transform 620ms var(--e-out) var(--pop-delay, 240ms);
}
.motion-on .sci-panel.pre .grow-y { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom center; }
.motion-on .sci-panel.in .grow-y {
  transform: scaleY(1);
  transition: transform 560ms var(--e-out) var(--pop-delay, 200ms);
}

/* Пульс — лише на цільовому органі/ядрі, як «ось воно». Делікатно й нескінченно м'яко. */
.motion-on .sci-panel.in .pulse { animation: nz-pulse 3.2s var(--e-soft) 1.1s infinite; }
@keyframes nz-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
/* Пилок у повітрі — повільний дрейф */
.motion-on .sci-panel.in .drift { animation: nz-drift 4.5s ease-in-out infinite alternate; }
@keyframes nz-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(6px, -5px); }
}

/* ============================================================
   HERO
   ============================================================ */
.motion-on .hero-kicker  { opacity: 0; transform: translateY(-8px); }
.motion-on .hero-title   { opacity: 0; transform: scale(1.06); transform-origin: left center; }
.motion-on .hero-tagline,
.motion-on .hero-sub,
.motion-on .scroll-hint  { opacity: 0; transform: translateY(12px); }
.motion-on .hero.ready .hero-kicker  { opacity: 1; transform: none; transition: opacity 300ms var(--e-out), transform 300ms var(--e-out); }
.motion-on .hero.ready .hero-title   { opacity: 1; transform: scale(1); transition: opacity 200ms var(--e-sharp) 120ms, transform 380ms var(--e-slam) 120ms; }
.motion-on .hero.ready .hero-tagline { opacity: 1; transform: none; transition: opacity 380ms var(--e-out) 340ms, transform 380ms var(--e-out) 340ms; }
.motion-on .hero.ready .hero-sub     { opacity: 1; transform: none; transition: opacity 380ms var(--e-out) 420ms, transform 380ms var(--e-out) 420ms; }
.motion-on .hero.ready .scroll-hint  { opacity: 1; transform: none; transition: opacity 380ms var(--e-out) 520ms, transform 380ms var(--e-out) 520ms; }

.motion-on .scroll-hint .arrow { animation: nz-bob 1.8s var(--e-soft) infinite; }
@keyframes nz-bob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* ============================================================
   БЕЗ РУХУ — повноцінна статична версія, а не «зламана анімація»
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
.motion-off [class*="reveal"],
.motion-off .dossier *,
.motion-off .myth *,
.motion-off .sci-panel,
.motion-off .sci-panel *,
.motion-off .hero * {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
  animation: none !important;
}
.motion-off .sci-panel .draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }