/* ==========================================================================
   STARPRINT — sa.css: скролл-сборка главной (SA-01, docs/plans/SA-home-assembly.md)

   Всё движение — внутри одного @media: при prefers-reduced-motion и
   forced-colors страница статична и показана целиком (как без JS).
   Длительности задаёт движок (js/sa-engine.js), здесь только страховка
   --sa-failsafe. Анимируем transform, opacity и stroke-dashoffset.
   Цвета — только через токены css/tokens.css: тёмная тема берётся оттуда же.
   ========================================================================== */

@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {

  :root {
    /* Страховка без таймера JS: через это время непокрытые блоки открываются */
    --sa-failsafe: 3s;
    /* Курсоры: Мордашка крупнее остальных агентов */
    --sa-cur-base: 16px;
    --sa-cur-lead: 28px;
    --sa-hit: 44px;
    /* Бирка курсора: фон и текст; в тёмной теме — отдельный тон плашки */
    --sa-tag-bg: var(--color-surface);
    --sa-tag-ink: var(--color-text);
    /* Полоса прогресса на телефоне: высота для отступа кнопки пропуска */
    --sa-hud-h: 3px;
  }
  [data-theme="dark"] {
    --sa-tag-bg: var(--color-surface-offset);
    --sa-tag-ink: var(--color-text);
  }

  /* ── Скрытие: контент в DOM с первого байта, невидим до сборки ─────── */
  html.sa [data-sa-part]:not(.is-sa) {
    opacity: 0;
  }

  /* ── CSS-страховка: сборка не стартовала — блоки открываются сами ───── */
  @keyframes sa-open {
    to { opacity: 1; }
  }
  html.sa:not([data-sa-start]) [data-sa-part] {
    animation: sa-open 0s var(--sa-failsafe) forwards;
  }

  /* ── Секции и каркас: геометрия не меняется, оверлеи — поверх ───────── */
  html.sa [data-sa] {
    position: relative;
  }
  html.sa main {
    overflow-x: clip;
  }

  .sa-ov {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 2;
  }

  /* ── Курсоры агентов ───────────────────────────────────────────────── */
  .sa-cur {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--sa-cur-base);
    height: var(--sa-cur-base);
    pointer-events: none;
    will-change: transform;
  }
  .sa-cur svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .sa-cur[data-sa-ink="c"] { --sa-ink: var(--ink-cyan); }
  .sa-cur[data-sa-ink="m"] { --sa-ink: var(--ink-magenta); }
  .sa-cur[data-sa-ink="y"] { --sa-ink: var(--ink-yellow); }
  .sa-cur[data-sa-ink="k"] { --sa-ink: var(--ink-key); }
  .sa-cur[data-sa-ink="kraft"] { --sa-ink: var(--kraft); }
  .sa-cur__arrow {
    fill: var(--sa-ink);
    stroke: var(--color-surface);
    stroke-width: 1px;
  }
  .sa-cur__ring {
    fill: none;
    stroke: var(--sa-ink);
    stroke-width: 1px;
  }

  /* Любимая Мордашка: 28 px, двойной контур (белый снаружи, M-ink внутри) */
  .sa-cur--lead {
    width: var(--sa-cur-lead);
    height: var(--sa-cur-lead);
  }
  .sa-cur--lead .sa-cur__outer {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2px;
  }
  .sa-cur--lead .sa-cur__arrow {
    fill: var(--ink-magenta);
    stroke: var(--ink-key);
    stroke-width: 1px;
  }
  .sa-cur--lead .sa-cur__ring {
    stroke: var(--color-focus);
    stroke-width: 2px;
  }

  /* Бирка: полная и короткая (на телефоне) */
  .sa-tag {
    position: absolute;
    left: var(--space-4);
    top: calc(var(--sa-cur-lead) * -1);
    padding: var(--space-1) var(--space-2);
    background: var(--sa-tag-bg);
    color: var(--sa-tag-ink);
    border: 1px solid var(--color-text);
    font-family: var(--font-dim);
    font-size: var(--text-caption);
    line-height: 1.2;
    white-space: nowrap;
  }
  .sa-tag__short {
    display: none;
  }

  /* ── Штамп ОТК: Мордашка ставит в конце каждой секции ──────────────── */
  .sa-stamp {
    position: absolute;
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border: 2px solid var(--color-focus);
    color: var(--color-focus);
    font-family: var(--font-dim);
    font-size: var(--text-caption);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: transparent;
    transform: rotate(-4deg);
    pointer-events: none;
  }

  /* ── Рамка, направляющие, сканлайны, линии ─────────────────────────── */
  .sa-frame {
    position: absolute;
    border: 1px dashed var(--color-border);
    pointer-events: none;
  }
  .sa-guide {
    position: absolute;
    height: 1px;
    background: var(--ink-cyan);
    transform-origin: left center;
  }
  .sa-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, var(--color-divider) 3px, var(--color-divider) 4px);
    pointer-events: none;
  }
  .sa-path {
    position: absolute;
    fill: none;
    stroke: var(--sa-ink, var(--ink-cyan));
    stroke-width: 1px;
    stroke-dasharray: 2 3;
    pointer-events: none;
  }
  .sa-check path {
    fill: none;
    stroke: var(--color-success);
    stroke-width: 2px;
  }

  /* ── HUD: один на страницу, слева внизу, ниже шапки ────────────────── */
  .sa-hud {
    position: fixed;
    left: var(--gutter);
    bottom: var(--space-4);
    z-index: 90;
    padding: var(--space-1) var(--space-3);
    background: var(--color-surface);
    color: var(--color-text-muted);
    border: 1px solid var(--color-divider);
    font-family: var(--font-dim);
    font-size: var(--text-caption);
    pointer-events: none;
  }
  .sa-hud__bar {
    display: none;
  }

  /* Кнопка «Пропустить сборку»: клавиатурная, цель 44 px, над HUD (z 98 > 90) */
  .sa-skip {
    position: fixed;
    right: var(--gutter);
    bottom: var(--space-4);
    z-index: 98;
    min-width: var(--sa-hit);
    min-height: var(--sa-hit);
    padding: 0 var(--space-4);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-text);
    font: inherit;
    cursor: pointer;
  }
  .sa-skip:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  /* ── Оверлеи сборки: рамки с маркерами, направляющие, галочки, уровни ── */
  .sa-frame__h {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-text);
  }
  .sa-frame__h--tl { left: -5px; top: -5px; }
  .sa-frame__h--tr { right: -5px; top: -5px; }
  .sa-frame__h--bl { left: -5px; bottom: -5px; }
  .sa-frame__h--br { right: -5px; bottom: -5px; }
  .sa-guide--red {
    background: var(--color-focus);
  }
  .sa-check {
    position: absolute;
    width: 28px;
    height: 28px;
    overflow: visible;
    pointer-events: none;
  }
  .sa-check path {
    stroke-linecap: round;
  }

  /* Уровни качества (js/sa-engine.js, governor): lite — без сканлайнов,
     minimal — без курсоров и путей. Блоки и штампы остаются. */
  html[data-sa-level="1"] .sa-scan {
    display: none;
  }
  html[data-sa-level="2"] .sa-scan,
  html[data-sa-level="2"] .sa-path,
  html[data-sa-level="2"] .sa-cur {
    display: none;
  }

  /* ── Телефон (390 px): короткая бирка, полоса прогресса, без путей и сканлайнов ── */
  @media (max-width: 599px) {
    .sa-tag__full {
      display: none;
    }
    .sa-tag__short {
      display: inline;
    }
    .sa-path,
    .sa-scan {
      display: none;
    }
    .sa-hud {
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0;
      border: 0;
      background: transparent;
    }
    .sa-hud__text {
      display: none;
    }
    /* Полоса прогресса внизу: кнопка поднимается над ней, без перекрытия */
    .sa-skip {
      bottom: calc(var(--space-4) + var(--sa-hud-h));
    }
    .sa-hud__bar {
      display: block;
      height: 3px;
      background: var(--color-divider);
    }
    .sa-hud__fill {
      display: block;
      height: 100%;
      background: var(--color-focus);
      transform-origin: left center;
      transform: scaleX(0);
    }
  }

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