/* ════════════════════════════════════════════════════════════════════
   FORJA · DECK · sistema de movimento cinematográfico
   Carregar DEPOIS de dspc-deck.css.
   Toda animação dispara quando a <section> ganha [data-deck-active] e
   re-executa a cada navegação. Dirigido por variáveis (--anim-amt /
   --anim-spd) com valores padrão na raiz.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --anim-amt: 1.5;   /* intensidade do movimento (distância/escala/blur) */
  --anim-spd: 1;     /* multiplicador de velocidade (1 = base; <1 mais rápido) */
}

deck-stage section {
  --d:       calc(.66s * var(--anim-spd));
  --d-slow:  calc(1s   * var(--anim-spd));
  --shift:   calc(30px * var(--anim-amt));
  --shift-lg:calc(64px * var(--anim-amt));
  --blur:    calc(7px  * var(--anim-amt));
  --push:    calc(1 + .03 * var(--anim-amt));
  --ease:      cubic-bezier(.16, .84, .3, 1);
  --ease-soft: cubic-bezier(.22, .68, .3, 1);
}

/* ─────────────────────────────────────────────────────────────────────
   KEYFRAMES · usam custom properties, então respondem à intensidade
   ───────────────────────────────────────────────────────────────────── */
@keyframes deckRise   { from { opacity: 0; transform: translateY(var(--shift)); filter: blur(calc(var(--blur) * .35)); }
                        to   { opacity: 1; transform: none; filter: blur(0); } }
@keyframes deckRiseSm { from { opacity: 0; transform: translateY(calc(var(--shift) * .6)); }
                        to   { opacity: 1; transform: none; } }
@keyframes deckFade   { from { opacity: 0; } to { opacity: 1; } }

@keyframes deckHeroF  { from { opacity: 0; transform: translateX(var(--shift-lg)); filter: blur(var(--blur)); }
                        to   { opacity: 1; transform: none; filter: blur(0); } }
@keyframes deckHeroB  { from { opacity: 0; transform: translateX(calc(-1 * var(--shift-lg))); filter: blur(var(--blur)); }
                        to   { opacity: 1; transform: none; filter: blur(0); } }

@keyframes deckBigF   { from { opacity: 0; transform: translateX(calc(var(--shift-lg) * 1.15)) scale(.9); filter: blur(calc(var(--blur) * 1.5)); }
                        to   { opacity: 1; transform: none; filter: blur(0); } }
@keyframes deckBigB   { from { opacity: 0; transform: translateX(calc(var(--shift-lg) * -1.15)) scale(.9); filter: blur(calc(var(--blur) * 1.5)); }
                        to   { opacity: 1; transform: none; filter: blur(0); } }

@keyframes deckCover  { from { opacity: 0; transform: translateY(var(--shift-lg)) scale(1.08); filter: blur(var(--blur)); }
                        to   { opacity: 1; transform: none; filter: blur(0); } }

@keyframes deckPop    { from { opacity: 0; transform: scale(.6); }
                        60%  { opacity: 1; transform: scale(1.12); }
                        to   { opacity: 1; transform: scale(1); } }

@keyframes deckLine   { from { width: 0; opacity: 0; } to { width: 60px; opacity: 1; } }

/* câmera: leve push para dentro ao abrir o slide */
@keyframes deckPush   { from { transform: scale(var(--push)); } to { transform: none; } }

/* fundo: letra-monumento entra com escala forte e foco */
@keyframes deckMegaIn { from { opacity: 0; transform: scale(1.28); filter: blur(14px); }
                        to   { opacity: .05; transform: scale(1); filter: blur(0); } }
