/* ==========================================================================
   Марго Квиз — Design System v2
   motion.css — вся динамика: токены длительностей/изингов, регистрация
   анимируемых переменных, библиотека keyframes, stagger-утилиты.

   ПРАВИЛО 60FPS: в keyframes только transform / opacity / filter.
   Никаких top/left/width/height — ТВ может крутиться на слабом ноутбуке.

   ЭТО ЖЕ ПРАВИЛО РАСПРОСТРАНЯЕТСЯ НА transition И НА WEB ANIMATIONS API.
   Стадия 05 нашла три нарушения через transition — полосы заполнялись
   шириной (доля голосов, разрыв в табло, прогресс волны). Все три переведены
   на transform: scaleX(); контракт переменной изменился с процента на число
   0…1, потому что процент в calc не поделить.

   И ЕЩЁ ОДНО, ПРО ВЫКЛЮЧЕНИЕ ДВИЖЕНИЯ. Блок [data-motion="off"] внизу гасит
   CSS-анимации и переходы, но НЕ ТРОГАЕТ анимации, запущенные скриптом через
   Web Animations API: у них своё время. Поэтому менеджер хореографии обязан
   спрашивать этот атрибут сам — см. static/design/screens/choreo.js,
   функция motionOff(). Без этого «движение выключено» выключает половину.
   ========================================================================== */

/* ---------- Плавный лерп эмоции ----------
   Регистрируем хью как число → transition интерполирует его,
   и весь UI «перетекает» в новую эмоцию, а не прыгает. */
@property --emotion-h {
    syntax: "<number>";
    inherits: true;
    initial-value: 262;
}
@property --emotion-l {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 62%;
}

:root {
    /* Длительности */
    --dur-xs: 120ms;    /* микро-фидбек: чипы, кнопки */
    --dur-sm: 240ms;    /* элементы */
    --dur-md: 420ms;    /* блоки, карточки */
    --dur-lg: 700ms;    /* смена экрана */
    --dur-xl: 1200ms;   /* торжественные моменты */

    /* Изинги */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);        /* решительный выезд */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* пружина с овершутом */
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);      /* симметричный */
    --ease-in: cubic-bezier(0.55, 0, 1, 0.45);         /* уход */

    /* Лерп эмоции: сцена перетекает за ~1.2с */
    transition: --emotion-h var(--dur-xl) var(--ease-inout),
                --emotion-l var(--dur-xl) var(--ease-inout);
}

/* ==========================================================================
   Библиотека keyframes (префикс mk- = margo kit)
   ========================================================================== */

