/* efeitos · as cinco camadas da cena de referência, documentadas como recurso
   auxiliar. Cada uma tem lugar definido e nenhuma se acumula com outra. */

/* ---- 1 · salão escuro: a grade estrutural ----
   Não é decoração: é a grade de 8px tornada visível. Usar só em palco de
   demonstração e abertura, nunca atrás de texto corrido. */
.fx-grid{background-image:
  linear-gradient(var(--data-grid) 1px,transparent 1px),
  linear-gradient(90deg,var(--data-grid) 1px,transparent 1px);
  background-size:var(--s-2) var(--s-2)}

/* ---- 2 · tubo de neon: moldura lateral ---- */
.fx-beams{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:var(--z-base)}
.beam{position:absolute; top:12%; width:3px; height:76%; border-radius:3px; opacity:.72;
  background:linear-gradient(180deg,transparent,var(--c,var(--accent)) 26%,
    var(--c,var(--accent)) 74%,transparent)}
.beam::after{content:""; position:absolute; inset:-2px -34px; filter:blur(26px); opacity:.42;
  background:linear-gradient(180deg,transparent,var(--c,var(--accent)),transparent)}
.beam--hot{--c:var(--accent-hot)}
.beam--cool{--c:var(--accent)}
.beam--deep{--c:var(--ro-300)}
.beam--good{--c:var(--accent-good)}

/* ---- 3 · halo: massa de cor atrás do assunto ---- */
.fx-halo{position:absolute; border-radius:50%; filter:blur(72px); pointer-events:none;
  z-index:var(--z-base)}
.fx-halo--hot{background:rgba(211,32,100,.16)}
.fx-halo--cool{background:rgba(21,171,216,.14)}
.fx-halo--deep{background:rgba(95,44,132,.20)}

/* ---- 4 · vidro: camada flutuante sobre conteúdo ---- */
.fx-glass{background:var(--surface);
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border-strong)}

/* ---- 5 · chão molhado: reflexo que ancora a cena ---- */
.fx-floor{position:absolute; inset:auto 0 0 0; height:40%; pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--bg-sunk) 78%)}
.fx-floor::before{content:""; position:absolute; inset:auto 0 0 0; height:70%;
  background:var(--grad-brand); opacity:.10; filter:blur(38px)}

/* ---- ponto quente: marca um detalhe dentro de uma imagem ---- */
.hotspot{position:absolute; transform:translate(-50%,-50%); width:22px; height:22px;
  border-radius:50%; display:grid; place-items:center; z-index:var(--z-raised)}
.hotspot::before{content:""; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--accent); opacity:.5; animation:ping 2.8s var(--ease) infinite}
.hotspot i{width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px var(--bg-sunk)}

/* ---- filme preso ao scroll ----
   Arquitetura de seção alta com palco fixo. Documentada em Movimento. */
.film{position:relative; height:320vh; background:var(--bg-sunk)}
.film .pin{position:sticky; top:var(--topbar); height:calc(100svh - var(--topbar));
  overflow:clip; display:grid; place-items:center}
.film canvas{position:absolute; inset:0; width:100%; height:100%}
.film .beat{position:absolute; left:var(--gutter); bottom:14vh; max-width:34ch; z-index:4;
  opacity:0; transform:translateY(20px);
  transition:opacity var(--t-scene) var(--ease), transform var(--t-scene) var(--ease)}
.film .beat.on{opacity:1; transform:none}
.film .hud{position:absolute; right:var(--gutter); bottom:var(--s-7); z-index:4; text-align:right;
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.18em;
  color:var(--text-weak); line-height:1.9}
.film .hud b{display:block; font-family:var(--font-display); font-weight:var(--fw-air);
  font-size:30px; letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums}
.film .track{position:absolute; left:var(--gutter); right:var(--gutter); bottom:var(--s-5);
  height:1.5px; background:var(--border-strong); z-index:4}
.film .track i{display:block; height:100%; width:0; background:var(--grad-cool)}
/* queda limpa: sem JS, em tela pequena ou com movimento reduzido vira pilha */
.film.flat{height:auto}
.film.flat .pin{position:static; height:auto; display:block; padding-block:var(--s-7)}
.film.flat canvas,.film.flat .hud,.film.flat .track{display:none}
.film.flat .beat{position:static; opacity:1; transform:none; max-width:none}
@media (max-width:900px){ .film{height:240vh} .film .hud b{font-size:22px} }
@media (prefers-reduced-motion:reduce){ .film{height:auto} .film .pin{position:static; height:auto} }

