/* =====================================================================
   Моушен-графика главной, варианты A–D (решение владельца 08.11.2026).
   Только SVG + CSS + assets/motion.js; без библиотек и внешних загрузок.
   Класс .motion-on ставит скрипт в <head>, если в системе не включено
   «уменьшить движение». Без скрипта страница выглядит как раньше.
   Цвета для тёмной схемы Navy — в конце этого файла (генератор темы его не читает).
   ===================================================================== */

/* ---------- A. Кривая реакции на первом экране рисуется один раз (≈4 с, меньше 5 с — пауза не нужна) ---------- */
.motion-on .response-chip .m-band { opacity: 0; animation: m-fade 0.9s ease 0.3s forwards; }
.motion-on .response-chip .m-line {
  stroke-dasharray: var(--len, 0); stroke-dashoffset: var(--len, 0);
  animation: m-draw 3.2s cubic-bezier(0.4, 0.1, 0.2, 1) 0.5s forwards;
}
.motion-on .response-chip .m-line--resp { animation-delay: 0.85s; }
.motion-on .response-chip .m-dot {
  opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: m-pop 0.4s ease-out 3.7s forwards;
}
@keyframes m-draw { to { stroke-dashoffset: 0; } }
@keyframes m-fade { to { opacity: 1; } }
@keyframes m-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

/* ---------- B. Схема цикла проигрывается при прокрутке (управляет посетитель, автозапуска нет) ---------- */
.curve-cursor, .curve-marker, .curve-play { display: none; }
.curve.is-playing .curve-cursor, .curve.is-playing .curve-marker { display: inline; }
.curve.is-playing .curve-play { display: block; }
.curve-cursor { stroke: #8197A8; stroke-width: 1; stroke-dasharray: 3 4; }
.curve-marker { fill: #FFFFFF; stroke: #087FC4; stroke-width: 3; }
.curve .m-phase { transition: opacity 0.25s ease; }
.curve-play { margin-top: var(--space-3); }
.curve-play__bar { height: 4px; border-radius: 2px; background: var(--color-line); overflow: hidden; }
.curve-play__bar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--color-blue-600), var(--color-orange-500));
}
.curve-play__caption { margin: var(--space-2) 0 0; min-height: 3.2em; font-size: var(--text-small); color: var(--color-slate-700); }
.curve-play__caption strong { color: var(--color-ink-900); }

/* ---------- C. Векторные волокна вместо растровой волны первого экрана ---------- */
.hero__fibers {
  display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 52%;
  overflow: hidden; pointer-events: none; z-index: 0; opacity: 0.6;
  --fiber-a: #087FC4; --fiber-mid-a: #4FB0EC; --fiber-mid: #C9D6E0; --fiber-mid-b: #F6C9A0; --fiber-b: #EC852B;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 34%, #000 56%, transparent 100%);
          mask-image: linear-gradient(to top, transparent 0, #000 34%, #000 56%, transparent 100%);
}
.hero.has-fibers .hero__fibers { display: block; }
.hero.has-fibers::after { display: none; }              /* растровая волна — запасной вариант без скрипта */
.hero__fibers .fibers-breathe { position: absolute; inset: 0; transform-origin: 50% 62%; will-change: transform; }
/* Лента вдвое шире экрана и сдвигается на половину: рисунок повторяется, шва нет.
   max-width: none — иначе общее правило svg { max-width: 100% } сужает ленту и справа остаётся пустое место */
.hero__fibers svg { position: absolute; left: 0; top: 0; width: 200%; max-width: none; height: 100%; will-change: transform; }
.hero__fibers .s-a { stop-color: var(--fiber-a); }
.hero__fibers .s-ma { stop-color: var(--fiber-mid-a); }
.hero__fibers .s-m { stop-color: var(--fiber-mid); }
.hero__fibers .s-mb { stop-color: var(--fiber-mid-b); }
.hero__fibers .s-b { stop-color: var(--fiber-b); }
.motion-on .hero__fibers .fibers-breathe { animation: m-breathe 9s ease-in-out infinite; }
.motion-on .hero__fibers svg { animation: m-drift 40s linear infinite; }
.motion-paused .hero__fibers .fibers-breathe,
.motion-paused .hero__fibers svg { animation-play-state: paused; }
@keyframes m-drift { to { transform: translateX(-50%); } }
@keyframes m-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.84); } }

/* Пауза фоновой анимации (WCAG 2.2.2: непрерывное движение дольше 5 с) */
.motion-toggle {
  position: absolute; right: clamp(12px, 3vw, 32px); bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid var(--color-line); border-radius: 50%; background: rgba(255, 255, 255, 0.85);
  color: var(--color-slate-700); cursor: pointer;
}
.motion-toggle:hover { color: var(--color-blue-600); }
.motion-toggle:focus-visible { outline: 3px solid var(--color-blue-500); outline-offset: 2px; }
.motion-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.motion-toggle .i-play { display: none; }
.motion-paused .motion-toggle .i-play { display: block; }
.motion-paused .motion-toggle .i-pause { display: none; }

/* ---------- D. Мягкое появление блоков при прокрутке (один раз) ---------- */
.reveal-wait { opacity: 0; transform: translateY(14px); }
.reveal-in {
  opacity: 1; transform: none;
  transition: opacity 0.55s ease, transform 0.55s ease; transition-delay: calc(var(--i, 0) * 70ms);
}

/* ---------- Без анимации, если в системе включено «уменьшить движение» ---------- */
@media (prefers-reduced-motion: reduce) {
  .motion-on .response-chip .m-band, .motion-on .response-chip .m-line, .motion-on .response-chip .m-dot,
  .motion-on .hero__fibers .fibers-breathe, .motion-on .hero__fibers svg { animation: none !important; opacity: 1; stroke-dashoffset: 0; }
  .reveal-wait { opacity: 1; transform: none; }
}
@media print {
  .reveal-wait { opacity: 1; transform: none; }
  .motion-toggle { display: none; }
}

/* ---------- Тёмная схема Navy ---------- */
html[data-theme="navy"] .hero__fibers {
  opacity: 0.75; --fiber-a: #4FB0EC; --fiber-mid-a: #6CBDF0; --fiber-mid: #2A4263; --fiber-mid-b: #F4A35C; --fiber-b: #F4A35C;
}
html[data-theme="navy"] .curve-marker { fill: #101F37; stroke: #4FB0EC; }
html[data-theme="navy"] .motion-toggle { background: rgba(16, 31, 55, 0.85); }