/* =====================================================================
   UHOST — CAMADA FX (GSAP + ScrollTrigger). Par de assets/js/uh-fx.js.
   2026-10-01. Atmosfera gerada por código (nada de imagem): gradiente
   animado, grade em perspectiva com linhas luminosas, partículas em
   profundidade, formas geométricas que se transformam, seções presas
   ao scroll (pin) e revelações conduzidas pela rolagem.

   REGRAS (as mesmas lições do uh-motion, que continua valendo):
   · Tudo aqui só vale sob `html.fx`, classe que o próprio uh-fx.js põe.
     Sem JS, com "reduzir movimento" ou com o CMS em modo Editar sem os
     efeitos, a página é EXATAMENTE a de antes.
   · O FX só mexe em `transform` de elementos que ELE criou (.fx-*). Nos
     elementos do site, que já têm transform do `.rv`, do parallax e das
     cenas, ele usa propriedades independentes (`rotate:`/`scale:`),
     `clip-path` ou variáveis CSS — nunca `transform:`, que perderia a
     disputa e ficaria mudo, sem erro nenhum.
   · Camadas decorativas: aria-hidden, pointer-events:none, z-index 0.
   ===================================================================== */

:root{
  --fx-ouro: 250,198,67;          /* o dourado da marca em R,G,B para rgba() */
  --fx-ambar: 255,150,46;
  --fx-frio: 120,128,168;          /* contraponto frio, sempre discreto */
  --fx-int: 1;                     /* intensidade geral (o tema claro baixa) */
  --fx-fundo: #1C1D21;
}
html[data-tema="claro"]{
  --fx-ouro: 196,138,12;
  --fx-ambar: 214,120,30;
  --fx-frio: 92,100,140;
  --fx-int: .62;
  --fx-fundo: #F5F6F8;
}


/* ---------- ATMOSFERA (hero, CTA final) ---------- */
html.fx .fx-host{ position:relative; isolation:isolate; }
html.fx .fx-atmo{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  contain:strict;
}
/* o conteúdo do hero/cta fica acima da atmosfera */
html.fx .fx-host > :not(.fx-atmo):not(.fx-borda):not(.uh-orb){ position:relative; z-index:1; }
/* os orbes antigos do hero dão lugar à aurora (a aurora faz o mesmo papel, maior) */
html.fx .fx-host > .uh-orb{ display:none; }

/* aurora: três manchas de luz que derivam devagar + um véu cônico girando */
.fx-aurora{ position:absolute; inset:-20% -10%; }
.fx-blob{
  position:absolute; display:block; border-radius:50%;
  width:var(--fx-w,46vw); height:var(--fx-w,46vw); max-width:820px; max-height:820px;
  background:radial-gradient(closest-side, rgba(var(--fx-c),calc(.30 * var(--fx-int))), rgba(var(--fx-c),calc(.10 * var(--fx-int))) 45%, transparent 72%);
  will-change:transform;
}
.fx-blob--1{ --fx-c:var(--fx-ouro);  --fx-w:52vw; top:-6%;  right:-4%; }
.fx-blob--2{ --fx-c:var(--fx-ambar); --fx-w:38vw; bottom:4%; left:-6%; }
.fx-blob--3{ --fx-c:var(--fx-frio);  --fx-w:34vw; top:30%;  left:38%; opacity:.55; }
/* 🚨 o véu GIRA por transform (só composição na GPU). A 1ª versão animava o
   ângulo do conic-gradient por @property: isso REPINTA a camada inteira a cada
   quadro — medido no desktop: p95 de 33 ms e quadros de 50 ms; girando por
   transform, 60 fps cravados (p95 17,6 ms). */
.fx-veu{
  position:absolute; left:50%; top:50%; width:240vmax; height:240vmax; translate:-50% -50%;
  background:conic-gradient(from 0deg at 50% 50%,
    transparent 0deg, rgba(var(--fx-ouro),calc(.07 * var(--fx-int))) 40deg, transparent 95deg,
    transparent 180deg, rgba(var(--fx-ambar),calc(.05 * var(--fx-int))) 230deg, transparent 290deg);
  animation:fx-roda 26s linear infinite; will-change:transform;
}
@keyframes fx-roda{ to{ transform:rotate(360deg); } }

/* canvas: grade em perspectiva, pulsos de luz, partículas, ondas, anéis */
.fx-cv{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* forma geométrica (superfórmula) — SVG de linhas finas */
.fx-forma{
  position:absolute; width:var(--fx-fs,560px); height:var(--fx-fs,560px);
  left:var(--fx-fx,70%); top:var(--fx-fy,46%); margin:calc(var(--fx-fs,560px) / -2) 0 0 calc(var(--fx-fs,560px) / -2);
  overflow:visible; will-change:transform;
}
.fx-forma path{ fill:none; stroke:rgb(var(--fx-ouro)); vector-effect:non-scaling-stroke; }

/* esmaecimento nas bordas: a atmosfera nunca "corta" seca contra a seção vizinha */
.fx-atmo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 72%, var(--fx-fundo) 100%);
}
.fx-host--cta .fx-atmo::after{ display:none; }

