/* ============================================================================
   scrub.css — A CAMADA DE MOVIMENTO (os 6 momentos cinematográficos).
   Regra de ouro: o estado-base (em sections.css/hero.css) JÁ é o fallback
   legível. Tudo aqui vive sob @media (prefers-reduced-motion: no-preference),
   então movimento reduzido NUNCA recebe scrub — a página conta a história
   inteira sem um único frame. Scrub contínuo = animation-timeline nativo
   (compositor, sem scroll-listener de JS).
   ============================================================================ */

/* --------------------------------------------------------------------------
   REVEAL de entrada (fallback universal via IntersectionObserver → .is-in).
   Só ativa com JS presente (.js) e movimento permitido. Não toca elementos
   que têm scrub de transform próprio (split/badges/triagem/eco).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0; transform: translateY(22px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Os scrubs contínuos — só onde o navegador suporta animation-timeline.
   Sem suporte: cada elemento permanece no estado-base (= fallback final).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  /* MOMENTO 1 — o relógio-detonador que esquenta (fio condutor, scroll da página). */
  @supports (animation-timeline: scroll()) {
    .detonator-rail {
      background: var(--go-dim); box-shadow: none;
      animation: rail-heat linear both;
      animation-timeline: scroll(root block);
    }
  }

  /* MOMENTO 3 — A VIRADA: o painel racha em verde/vermelho (S4). */
  @supports (animation-timeline: view()) {
    .split-left {
      animation: crack-left linear both;
      animation-timeline: view(); animation-range: cover 0% cover 55%;
    }
    .split-right {
      animation: crack-right linear both;
      animation-timeline: view(); animation-range: cover 0% cover 55%;
    }
    .split-rocket {
      animation: launch var(--steps-8bit) both;
      animation-timeline: view(); animation-range: cover 28% cover 58%;
    }

    /* MOMENTO 4 — os selos acendem um a um (S6), escalonado pelo scroll. */
    .trail .ignite { animation: ignite-badge var(--steps-8bit) both; animation-timeline: view(); animation-range: entry 12% cover 38%; }
    .trail .ignite .badge-sprite { animation: ignite-sprite var(--steps-8bit) both; animation-timeline: view(); animation-range: entry 12% cover 38%; }

    /* MOMENTO 5 — o carimbo ✓/✗ da triagem (S7), item a item. */
    .triage-list .mark-ico { animation: stamp var(--steps-8bit) both; animation-timeline: view(); animation-range: entry 0% cover 22%; }

    /* MOMENTO 6 — o eco do GAME OVER no fechamento (S10). */
    .gameover-echo { animation: echo var(--steps-8bit) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }

  /* MOMENTO 2 — o espelho que não acende (S2): leve respiro de entrada.
     O cinza/morto é o estado-base permanente; aqui só uma chegada sutil. */
  @supports (animation-timeline: view()) {
    .mirror-frame { animation: mirror-in linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
  }
}

/* --------------------------------------------------------------------------
   Keyframes (definidos fora do @media — só são REFERENCIADOS sob no-preference)
   -------------------------------------------------------------------------- */
@keyframes rail-heat {
  0%   { background: var(--go-dim); box-shadow: none; }
  45%  { background: var(--warn); box-shadow: 0 0 10px rgba(245,166,35,0.40); }
  100% { background: var(--danger); box-shadow: var(--glow-danger); }
}
@keyframes crack-left  { from { transform: translateX(14%);  filter: grayscale(1); opacity: 0.5; } to { transform: none; filter: none; opacity: 1; } }
@keyframes crack-right { from { transform: translateX(-14%); filter: grayscale(1); opacity: 0.5; } to { transform: none; filter: none; opacity: 1; } }
@keyframes launch { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(-6px); opacity: 1; } }
@keyframes ignite-badge  { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes ignite-sprite { from { filter: grayscale(1) brightness(0.55); } to { filter: grayscale(0) drop-shadow(0 0 6px rgba(255,182,39,0.35)); } }
@keyframes stamp { from { transform: scale(0); opacity: 0; } 60% { transform: scale(1.2); } to { transform: scale(1); opacity: 1; } }
@keyframes echo  { from { opacity: 0; } to { opacity: 0.16; } }
@keyframes mirror-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 0.9; transform: none; } }