@keyframes deckGlowIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
                        to   { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* brilho de forja · clarão que pulsa e assenta */
@keyframes deckFlare  { 0%   { text-shadow: 0 0 0 var(--amarelo-12); }
                        55%  { text-shadow: 0 0 48px var(--amarelo-35); }
                        100% { text-shadow: 0 0 26px var(--amarelo-12); } }

/* ── movimento ambiente contínuo (o quadro nunca fica parado) ── */
@keyframes ambMega { 0% { transform: scale(1) translateY(0); }
                     50% { transform: scale(1.05) translate(-1.2%, -1.8%); }
                     100% { transform: scale(1) translateY(0); } }
@keyframes ambGlow { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
                     50% { transform: translate(-44%, -56%) scale(1.16); opacity: .78; }
                     100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* ─────────────────────────────────────────────────────────────────────
   CÂMERA · push sutil no slide inteiro ao entrar
   ───────────────────────────────────────────────────────────────────── */
deck-stage section[data-deck-active] { animation: deckPush var(--d-slow) var(--ease) both; }

/* ─────────────────────────────────────────────────────────────────────
   CAMADAS DE FUNDO (com movimento ambiente, gatilho na classe .cine-amb)
   ───────────────────────────────────────────────────────────────────── */
deck-stage section[data-deck-active] .megabg { animation: deckMegaIn var(--d-slow) var(--ease) both; }
deck-stage section[data-deck-active] .dglow  { animation: deckGlowIn var(--d-slow) var(--ease-soft) both; }

deck-stage.cine-amb section[data-deck-active] .megabg {
  animation: deckMegaIn var(--d-slow) var(--ease) both,
             ambMega 17s ease-in-out var(--d-slow) infinite;
}
deck-stage.cine-amb section[data-deck-active] .dglow {
  animation: deckGlowIn var(--d-slow) var(--ease-soft) both,
             ambGlow 13s ease-in-out var(--d-slow) infinite;
}

/* ─────────────────────────────────────────────────────────────────────
   EYEBROW + linha que se desenha
   ───────────────────────────────────────────────────────────────────── */
deck-stage section[data-deck-active] .eyebrow         { animation: deckRiseSm var(--d) var(--ease) both; animation-delay: .05s; }
deck-stage section[data-deck-active] .eyebrow::before { animation: deckLine var(--d) var(--ease) both; animation-delay: .16s; }

/* ─────────────────────────────────────────────────────────────────────
   TÍTULOS / HERÓIS · direcionais, com focus-pull e clarão de forja
   ───────────────────────────────────────────────────────────────────── */
deck-stage section[data-deck-active] .display {
  animation: deckHeroF var(--d) var(--ease) both;
  animation-delay: .12s;
}
deck-stage section[data-deck-active] .bigletter {
  animation: deckBigF var(--d-slow) var(--ease) both,
             deckFlare calc(var(--d-slow) * 1.6) ease-out both;
  animation-delay: .08s;
}
deck-stage section[data-deck-active][data-dir="back"] .display   { animation-name: deckHeroB; }
deck-stage section[data-deck-active][data-dir="back"] .bigletter { animation-name: deckBigB, deckFlare; }

deck-stage section[data-deck-active] .lead     { animation: deckRise var(--d) var(--ease) both; animation-delay: .28s; }
deck-stage section[data-deck-active] .pcol h3  { animation: deckRise var(--d) var(--ease) both; animation-delay: .18s; }
deck-stage section[data-deck-active] .pcol > p { animation: deckRise var(--d) var(--ease) both; animation-delay: .32s; }

/* ─────────────────────────────────────────────────────────────────────
   CAPA
   ───────────────────────────────────────────────────────────────────── */
deck-stage section[data-deck-active] .cover-sigil { animation: deckRiseSm var(--d) var(--ease) both; animation-delay: .04s; }
deck-stage section[data-deck-active] .cover-title {
  animation: deckCover var(--d-slow) var(--ease) both,
             deckFlare calc(var(--d-slow) * 1.8) ease-out both;
  animation-delay: .12s;
}
deck-stage section[data-deck-active] .cover-sub  { animation: deckRise var(--d) var(--ease) both; animation-delay: .34s; }
deck-stage section[data-deck-active] .cover-note { animation: deckRise var(--d) var(--ease) both; animation-delay: .5s; }

/* ─────────────────────────────────────────────────────────────────────
   MOLDURAS (grids) · fade da estrutura, células sobem em cascata
   ───────────────────────────────────────────────────────────────────── */
deck-stage section[data-deck-active] :is(.rail, .flow, .philo4, .panels, .deflist, .ptable) {
  animation: deckFade .42s var(--ease) both; animation-delay: .18s;
}
deck-stage section[data-deck-active] :is(.rail, .flow, .philo4, .panels, .deflist, .ptable, .chips, .statgrid, .cases, .versus) > * {
  animation: deckRiseSm var(--d) var(--ease) both;
  animation-delay: calc(.3s + var(--i, 0) * .08s);
}
deck-stage section[data-deck-active] :is(.rail, .flow, .philo4, .panels, .deflist, .ptable, .chips, .statgrid, .cases, .versus) > *:nth-child(1) { --i: 0; }
deck-stage section[data-deck-active] :is(.rail, .flow, .philo4, .panels, .deflist, .ptable, .chips, .statgrid, .cases, .versus) > *:nth-child(2) { --i: 1; }
deck-stage section[data-deck-active] :is(.rail, .flow, .philo4, .panels, .deflist, .ptable, .chips, .statgrid, .cases, .versus) > *:nth-child(3) { --i: 2; }
deck-stage section[data-deck-active] :is(.rail, .flow, .philo4, .panels, .deflist, .ptable, .chips, .statgrid, .cases, .versus) > *:nth-child(4) { --i: 3; }
deck-stage section[data-deck-active] :is(.rail, .flow, .philo4, .panels, .deflist, .ptable, .chips, .statgrid, .cases, .versus) > *:nth-child(5) { --i: 4; }
deck-stage section[data-deck-active] :is(.rail, .flow, .philo4, .panels, .deflist, .ptable, .chips, .statgrid, .cases, .versus) > *:nth-child(6) { --i: 5; }
deck-stage section[data-deck-active] :is(.rail, .flow, .philo4, .panels, .deflist, .ptable, .chips, .statgrid, .cases, .versus) > *:nth-child(7) { --i: 6; }
deck-stage section[data-deck-active] :is(.rail, .flow, .philo4, .panels, .deflist, .ptable, .chips, .statgrid, .cases, .versus) > *:nth-child(8) { --i: 7; }
deck-stage section[data-deck-active] :is(.rail, .flow, .philo4, .panels, .deflist, .ptable, .chips, .statgrid, .cases, .versus) > *:nth-child(9) { --i: 8; }

/* destaque dentro das células: letra do passo e número do fluxo pulsam */
deck-stage section[data-deck-active] .step .letter,
deck-stage section[data-deck-active] .flow .node .num,
deck-stage section[data-deck-active] .philo4 .pp .n {
  animation: deckFlare calc(var(--d-slow) * 1.5) ease-out both;
  animation-delay: calc(.42s + var(--i, 0) * .08s);
}

/* ─────────────────────────────────────────────────────────────────────
   CITAÇÃO · EQUAÇÃO (operadores estouram um a um) · RODAPÉ
   ───────────────────────────────────────────────────────────────────── */
deck-stage section[data-deck-active] .anchor   { animation: deckRise var(--d) var(--ease) both; animation-delay: .42s; }
deck-stage section[data-deck-active] .equation { animation: deckFade .5s var(--ease) both; animation-delay: .5s; }
deck-stage section[data-deck-active] .equation b {
  display: inline-block;
  animation: deckPop .5s var(--ease) both;
  animation-delay: calc(.62s + var(--i, 0) * .12s);
}
deck-stage section[data-deck-active] .equation b:nth-of-type(1) { --i: 0; }
deck-stage section[data-deck-active] .equation b:nth-of-type(2) { --i: 1; }
deck-stage section[data-deck-active] .equation b:nth-of-type(3) { --i: 2; }
deck-stage section[data-deck-active] .equation b:nth-of-type(4) { --i: 3; }
deck-stage section[data-deck-active] .equation b:nth-of-type(5) { --i: 4; }
deck-stage section[data-deck-active] .equation b:nth-of-type(6) { --i: 5; }
deck-stage section[data-deck-active] .ftr { animation: deckFade .6s ease both; animation-delay: .55s; }

/* trilho de progresso: fade + flare no nó ativo */
deck-stage section[data-deck-active] .deck-track { animation: deckFade .45s var(--ease) both; animation-delay: .1s; }
deck-stage section[data-deck-active] .deck-track .tnode.on { animation: deckFlare calc(var(--d-slow) * 1.4) ease-out both; animation-delay: .3s; }

/* fórmula / equação monumental entram como o lead */
deck-stage section[data-deck-active] :is(.formula, .bigeq) {
  animation: deckRise var(--d) var(--ease) both; animation-delay: .24s;
}

/* ─────────────────────────────────────────────────────────────────────
   SEQUÊNCIA DE BUILD (slides .seq · overview montando D·S·P·C)
   Régua fixa de 4 posições. Os passos vão sendo MONTADOS na ordem
   (D → S → P → C), cada um no seu lugar; os ainda não alcançados
   ocupam o espaço mas ficam invisíveis.

   • 1º slide (só "seq" · o D): animações completas, como entrada normal.
   • slides de continuação (".seq.cont" · S, P, C): a cena fica ESTÁTICA
     (nada re-anima) e SÓ o passo novo surge · preserva a continuidade,
     como se estivesse montando na mesma tela.
   ───────────────────────────────────────────────────────────────────── */
.step.ghost, .node.ghost { visibility: hidden; }

/* continuação: trava todas as animações da cena... */
deck-stage section.seq.cont[data-deck-active],
deck-stage section.seq.cont[data-deck-active] .eyebrow,
deck-stage section.seq.cont[data-deck-active] .eyebrow::before,
deck-stage section.seq.cont[data-deck-active] .display,
deck-stage section.seq.cont[data-deck-active] .lead,
deck-stage section.seq.cont[data-deck-active] .rail,
deck-stage section.seq.cont[data-deck-active] .rail .step,
deck-stage section.seq.cont[data-deck-active] .rail .step .letter,
deck-stage section.seq.cont[data-deck-active] .flow,
deck-stage section.seq.cont[data-deck-active] .flow .node,
deck-stage section.seq.cont[data-deck-active] .flow .node .num,
deck-stage section.seq.cont[data-deck-active] .anchor,
deck-stage section.seq.cont[data-deck-active] .equation,
deck-stage section.seq.cont[data-deck-active] .equation b,
deck-stage section.seq.cont[data-deck-active] .ftr {
  animation: none !important;
}
/* ...exceto o item recém-montado, que surge com clarão */
deck-stage section.seq.cont[data-deck-active] .rail .step.current,
deck-stage section.seq.cont[data-deck-active] .flow .node.current {
  animation: deckRiseSm var(--d) var(--ease) both !important;
}
deck-stage section.seq.cont[data-deck-active] .rail .step.current .letter,
deck-stage section.seq.cont[data-deck-active] .flow .node.current .num {
  animation: deckFlare calc(var(--d-slow) * 1.6) ease-out both !important;
}

/* ─────────────────────────────────────────────────────────────────────
   ACESSIBILIDADE
   ───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  deck-stage section[data-deck-active] *,
  deck-stage section[data-deck-active] *::before,
  deck-stage section[data-deck-active] { animation: none !important; }
}