/* ==========================================================================
   STARPRINT — интро «Сборка тиража» на первом экране главной
   (js/hero-assembly.js; docs/deep-dive/20-premium-motion.md, раздел
   «Исключение: интро „Сборка тиража“»).

   Бригада цеха — курсоры сотрудников с именными бирками — собирает первый
   экран блок за блоком: метки и кресты, пол сцены, паспорт заказа, высечка и
   биговка изделия, пластины C/M/Y, размеры, форма, приводка, штамп ОТК.
   Счётчик «сотрудники · слои» внизу слева, «Пропустить сборку» внизу справа.

   Правило «Точность» (содержимое hero стоит с первого кадра) здесь нарушено
   по решению владельца (02.11.2026) — но не до конца:
   — H1 и лид не прячутся никогда: это проход K, «уже напечатан», и кандидат LCP;
   — раскладка финальная с первого байта: прячем только opacity, ничего не
     вставляем в .hp и не меняем размеры — CLS 0;
   — настоящий контент проявляется не дольше --dur-enter-lg (400 мс), длинное
     движение — только у декора в оверлее (.hx-ov);
   — без JS, при reduced-motion, forced-colors и экономии трафика интро нет.

   Классы на <html> (ставят js/head.js и движок):
   .hx       — интро будет: блоки hero прячутся до старта;
   .hx-run   — идёт: блоки держит WAAPI (fill: backwards), CSS их не прячет;
   .hx-done  — прошло или пропущено: остаётся до конца жизни страницы, чтобы
               декор первого экрана (ds-home.css) не проигрывался второй раз.
   Литералов мс нет: длительности — токены --hx-* ниже и шкала motion.css.
   ========================================================================== */

:root {
  --hx-safe: 2.6s;          /* CSS-страховка: JS не стартовал — всё видно */
  --hx-z: 99;               /* под шапкой (components.css: z-index 100) */
}