/* --- Входы --- */
@keyframes mk-enter-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mk-enter-down {
    from { opacity: 0; transform: translateY(-28px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* НАПРАВЛЕНИЕ — ЧАСТЬ ЯЗЫКА, А НЕ УКРАШЕНИЕ. Игра всегда идёт вперёд:
   отката в ней не существует. Поэтому смена экрана по ходу игры — это уход
   влево и приход справа, одно движение на двоих. Вертикаль оставлена
   появлению блоков ВНУТРИ экрана: заголовок сверху, варианты снизу. */
@keyframes mk-enter-right {
    from { opacity: 0; transform: translateX(56px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes mk-enter-scale {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes mk-pop {
    0%   { opacity: 0; transform: scale(0.6); }
    70%  { opacity: 1; transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}

/* --- Выходы (транзишн-менеджер вешает .mk-leaving на уходящий экран) --- */
@keyframes mk-exit-fade {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-18px) scale(0.985); }
}
@keyframes mk-exit-left {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-48px); }
}

/* --- Акценты --- */
@keyframes mk-flash {
    0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; }
}
/* ПУЛЬСИРУЕТ ПРОЗРАЧНОСТЬ СЛОЯ СВЕЧЕНИЯ, А НЕ САМ box-shadow. До стадии 05
   этот кадр анимировал box-shadow — то есть заставлял браузер перерисовывать
   размытую тень каждый кадр, и делал это на орбе 260 px, который висит
   в кадре весь вечер. Теперь тень статична и лежит на отдельном слое
   (::after), а пульс — это opacity: композитор, а не перерисовка.
   Кто применяет: даёт слою класс или вешает анимацию на псевдоэлемент. */
@keyframes mk-pulse-glow {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

/* Один такт секунды. Привязывается к СОБЫТИЮ секунды, а не к бесконечному
   циклу: свободный цикл уезжает от цифры уже через десяток секунд, и зал
   видит, как пульс и число живут отдельными жизнями. */
@keyframes mk-tick {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Конфетти подиума и тоста. Смещение, снос и оборот приходят переменными —
   скрипт ставит их каждой частице, кадр один на всех. Только transform
   и opacity: частиц на подиуме до сотни. */
@keyframes mk-confetti {
    from { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
    to   { opacity: 0;
           transform: translate3d(var(--mk-dx, 0px), var(--mk-dy, 1200px), 0)
                      rotate(var(--mk-spin, 540deg)); }
}
@keyframes mk-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}
@keyframes mk-shimmer {
    from { background-position: 200% center; }
    to   { background-position: -200% center; }
}
@keyframes mk-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* --- Аврора (живой фон сцены) --- */
@keyframes mk-aurora-a {
    0%, 100% { transform: translate(-8%, -6%) scale(1); }
    33%      { transform: translate(10%, 8%) scale(1.18); }
    66%      { transform: translate(-4%, 12%) scale(0.94); }
}
@keyframes mk-aurora-b {
    0%, 100% { transform: translate(6%, 10%) scale(1.1); }
    50%      { transform: translate(-12%, -8%) scale(0.9); }
}
@keyframes mk-aurora-c {
    0%, 100% { transform: translate(0%, 0%) scale(0.95); }
    50%      { transform: translate(14%, -10%) scale(1.22); }
}

/* --- Тикер (бегущая строка) --- */
@keyframes mk-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ==========================================================================
   Утилиты
   ========================================================================== */

/* Входы — вешать классом, параметризуется переменными */
.mk-in-up    { animation: mk-enter-up var(--dur-md) var(--ease-out) both; }
.mk-in-down  { animation: mk-enter-down var(--dur-md) var(--ease-out) both; }
.mk-in-scale { animation: mk-enter-scale var(--dur-md) var(--ease-out) both; }
.mk-in-pop   { animation: mk-pop var(--dur-sm) var(--ease-spring) both; }
.mk-in-right { animation: mk-enter-right var(--dur-md) var(--ease-out) both; }

/* Stagger: JS ставит style="--i:N" каждому ребёнку — работает для ЛЮБОГО
   количества строк (лечит текущий потолок в 8 nth-child задержек). */
.mk-stagger > * { animation-delay: calc(var(--i, 0) * 70ms); }
.mk-stagger--fast > * { animation-delay: calc(var(--i, 0) * 45ms); }

/* Лестница задержек для ПЕРЕХОДОВ, а не для анимаций: доли голосов и разрыв
   в табло меняются transition'ом, и им нужна та же ступенька в 70 мс.
   Отдельным классом, потому что animation-delay и transition-delay —
   разные свойства, и элементу может понадобиться и то и другое. */
.mk-stagger--fill > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* Уходящий экран (транзишн-менеджер).
   .mk-leaving — нейтральный уход: экран сменился, но игра не сдвинулась
   (ворота, оверлеи, возврат к тому же вопросу).
   .mk-leaving--fwd — уход ПО ХОДУ ИГРЫ: влево, навстречу приходящему справа.
   Оба длятся --dur-sm: столько же ждёт менеджер до рендера нового экрана. */
.mk-leaving { animation: mk-exit-fade var(--dur-sm) var(--ease-in) both; }
.mk-leaving--fwd { animation: mk-exit-left var(--dur-sm) var(--ease-in) both; }

/* Отключение движения — ТОЛЬКО явное (perf-режим или атрибут),
   НЕ через prefers-reduced-motion: у многих Windows «эффекты анимации»
   выключены глобально, и ТВ-шоу превращалось бы в стоп-кадры.
   Экран зала — наше устройство, шоу = анимация. Для PWA капитанов
   деликатный reduced-motion добавим отдельно в блоке U2. */
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}