/* ═══════════════════════════════════════════════════════════════
   H2G2 · Scroll FX — visual dos efeitos dirigidos por js/scroll-fx.js
   --p  : progresso do elemento (0 → 1), já suavizado
   --gp : progresso do grupo (contêiner)
   Tudo só se aplica com html.fx (JS ativo e sem reduced-motion).
   Usa as propriedades individuais translate/rotate/scale para não
   brigar com os transform de :hover já existentes.
   ═══════════════════════════════════════════════════════════════ */

/* sticky precisa que .h2 não vire contêiner de rolagem */
@supports (overflow: clip) { .h2 { overflow-x: clip } }

/* traço de título (também sem JS: --p cai para 1) */
html.fx .hsec::after{content:"";display:block;width:calc(var(--p,1) * 72px);height:3px;margin-top:.34em;background:linear-gradient(90deg,#E8643F,rgba(232,100,63,0))}

html.fx .rv{animation:none!important}
html.fx [data-fx]:not([data-fx=none]){will-change:opacity,translate}

/* ── 1 · HERO → GALE : pin + cortina ───────────────────────────
   O hero fica preso enquanto a seção Gale sobe por cima dele;
   o planeta aproxima, o texto sobe desfocando e tudo escurece. */
.pin-hero{position:relative}
.pin-spacer{height:0}
html.fx{--pin:100vh}
html.fx .pin-spacer{height:var(--pin)}
html.fx .pin-hero > #top{position:sticky!important;top:var(--hero-top,0px);z-index:0}
html.fx #top::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:radial-gradient(ellipse at 60% 50%,rgba(5,5,6,.55),#050506 75%);opacity:calc(var(--hero-out,0) * .92)}
html.fx #h2-hero-wrap{scale:calc(1 + var(--hero-out,0) * .16);transform-origin:68% 50%}
html.fx #top .hero-copy{translate:0 calc(var(--hero-out,0) * -160px);opacity:calc(1 - var(--hero-out,0) * 1.5);filter:blur(calc(var(--hero-out,0) * 8px))}
html.fx #gale{margin-top:calc(var(--pin) * -1);z-index:1;background-color:#0a0a0b;box-shadow:0 -40px 90px rgba(0,0,0,.75)}
html.fx #gale::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#E8643F 30%,#F2B33D 50%,#E8643F 70%,transparent);box-shadow:0 0 18px 2px rgba(232,100,63,.55);opacity:calc(.35 + var(--hero-out,0) * .65);scale:calc(.3 + var(--hero-out,0) * .7) 1}

/* ── parallax da grade de fundo ─────────────────────────────── */
html.fx .sec.grid-bg{background-position:0 var(--py,0px)}

/* ── genéricos ──────────────────────────────────────────────── */
html.fx [data-fx=rise]{opacity:var(--p,1);translate:0 calc((1 - var(--p,1)) * 56px)}
html.fx [data-fx=slide-l]{opacity:var(--p,1);translate:calc((1 - var(--p,1)) * -64px) 0}
html.fx [data-fx=slide-r]{opacity:var(--p,1);translate:calc((1 - var(--p,1)) * 64px) 0}

/* títulos: varredura da esquerda p/ direita */
html.fx [data-fx=wipe]{clip-path:inset(-.3em calc((1 - var(--p,1)) * 100%) -.5em 0);translate:calc((1 - var(--p,1)) * -18px) 0}

/* ── 2 · GALE : telemetria — células sobem, linha de varredura ─ */
html.fx .fx-stats{position:relative}
html.fx .fx-stats::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:calc(var(--gp,1) * 100%);background:linear-gradient(90deg,rgba(232,100,63,0),#E8643F);box-shadow:0 0 14px #E8643F;pointer-events:none;opacity:calc(1 - var(--gp,1) * .55)}
html.fx [data-fx=cell]{opacity:var(--p,1);translate:0 calc((1 - var(--p,1)) * 38px);filter:brightness(calc(.6 + var(--p,1) * .4))}

/* ── 3 · GALE → MAPA : abertura de diafragma (orbital lock) ──── */
html.fx [data-fx=aperture]{clip-path:inset(calc((1 - var(--p,1)) * 16%) calc((1 - var(--p,1)) * 24%) round calc((1 - var(--p,1)) * 56px))}
html.fx [data-fx=aperture]::after{content:"";position:absolute;inset:0;z-index:30;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(10,10,11,.9));opacity:calc(1 - var(--p,1))}

/* ── 4 · MAPA → FEATURES : cartões se erguem em 3D ──────────── */
html.fx :has(> .fcard){perspective:1400px}
html.fx [data-fx=tilt]{transform-origin:50% 100%;opacity:var(--p,1);translate:0 calc((1 - var(--p,1)) * 90px);rotate:x calc((1 - var(--p,1)) * 42deg);scale:calc(.9 + var(--p,1) * .1)}

/* ── 5 · FEATURES → CAPACETE : abertura do visor ────────────── */
html.fx [data-fx=visor]{clip-path:ellipse(calc(24% + var(--p,1) * 66%) calc(14% + var(--p,1) * 78%) at 50% 50%)}
html.fx [data-fx=visor]::after{content:"";position:absolute;inset:0;z-index:45;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(143,180,232,.18),transparent 60%);opacity:calc(1 - var(--p,1))}

/* ── 6 · CAPACETE → EQUIPE : emblema gira, dossiês viram ─────── */
html.fx [data-fx=spin]{opacity:var(--p,1);rotate:calc((1 - var(--p,1)) * -160deg);scale:calc(.55 + var(--p,1) * .45)}
html.fx :has(> .crew){perspective:1600px}
html.fx [data-fx=flip]{opacity:calc(var(--p,1) * 1.4 - .4);transform:translateY(calc((1 - var(--p,1)) * 80px)) rotateY(calc((1 - var(--p,1)) * var(--dir,0) * -34deg)) rotateX(calc((1 - var(--p,1)) * 14deg))}
html.fx [data-fx=flip] .crew-photo img{clip-path:inset(calc((1 - var(--p,1)) * 100%) 0 0 0)}
html.fx [data-fx=flip] .crew-bar{width:calc(var(--p,1) * 56%)}
html.fx [data-fx=flip]:hover .crew-bar{width:100%}

/* ── 7 · EQUIPE → FONTES : linhas da tabela em cascata ───────── */
html.fx [data-fx-once]{transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),translate .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
html.fx [data-fx-once=row]:not(.fx-in){opacity:0;translate:-28px 0}

/* ── 8 · FONTES → FOOTER : marca se condensa + carimbo ───────── */
html.fx [data-fx=track]{display:inline-block;letter-spacing:calc(.02em + (1 - var(--p,1)) * .7em);opacity:calc(.15 + var(--p,1) * .85)}
html.fx [data-fx-once=stamp]{position:relative}
html.fx [data-fx-once=stamp]:not(.fx-in){opacity:0}
html.fx [data-fx-once=stamp].fx-in{animation:fx-stamp .6s cubic-bezier(.3,1.5,.5,1) both}
html.fx [data-fx-once=stamp].fx-in::after{content:"";position:absolute;inset:-2px;border:2px solid #E8643F;pointer-events:none;animation:fx-ring .9s .18s ease-out both}
@keyframes fx-stamp{0%{opacity:0;scale:2.4;rotate:-14deg;filter:blur(6px)}55%{opacity:1;scale:.94;rotate:2deg;filter:none}100%{opacity:1;scale:1;rotate:0deg}}
@keyframes fx-ring{from{opacity:.9;scale:1}to{opacity:0;scale:1.5 1.9}}

/* ── barra de progresso + trilho de seções ──────────────────── */
.fx-progress{position:fixed;left:0;top:0;z-index:300;width:100%;height:2px;pointer-events:none;transform-origin:0 50%;scale:var(--fx-scroll,0) 1;background:linear-gradient(90deg,#C4401F,#E8643F 60%,#F2B33D);box-shadow:0 0 10px rgba(232,100,63,.6)}
.fx-rail{position:fixed;left:22px;top:50%;z-index:150;display:flex;flex-direction:column;gap:6px;opacity:0;translate:-14px -50%;pointer-events:none;transition:opacity .45s,translate .45s}
.fx-rail.show{opacity:1;translate:0 -50%;pointer-events:auto}
.fx-rail a{position:relative;display:flex;align-items:center;gap:10px;min-height:28px;text-decoration:none;font:500 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.14em;color:#6b6b73;transition:color .25s}
.fx-rail i{display:block;width:12px;height:1px;background:currentColor;transition:width .35s cubic-bezier(.2,.7,.2,1),background .25s}
.fx-rail em{position:absolute;left:58px;top:50%;translate:-6px -50%;font-style:normal;text-transform:uppercase;white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis;padding:6px 9px;color:#e2e2e6;background:rgba(10,10,11,.88);border:1px solid #3a3a42;opacity:0;pointer-events:none;transition:opacity .25s,translate .25s}
.fx-rail a:hover,.fx-rail a:focus-visible{color:#e2e2e6}
.fx-rail a:hover em,.fx-rail a:focus-visible em{opacity:1;translate:0 -50%}
.fx-rail a.on{color:#E8643F}
.fx-rail a.on i{width:30px;background:#E8643F;box-shadow:0 0 8px rgba(232,100,63,.7)}
.fx-rail a:focus-visible{outline:2px solid #c8c8d0;outline-offset:3px}
@media (max-width:1359px){.fx-rail{display:none}}

/* ── mobile : pin mais curto, deslocamentos menores ─────────── */
@media (max-width:720px){
  html.fx{--pin:50svh}
  html.fx #top .hero-copy{translate:0 calc(var(--hero-out,0) * -90px)}
  html.fx [data-fx=slide-l]{translate:calc((1 - var(--p,1)) * -36px) 0}
  html.fx [data-fx=slide-r]{translate:calc((1 - var(--p,1)) * 36px) 0}
  html.fx [data-fx=tilt]{translate:0 calc((1 - var(--p,1)) * 60px);rotate:x calc((1 - var(--p,1)) * 28deg)}
  html.fx [data-fx=flip]{transform:translateY(calc((1 - var(--p,1)) * 56px)) rotateX(calc((1 - var(--p,1)) * 14deg))}
}

/* reduced-motion: sem barra nem trilho; efeitos só existem com html.fx */
html:not(.fx) .fx-progress,html:not(.fx) .fx-rail{display:none}