/* ===================================================================
   v3 · vocabulário narrativo.
   Estas peças existem para colocar informação POR CIMA do efeito.
   Efeito sem número é publicidade; efeito com número é engenharia.
   =================================================================== */

/* ---- texto que acende palavra por palavra ---- */
[data-reveal]{color:var(--text-weak); transition:color var(--t-base)}
[data-reveal] .w{color:var(--text-weak); transition:color 320ms var(--ease)}
[data-reveal] .w.on{color:var(--text)}
[data-reveal].lit,[data-reveal].lit .w{color:var(--text)}
[data-reveal] em{font-style:italic; font-family:Georgia,"Times New Roman",serif}

/* ---- moldura de canto · enquadra um título sem desenhar caixa ---- */
.frame{position:relative; padding:var(--s-6) var(--s-5)}
.frame::before,.frame::after{content:""; position:absolute; width:22px; height:22px;
  border:0 solid var(--accent); pointer-events:none}
.frame::before{left:0; top:0; border-left-width:1px; border-top-width:1px}
.frame::after{right:0; bottom:0; border-right-width:1px; border-bottom-width:1px}

/* ---- cartão de especificação flutuante · sobre mídia ---- */
.spec-card{position:absolute; z-index:var(--z-raised); min-width:168px; max-width:230px;
  padding:var(--s-3) var(--s-4); border-radius:var(--r-md);
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 76%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border-strong)}
.spec-card .k{display:block; font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--accent); margin-bottom:5px}
.spec-card .v{display:block; font-family:var(--font-mono); font-size:17px;
  font-variant-numeric:tabular-nums; color:var(--text); letter-spacing:-.01em}
.spec-card .d{display:block; font-size:var(--fs-xs); color:var(--text-3);
  line-height:1.45; margin-top:5px}

/* ---- selo circular girando ---- */
.seal{width:92px; height:92px; position:relative; flex:none}
.seal svg{width:100%; height:100%; animation:spin 22s linear infinite}
.seal text{font-family:var(--font-mono); font-size:9.2px; letter-spacing:.26em;
  text-transform:uppercase; fill:var(--text-3)}
.seal i{position:absolute; inset:0; display:grid; place-items:center}
.seal i svg{width:20px; height:auto; animation:none}

/* ---- palavra que atravessa a fronteira ---- */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border)}
.split-a{background:var(--bg-sunk); min-height:200px}
.split-b{background:var(--grad-brand); min-height:200px}
.split-word{position:absolute; left:var(--s-5); top:50%; transform:translateY(-50%);
  font-family:var(--font-display); font-weight:var(--fw-air);
  font-size:clamp(44px,8vw,96px); letter-spacing:var(--tr-hero); line-height:1;
  white-space:nowrap; z-index:2; color:var(--text); pointer-events:none}
/* a cópia recortada ao lado direito é a mesma palavra, outra cor */
.split-word span{position:absolute; left:0; top:0; color:var(--bg-sunk);
  clip-path:inset(0 0 0 50%)}

/* ---- palco do símbolo que desmonta ---- */
.explode{position:relative; width:100%; border:1px solid var(--border);
  border-radius:var(--r-lg); background:var(--bg-sunk); overflow:hidden;
  aspect-ratio:16/10; min-height:280px}
@media (max-width:600px){ .explode{aspect-ratio:4/3; min-height:0} }
.explode canvas{position:absolute; inset:0; width:100%; height:100%; cursor:grab;
  touch-action:pan-y}
.explode[data-grabbing="1"] canvas{cursor:grabbing}
.explode-rail{position:absolute; left:var(--s-4); right:var(--s-4); bottom:var(--s-4);
  display:flex; align-items:center; gap:var(--s-3); z-index:2; flex-wrap:wrap}
.explode-hint{display:inline-flex; align-items:center; gap:var(--s-3);
  padding:7px var(--s-4); border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border-strong);
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-3)}
.explode-hint b{color:var(--text); font-weight:var(--fw-book)}
.explode-track{flex:1; min-width:80px; height:1.5px; background:var(--border-strong)}
.explode-track i{display:block; height:100%; width:0; background:var(--grad-cool)}
.explode-legend{position:absolute; right:var(--s-4); top:var(--s-4); z-index:2;
  display:grid; gap:6px; text-align:right}