/* ---------- HERO EM CORTINA (home): o conteúdo seguinte passa POR CIMA ---------- */
html.fx .fx-sobre{ position:relative; z-index:3; }
html.fx .fx-sobre--fundo{ background-color:var(--uh-bg); }
/* cortina passada: o hero continua preso (soltar contava como salto de layout) e só some por opacidade */
html.fx .uh-hero.fx-cortina-fora{ opacity:0; pointer-events:none; }

/* ---------- CTA FINAL: cartão com borda de luz girando ---------- */
html.fx .fx-host--cta{ overflow:hidden; }
.fx-borda{
  position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:2; pointer-events:none; overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:calc(.9 * var(--fx-int));
}
/* a luz que corre a borda: um disco cônico estático GIRANDO por transform (ver o véu) */
.fx-borda > i{
  position:absolute; left:50%; top:50%; width:max(140%, 900px); aspect-ratio:1; translate:-50% -50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(var(--fx-ouro),.9) 30deg, transparent 80deg, transparent 180deg, rgba(var(--fx-ambar),.6) 215deg, transparent 260deg);
  animation:fx-roda 7s linear infinite; will-change:transform;
}

/* ---------- TRILHA LUMINOSA (passos com fio que acende) ---------- */
html.fx .fx-trilha{ position:relative; }
.fx-trilha__svg{ position:absolute; left:0; top:0; overflow:visible; pointer-events:none; z-index:0; }
.fx-trilha__base{ fill:none; stroke:rgba(var(--fx-ouro),.16); stroke-width:2; }
.fx-trilha__luz{ fill:none; stroke:rgb(var(--fx-ouro)); stroke-width:2; stroke-linecap:round; }
.fx-trilha__halo{ fill:none; stroke:rgba(var(--fx-ouro),.28); stroke-width:9; stroke-linecap:round; }
.fx-trilha__ponta{ fill:#fff; }
.fx-trilha__ponta-halo{ fill:rgba(var(--fx-ouro),.35); }
html[data-tema="claro"] .fx-trilha__ponta{ fill:rgb(var(--fx-ouro)); }
/* rotulos da camada FX no tema claro: o cinza #9C9DA6 (feito para o fundo escuro) dava 2,49:1 no #F5F6F8 */
html[data-tema="claro"] .fx-contador,
html[data-tema="claro"] .fx-onda-rot span{ color:#6B6C76; }
/* o fio estático do CSS some: quem desenha agora é o SVG */
html.fx .fx-trilha .uh-trilha__p::after{ opacity:0; }
/* o ponto acende quando a luz chega nele */
html.fx .fx-trilha .uh-trilha__n{ transition:box-shadow .45s, background-color .45s, color .45s; background:var(--surface-card-alt, #33343F); color:var(--uh-gold); box-shadow:inset 0 0 0 2px rgba(var(--fx-ouro),.45); }
html.fx .fx-trilha li.fx-aceso .uh-trilha__n{ background:var(--uh-gold-fill, var(--uh-gold)); color:var(--uh-on-gold, #111); box-shadow:0 0 0 6px rgba(var(--fx-ouro),.16), 0 0 26px rgba(var(--fx-ouro),.55); }
html.fx .fx-trilha li > b, html.fx .fx-trilha li > span:not(.uh-trilha__p){ transition:opacity .45s; }
html.fx .fx-trilha.fx-armado li:not(.fx-aceso) > b,
html.fx .fx-trilha.fx-armado li:not(.fx-aceso) > span:not(.uh-trilha__p){ opacity:.42; }
/* contador "01 / 03" que acompanha a seção presa */
.fx-contador{
  display:flex; align-items:center; justify-content:center; gap:14px; margin-top:28px;
  font-family:var(--font-display); font-size:13px; letter-spacing:.14em; color:var(--text-dim, #9C9DA6);
}
.fx-contador b{ color:var(--uh-gold); font-weight:700; }
.fx-contador i{ display:block; width:120px; height:2px; background:rgba(var(--fx-ouro),.18); position:relative; overflow:hidden; border-radius:2px; }
.fx-contador i::after{ content:""; position:absolute; inset:0; background:var(--uh-gold); transform-origin:0 50%; transform:scaleX(var(--fx-t,0)); }

/* ---------- NÚCLEO DA CENA "RÁDIO COMPLETA" (forma que vira cada peça) ---------- */
.fx-nucleo{
  position:absolute; left:50%; top:50%; width:min(560px, 92%); aspect-ratio:1; translate:-50% -50%;
  pointer-events:none; z-index:0; overflow:visible;
}
.fx-nucleo path{ fill:none; stroke:rgb(var(--fx-ouro)); vector-effect:non-scaling-stroke; }
.fx-nucleo circle{ fill:none; stroke:rgb(var(--fx-ouro)); vector-effect:non-scaling-stroke; }
html.fx .uh-mont__peca{ z-index:1; }

/* ---------- KBPS: a onda que ganha definição ---------- */
.uh-kbps__painel .fx-onda{ margin:16px 0 18px; height:60px; }
.fx-onda{ display:block; width:100%; height:96px; margin:0 0 20px; border-radius:14px;
  background:linear-gradient(180deg, rgba(var(--fx-ouro),.05), transparent 70%);
  box-shadow:inset 0 0 0 1px rgba(var(--fx-ouro),.12); }
.fx-onda-rot{ display:flex; justify-content:space-between; gap:12px; margin:-12px 2px 0; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim, #9C9DA6); }
.fx-onda-rot b{ color:var(--uh-gold); font-weight:600; }

/* ---------- TEXTO QUE ACENDE LINHA A LINHA ---------- */
html.fx .fx-acende > *{ opacity:calc(.26 + .74 * var(--fx-luz, 1)); }
html.fx .fx-acende .uh-dor__n{ text-shadow:0 0 calc(18px * var(--fx-luz, 0)) rgba(var(--fx-ouro), calc(.55 * var(--fx-luz, 0))); }

/* ---------- ESPECTRO no card grande do bento ---------- */
html.fx .fx-viz-host{ position:relative; overflow:hidden; }
html.fx .fx-viz-host > :not(.fx-viz){ position:relative; z-index:1; }
.fx-viz{
  position:absolute; right:0; bottom:0; width:64%; height:56%; z-index:0; pointer-events:none;
  -webkit-mask:linear-gradient(to right, transparent, #000 38%); mask:linear-gradient(to right, transparent, #000 38%);
  opacity:.9;
}
@media (max-width:900px){ .fx-viz{ display:none; } }

/* ---------- REVELAÇÕES ---------- */
/* divisória acima do eyebrow: uma faísca corre o fio quando a seção chega */
html.fx .uh-head__div{ position:relative; overflow:visible; }
/* 🚨 a faísca e a varredura andam por TRANSFORM. A 1ª versão animava `left`:
   propriedade de layout = cada quadro contava como "layout shift" (CLS da home
   0,023 -> 0,068, medido). Por transform é só composição e o CLS não muda. */
html.fx .uh-head__div::after{
  content:""; position:absolute; top:-1px; left:0; width:100%; height:3px; border-radius:3px; opacity:0;
  background:linear-gradient(90deg, transparent 0 38%, rgba(var(--fx-ouro),.95) 50%, transparent 62% 100%);
  filter:drop-shadow(0 0 6px rgba(var(--fx-ouro),.7));
  transform:translateX(-62%);
}
html.fx .uh-head__div.fx-faisca::after{ animation:fx-faisca 1.6s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes fx-faisca{ 0%{ transform:translateX(-62%); opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ transform:translateX(50%); opacity:0; } }

/* faixa de números: grade fina + varredura de luz ao entrar */
html.fx .uh-stats{ position:relative; overflow:hidden; }
html.fx .uh-stats::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(var(--fx-ouro),.06) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--fx-ouro),.06) 1px, transparent 1px);
  background-size:44px 44px; background-position:center;
  -webkit-mask:radial-gradient(ellipse 70% 120% at 50% 50%, #000 30%, transparent 75%); mask:radial-gradient(ellipse 70% 120% at 50% 50%, #000 30%, transparent 75%);
}
html.fx .uh-stats::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:30%; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(var(--fx-ouro),calc(.16 * var(--fx-int))), transparent);
  transform:translateX(-100%);
}
html.fx .uh-stats.fx-varre::after{ animation:fx-varre 1.8s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes fx-varre{ to{ transform:translateX(334%); } }
html.fx .uh-stats > *{ position:relative; }

/* molduras (prints reais): abrem com máscara conduzida pelo scroll */
html.fx .fx-abre{ clip-path:inset(var(--fx-ci,0%) var(--fx-cx,0%) 0% var(--fx-cx,0%) round 16px); }

/* inclinação 3D conduzida pelo scroll (propriedades independentes, ver regras) */
html.fx .fx-tilt{ rotate:x var(--fx-rx,0deg); scale:var(--fx-sc,1); transform-origin:50% 100%; }
html.fx .fx-tilt-pai{ perspective:1400px; }

/* fundo das seções grandes: uma forma de linhas + uma mancha de luz, com parallax */
html.fx .fx-fundo-host{ position:relative; }
html.fx .fx-fundo-host > .uh-wrap{ position:relative; z-index:1; }
.fx-fundo{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; contain:paint; }
.fx-fundo .fx-blob{ --fx-w:40vw; opacity:.55; }
.fx-fundo .fx-forma{ --fx-fs:620px; opacity:.55; }
.fx-fundo .fx-forma path{ stroke-opacity:.5; }

@media (max-width:760px){
  .fx-forma{ --fx-fs:380px; }
  .fx-fundo .fx-forma{ --fx-fs:420px; opacity:.4; }
  .fx-blob{ --fx-w:90vw !important; }
  .fx-onda{ height:96px; }
}
@media (prefers-reduced-motion: reduce){
  .fx-veu, .fx-borda > i{ animation:none; }
}