@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  @keyframes hx-safe { to { opacity: 1; } }

  /* Прескрытие до старта. Список совпадает с REVEALS в js/hero-assembly.js —
     tests/hero-assembly-core.spec.js сверяет их. H1 и .hp__lede тут нет. */
  html.hx .hp__eyebrow,
  html.hx .hp-stage__marks,
  html.hx .hp-stage__reg,
  html.hx .hp-stage__bar,
  html.hx [data-hk-ground],
  html.hx [data-hk-body],
  html.hx [data-hk-dims],
  html.hx .hk__types,
  html.hx .hk__row,
  html.hx .hp-stage__cap,
  html.hx .hp__more,
  html.hx .pp > * {
    opacity: 0;
    /* Если движок так и не взял сцену (упал, не скачался) — через --hx-safe
       всё проявляется само; js/head.js к этому времени и так снимет .hx. */
    animation: hx-safe 0s linear var(--hx-safe) forwards;
  }
  html.hx .pp::before { opacity: 0; animation: hx-safe 0s linear var(--hx-safe) forwards; }

  /* Декор ds-home.css (hp-mark, hp-reg, hp-rule) во время и после интро не
     играет: метки, кресты, шкалу и кант ставят агенты. */
  html:is(.hx-run, .hx-done) :is(.hp-stage__marks, .hp-stage__reg i, .hp-stage__bar) { animation: none; }
  /* Псевдоэлемент внутри :is() недопустим и молча выпадает — отдельно */
  html:is(.hx-run, .hx-done) .pp::before { animation: none; }
  html.hx-run .hp-stage__bar { transform-origin: left; }
  html.hx-run .pp::before { transform-origin: left; }

  /* ── Оверлей ─────────────────────────────────────────────────────────── */
  .hx-ov {
    position: fixed; inset: 0; z-index: var(--hx-z);
    pointer-events: none;
    overflow: hidden;
    contain: strict;
    font: 600 11px/1 var(--font-body);
    color: var(--ink-key);
  }
  .hx-ov > * { position: absolute; top: 0; left: 0; }
  .hx-svg { width: 100%; height: 100%; overflow: visible; }
  .hx-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .hx-svg .hx-cut { stroke: var(--color-cut); stroke-width: 1.5; }
  .hx-svg .hx-crease { stroke: var(--color-crease); stroke-width: 1.25; stroke-dasharray: 5 3; }
  .hx-svg .hx-dim { stroke: var(--ink-key); stroke-width: 1; stroke-opacity: .7; }
  .hx-svg .hx-guide { stroke: var(--ink-magenta); stroke-width: 1; }

  /* Агент: стрелка 14×20 и бирка с именем, цвет бирки — краска бригады */
  .hx-a { will-change: transform; }
  .hx-a svg { display: block; width: 14px; height: 20px; overflow: visible; }
  .hx-a svg path { fill: var(--hx-ink, var(--ink-key)); stroke: #fff; stroke-width: 1.25; stroke-linejoin: round; }
  .hx-a__n {
    position: absolute; left: 12px; top: 16px;
    padding: 3px 6px 3px;
    border-radius: 2px 6px 6px 6px;
    background: var(--hx-ink, var(--ink-key));
    color: #fff;
    white-space: nowrap;
    letter-spacing: .01em;
  }
  .hx-a--y, .hx-a--kraft { --hx-on: var(--ink-key); }
  .hx-a--y .hx-a__n, .hx-a--kraft .hx-a__n { color: var(--ink-key); }
  .hx-a--k { --hx-ink: var(--ink-key); }
  .hx-a--c { --hx-ink: var(--ink-cyan); }
  .hx-a--m { --hx-ink: var(--ink-magenta); }
  .hx-a--y { --hx-ink: var(--ink-yellow); }
  .hx-a--kraft { --hx-ink: var(--kraft); }
  .hx-a--beam svg path { fill: none; stroke: var(--ink-key); stroke-width: 2; }

  /* Клик: кольцо от кончика стрелки */
  .hx-ring {
    width: 28px; height: 28px; margin: -14px 0 0 -14px;
    border: 1.5px solid var(--hx-ink, var(--ink-magenta));
    border-radius: 50%;
    opacity: 0;
  }

  /* Рамка выделения как в Figma: контур, 4 ручки, бейдж реального размера */
  .hx-frame { border: 1px solid var(--ink-cyan); opacity: 0; }
  .hx-frame i {
    position: absolute; width: 6px; height: 6px;
    background: #fff; border: 1px solid var(--ink-cyan);
  }
  .hx-frame i:nth-child(1) { left: -4px; top: -4px; }
  .hx-frame i:nth-child(2) { right: -4px; top: -4px; }
  .hx-frame i:nth-child(3) { left: -4px; bottom: -4px; }
  .hx-frame i:nth-child(4) { right: -4px; bottom: -4px; }
  .hx-frame b {
    position: absolute; left: 50%; bottom: -22px; translate: -50% 0;
    padding: 2px 5px; border-radius: 2px;
    background: var(--ink-cyan); color: #fff;
    font-weight: 600; white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  /* Бейдж зазора у смарт-гайда */
  .hx-gap {
    padding: 1px 4px; border-radius: 2px;
    background: var(--ink-magenta); color: #fff;
    font-variant-numeric: tabular-nums;
    opacity: 0;
  }

  /* Марквиз вокруг листа: четыре кромки, растут от угла */
  .hx-edge { background: var(--ink-cyan); opacity: 0; }

  /* Наборщик: полоса выделения строки H1 */
  .hx-sel { background: color-mix(in srgb, var(--ink-cyan) 18%, transparent); transform-origin: left; opacity: 0; }
  .hx-tag {
    padding: 3px 6px; border-radius: 2px;
    background: var(--ink-key); color: #fff;
    white-space: nowrap; opacity: 0;
  }

  /* Пластины C/M/Y: растр точками своей краски, ложатся с неприводкой */
  .hx-plate {
    opacity: 0;
    background-size: 7px 7px;
    mix-blend-mode: multiply;
    border-radius: 2px;
  }
  .hx-plate--c { background-image: radial-gradient(circle, var(--ink-cyan) 1.6px, transparent 2px); }
  .hx-plate--m { background-image: radial-gradient(circle, var(--ink-magenta) 1.6px, transparent 2px); background-position: 3px 2px; }
  .hx-plate--y { background-image: radial-gradient(circle, var(--ink-yellow) 1.9px, transparent 2.3px); background-position: 1px 4px; }

  /* Чип «Паспорт заказа», который Менеджер приносит в колонку */
  .hx-chip {
    padding: 6px 10px; border-radius: 4px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-divider);
    box-shadow: var(--shadow-lift);
    white-space: nowrap; opacity: 0;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--color-text);
  }

  /* Цифры размеров: каретка набирает их поверх полей до проявления ряда */
  .hx-type {
    font: 600 15px/1 var(--font-body);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    white-space: nowrap;
  }
  .hx-type span { opacity: 0; }
  .hx-type::after {
    content: ""; display: inline-block; width: 1.5px; height: 1.05em;
    margin-left: 1px; vertical-align: -0.15em;
    background: var(--ink-magenta);
  }

  /* Штамп ОТК */
  .hx-stamp {
    padding: 8px 12px 7px;
    border: 2px solid var(--ink-magenta);
    border-radius: 4px;
    color: var(--ink-magenta);
    font: 800 15px/1.05 var(--font-display);
    letter-spacing: .04em; text-transform: uppercase;
    text-align: center;
    opacity: 0;
    background: color-mix(in srgb, var(--color-surface, #fff) 70%, transparent);
  }
  .hx-stamp small { display: block; margin-top: 3px; font: 600 10px/1 var(--font-body); letter-spacing: .06em; }

  /* HUD: счётчик агентов и слоёв, проходы K C M Y, денситометр */
  .hx-hud {
    left: max(12px, env(safe-area-inset-left));
    top: auto; bottom: max(12px, env(safe-area-inset-bottom));
    width: min(280px, calc(100% - 24px)); height: 48px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgb(29 29 27 / .88);
    color: #fff;
    font: 600 12px/1.2 var(--font-body);
    font-variant-numeric: tabular-nums;
    contain: strict;
    opacity: 0;
  }
  .hx-hud__l { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hx-hud__ink { display: flex; gap: 8px; margin-top: 5px; font-size: 10px; letter-spacing: .06em; color: rgb(255 255 255 / .55); }
  .hx-hud__ink span { display: flex; align-items: center; gap: 4px; }
  .hx-hud__ink span.is-on { color: #fff; }
  .hx-hud__ink i { display: block; width: 26px; height: 3px; background: rgb(255 255 255 / .15); }
  .hx-hud__ink i b { display: block; height: 100%; transform-origin: left; scale: 0 1; }
  .hx-hud__ink [data-ink="k"] b { background: #fff; }
  .hx-hud__ink [data-ink="c"] b { background: var(--ink-cyan); }
  .hx-hud__ink [data-ink="m"] b { background: var(--ink-magenta); }
  .hx-hud__ink [data-ink="y"] b { background: var(--ink-yellow); }

  /* Лёгкий режим: регулятор качества снимает второстепенный декор */
  .hx-ov.is-lite :is(.hx-frame, .hx-gap, .hx-edge, .hx-sel, .hx-tag, .hx-svg .hx-guide) { display: none; }

  /* Тёмная тема: multiply на тёмном листе гасит растр — без смешения, тише */
  [data-theme="dark"] .hx-plate { mix-blend-mode: normal; }
  [data-theme="dark"] .hx-a svg path { stroke: var(--color-bg, #232321); }
  [data-theme="dark"] .hx-a__n { box-shadow: 0 0 0 1px var(--color-divider); }
  [data-theme="dark"] .hx-stamp { background: color-mix(in srgb, var(--color-surface) 75%, transparent); }
  [data-theme="dark"] .hx-svg .hx-dim { stroke: #fff; }
}

/* Кнопка «Пропустить сборку» — вне aria-hidden оверлея, обычный порядок
   табуляции, фокус не перехватывает. Без моушна её нет вовсе (её создаёт JS). */
.hx-skip {
  position: fixed; z-index: var(--hx-z);
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  min-height: 44px; padding: 0 16px;
  border: 1px solid rgb(255 255 255 / .25);
  border-radius: 8px;
  background: rgb(29 29 27 / .88);
  color: #fff;
  font: 600 13px/1 var(--font-body);
  cursor: pointer;
  opacity: 0;
}
.hx-skip:hover { background: var(--ink-key); }
.hx-skip:focus-visible { outline: 2px solid var(--color-focus, var(--ink-magenta)); outline-offset: 2px; }

/* Телефон: липкая панель «Позвонить / Рассчитать» (components.css) снизу —
   счётчик и кнопка встают над ней, а не на её кнопки. Сдвиг — translate, а не
   bottom: панель появляется и прячется по ходу, а смена bottom у fixed-блока —
   это layout shift (CLS), transform — нет. */
@media (max-width: 900px) {
  .hx-skip, .hx-hud { transition: translate var(--dur-ui) var(--ease); }
  body:has(.sticky-cta:not(.is-hidden)) .hx-skip,
  body:has(.sticky-cta:not(.is-hidden)) .hx-hud { translate: 0 calc(-56px - env(safe-area-inset-bottom, 0px)); }
}

/* Узкий экран: счётчик и «Пропустить сборку» не помещаются в одну строку —
   счётчик встаёт над кнопкой, а не на неё (кнопка 44 px + зазор 8 px). */
@media screen and (max-width: 599px) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .hx-hud { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 52px); }
}