.explode-legend span{font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:.1em; color:var(--text-3); display:flex; align-items:center;
  gap:7px; justify-content:flex-end}
.explode-legend i{width:8px; height:8px; border-radius:2px; flex:none}

/* ---- palco do símbolo em três dimensões ----
   Mesma casca do palco 2D. A diferença está no que ele carrega dentro:
   quatro placas com espessura, luz de duas fontes e aresta interna visível. */
.explode3d{position:relative; width:100%; border:1px solid var(--border);
  border-radius:var(--r-lg); background:var(--bg-sunk); overflow:hidden;
  aspect-ratio:16/10; min-height:280px}
.explode3d canvas{display:block; width:100%; height:100%}
.explode3d .fx-beams{z-index:0}
.explode3d > canvas{position:relative; z-index:1}
.explode3d .explode-rail,.explode3d .explode-legend{z-index:2}
.sem3d{display:grid; place-items:center; padding:var(--s-7) var(--s-5); text-align:center;
  gap:var(--s-3)}
@media (max-width:600px){ .explode3d{aspect-ratio:4/3; min-height:0} }

/* ===================================================================
   v4 · VIDRO E DECORATIVO
   As cinco camadas da cena, acima, dão atmosfera a um palco. Estas dão
   atmosfera a uma PÁGINA: são mais fracas de propósito, porque vão
   ficar atrás de texto que precisa continuar legível.

   Regra de teto: no máximo dois destes efeitos por seção. Três viram
   nevoeiro e o contraste do corpo cai abaixo do mínimo.
   =================================================================== */

/* ---- painel de vidro ----
   Três coisas ao mesmo tempo: desfoque do que está atrás, véu branco
   fraquíssimo, e um brilho só na borda de cima. O brilho interno é o
   que separa vidro de "caixa semitransparente". */
.vidro{position:relative; border-radius:var(--r-cartao);
  background:rgba(243,245,250,.035);
  backdrop-filter:blur(var(--blur-vidro)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--blur-vidro)) saturate(140%);
  border:1px solid var(--border-strong);
  box-shadow:inset 0 1px 0 rgba(243,245,250,.10), var(--e-2)}
.vidro--forte{backdrop-filter:blur(var(--blur-vidro-forte)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur-vidro-forte)) saturate(150%);
  background:rgba(243,245,250,.055)}
/* sem suporte a backdrop-filter o vidro vira superfície sólida: melhor
   um painel opaco do que um painel ilegível */
@supports not (backdrop-filter:blur(1px)){
  .vidro,.vidro--forte{background:var(--surface-raised)}
}

/* ---- filete de topo ----
   A linha de 1px que abre uma seção ou um cartão. Acende no meio e
   some nas pontas, então não desenha uma caixa. */
.filete{position:relative}
.filete::before{content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--grad-filete)}

/* ---- halo ambiente ----
   Massa de cor fora de foco atrás do conteúdo. O desfoque é grande de
   propósito: abaixo de 120px a mancha ganha borda e vira forma.
   'screen' faz dois halos somarem luz em vez de empastarem. */
.halo{position:absolute; pointer-events:none; z-index:var(--z-base);
  width:46vw; max-width:620px; aspect-ratio:1; border-radius:50%;
  filter:blur(var(--blur-halo)); mix-blend-mode:screen; opacity:.9}
.halo--hot{background:var(--halo-hot)}
.halo--cool{background:var(--halo-cool)}
.halo--deep{background:var(--halo-deep)}
.halo--good{background:var(--halo-good)}

/* ---- grade de fundo ----
   A mesma grade de 8px do sistema, em módulo de 64px e opacidade
   mínima. Diferente de .fx-grid: esta pode ficar atrás de texto,
   porque está quatro vezes mais fraca. Desaparece nas bordas. */
.grade{position:absolute; inset:0; pointer-events:none; z-index:var(--z-base);
  background-image:
    linear-gradient(rgba(243,245,250,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(243,245,250,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 78%)}

/* ---- cena ----
   O recipiente que posiciona halo e grade sem deixar nada vazar.
   Todo conteúdo dentro dele sobe para a camada acima. */
.cena{position:relative; overflow:hidden; isolation:isolate}
.cena > *:not(.halo):not(.grade){position:relative; z-index:var(--z-raised)}

/* ---- anel de foco em vidro ----
   Para peça translúcida, onde a sombra de foco padrão some. */
.vidro:focus-within{border-color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(243,245,250,.10), 0 0 0 3px var(--accent-ring)}