/* =============================================================================
   MAIA — camada de atmosfera
   Bandas, motivos técnicos, revelações de scroll, parallax e luz.

   Regra que governa este arquivo (readme §11): "No `fade-up` on everything.
   That is the single biggest source of template-look." Por isso existem SEIS
   efeitos de revelação diferentes, distribuídos ao longo da página, e não um
   só aplicado em tudo.
   ============================================================================= */

/* =============================================================================
   1. BANDAS — alternância de fundo entre capítulos
   ============================================================================= */

/* Uma variação só, como pedido: fundo um tom acima do preto da página e
   hairlines TRACEJADAS finas em ciano em cima e embaixo. As páginas alternam
   banda sim / banda não, e uma seção cinematográfica fica sempre entre duas
   escuras para o contraste dela não competir com a banda vizinha. */
.section--band {
  /* O tom base é o token `--maia-bg-raised` (#0a0e16). Sozinho ele fica a três
     níveis do fundo da página (#070a10) — no monitor a diferença some, e era o
     que o dono do projeto via como "todas as seções com a mesma cor". A camada
     de cima é uma lavagem ciano de alfa muito baixo: levanta a banda o
     suficiente para ela ser legível como capítulo sem sair da paleta e sem
     redefinir o token. */
  background-color: var(--maia-bg-raised);
  background-image: linear-gradient(
    180deg,
    rgba(0, 212, 255, .045),
    rgba(0, 212, 255, .012) 42%,
    rgba(0, 212, 255, .012) 58%,
    rgba(0, 212, 255, .045));
  border-top: 1px dashed var(--maia-line);
  border-bottom: 1px dashed var(--maia-line);
}

/* O brilho de borda: a hairline tracejada ganha um halo muito baixo, para a
   separação existir sem virar uma régua corporativa. */
.section--band::after {
  content: ""; position: absolute; inset-inline: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, .22), transparent);
  pointer-events: none;
}


/* =============================================================================
   2. MOTIVOS TÉCNICOS — grade e pequenos detalhes
   ============================================================================= */

/* A grade de 40px é motivo TÉCNICO (readme §3): Platform, Developers, runtime.
   Nunca atrás de Universe, Founder, hero cinematográfico ou CTA final. */
.section--grid::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--bg-grid);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 78%);
}
.section--grid > * { position: relative; z-index: 1; }

/* Variante mais discreta, para seções onde a grade é textura e não estrutura. */
.section--grid-soft::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5; background: var(--bg-grid);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.section--grid-soft > * { position: relative; z-index: 1; }

/* ---------- pequenos assets de detalhe ------------------------------------- */

/* Camada de decoração de uma seção. Vem como PRIMEIRO filho para o conteúdo
   pintar por cima, não recebe eventos e não entra na árvore de acessibilidade.
   `overflow: clip` para que um anel grande na borda não crie scroll lateral. */
.section-decor {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: clip;
}

/* Cantos HUD: marcam um instrumento de verdade, não decoram (readme §3).
   Dois colchetes em L de 10px, em cantos opostos. */
.hud-corners { position: relative; }
.hud-corners::before,
.hud-corners::after {
  content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none;
  border-color: var(--maia-line-strong); border-style: solid;
}
.hud-corners::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.hud-corners::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

/* Marcadores soltos: um tique técnico, uma coordenada, um ponto de telemetria.
   São elementos DECORATIVOS e ficam fora da árvore de acessibilidade. */
.decor {
  position: absolute; pointer-events: none; z-index: 0;
  font-family: var(--font-mono); font-size: var(--text-mono-micro);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--text-label); opacity: .5;
}
.decor--tick {
  width: 1px; height: 56px;
  background: linear-gradient(180deg, var(--maia-line-strong), transparent);
}
.decor--rule {
  height: 1px; width: 120px;
  background: linear-gradient(90deg, var(--maia-line-strong), transparent);
}
.decor--dot {
  width: 5px; height: 5px; border-radius: var(--radius-round);
  background: var(--accent); box-shadow: 0 0 12px rgba(0, 212, 255, .7);
}
.decor--ring {
  width: 74px; height: 74px; border-radius: var(--radius-round);
  border: 1px dashed var(--maia-line); opacity: .35;
}
.decor--ring-lg { width: 190px; height: 190px; }
.decor--cross {
  width: 11px; height: 11px;
  background:
    linear-gradient(90deg, var(--maia-line-strong) 0 100%) center / 100% 1px no-repeat,
    linear-gradient(180deg, var(--maia-line-strong) 0 100%) center / 1px 100% no-repeat;
}
.decor--label { white-space: nowrap; }

/* Ancoragens. O recuo usa a mesma gutter do container para o detalhe cair na
   margem tipográfica da página, e não num lugar arbitrário. */
.decor--tl { top: var(--space-11); left: var(--space-8); }
.decor--tr { top: var(--space-11); right: var(--space-8); }
.decor--bl { bottom: var(--space-11); left: var(--space-8); }
.decor--br { bottom: var(--space-11); right: var(--space-8); }
.decor--ml { top: 44%; left: var(--space-6); }
.decor--mr { top: 36%; right: var(--space-6); }

/* Em telas estreitas o conteúdo ocupa a gutter inteira: manter os detalhes ali
   seria colocá-los debaixo do texto. Só sobrevivem os de topo e base. */
@media (max-width: 900px) {
  .decor--ml, .decor--mr, .decor--ring, .decor--ring-lg { display: none; }
}

/* Interferência: a luz pisca como um instrumento, não como um letreiro.
   Ciclo longo e assimétrico — o olho não deve pegar o compasso. */
@keyframes maia-flicker {
  0%, 41%, 43%, 46%, 100% { opacity: var(--flicker-high, .55); }
  42%, 44% { opacity: var(--flicker-low, .12); }
  70% { opacity: var(--flicker-high, .55); }
  71% { opacity: var(--flicker-low, .12); }
  72% { opacity: var(--flicker-high, .55); }
}
.decor--flicker { animation: maia-flicker 7.3s steps(1, end) infinite; }

/* Deriva ambiente: movimento lento e contínuo, sem quicar (readme §3). */
@keyframes maia-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -14px, 0); }
}
.decor--drift { animation: maia-drift 9s ease-in-out infinite alternate; }

/* Varredura: uma faixa de luz atravessando devagar uma superfície técnica. */
@keyframes maia-sweep {
  from { transform: translateX(-60%) skewX(-12deg); }
  to   { transform: translateX(260%) skewX(-12deg); }
}
.decor--sweep {
  top: 0; bottom: 0; width: 22%;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, .05), transparent);
  animation: maia-sweep 11s linear infinite;
}


/* =============================================================================
   2a. FORMAS FLUTUANTES — geometria que respira
   ============================================================================= */

/* A camada ocupa a seção inteira e não recebe nada: nem clique, nem foco, nem
   leitor de tela. `overflow: clip` para que uma forma na borda não alargue o
   documento. */
.float-field {
  position: absolute; inset: 0;
  pointer-events: none; overflow: clip;
}

/* Os dois planos. O de trás fica sob o conteúdo; o da frente passa SOBRE ele —
   e é por isso que as formas da frente pousam nas bordas da seção, onde não há
   texto para encobrir. */
/* Dupla classe de propósito: `.section--grid > *` e `.section--grid-soft > *`
   empurram TODO filho direto da seção para `z-index: 1`, e com especificidade
   igual quem vence é quem vem depois na folha — sections.css. Com duas classes
   o plano da frente continua na frente também nas seções com grade. */
.float-field.float-field--back  { z-index: 0; }
.float-field.float-field--front { z-index: 3; }

/* Elemento de FORA: só o deslocamento de parallax
   (`--parallax-y`, `--mouse-x/y`, escritos por atmosphere.js). */
.float-shape { position: absolute; will-change: transform; }

/* Elemento de DENTRO: a vida própria — flutuar, girar devagar e mudar de forma.
   Separar as duas camadas é o que permite as duas coisas ao mesmo tempo. */
.float-shape__body {
  display: block; width: 100%; height: 100%;
  animation:
    maia-morph var(--morph-dur, 19s) ease-in-out infinite,
    maia-bob   var(--bob-dur, 11s)   ease-in-out infinite alternate,
    maia-turn  var(--turn-dur, 47s)  linear infinite;
  animation-delay: var(--shape-delay, 0s), var(--shape-delay, 0s), 0s;
}

/*
 * O ciclo da forma.
 *
 * 0% e 100% — raios desiguais nos dois eixos: orgânico, célula, algo vivo.
 * 34%       — quase um retângulo de canto curto: técnico, componente, peça.
 * 67%       — orgânico de novo, mas com a assimetria em outro lugar, para o
 *             olho não reconhecer o compasso.
 */
@keyframes maia-morph {
  0%,
  100% { border-radius: 38% 62% 55% 45% / 45% 38% 62% 55%; }
  34%  { border-radius: 14% 14% 14% 14% / 14% 14% 14% 14%; }
  67%  { border-radius: 66% 34% 40% 60% / 58% 66% 34% 42%; }
}

/* Flutuação: curta, lenta e sem quicar. */
@keyframes maia-bob {
  from { translate: 0 0; }
  to   { translate: 0 -26px; }
}

/* Giro: tão devagar que não se percebe olhando, só comparando. */
@keyframes maia-turn {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

/* ---------- corpos do plano de TRÁS ---------------------------------------- */

/* Anel: só contorno. É o registro mais técnico dos quatro. */
.float-shape__body--ring {
  border: 1px solid var(--maia-line);
  box-shadow: inset 0 0 40px rgba(0, 212, 255, .05);
}

/* Massa: um gradiente muito baixo, quase névoa. O registro biológico. */
.float-shape__body--fill {
  background:
    radial-gradient(circle at 34% 30%, rgba(0, 212, 255, .10), transparent 62%),
    radial-gradient(circle at 72% 76%, rgba(124, 77, 255, .08), transparent 66%);
  border: 1px solid var(--maia-line-faint);
}

/* Grade recortada pela forma: a peça onde os dois registros se encontram. */
.float-shape__body--grid {
  background: var(--bg-grid);
  opacity: .45;
  border: 1px dashed var(--maia-line-faint);
}

/* Vazado: dois contornos concêntricos, como uma peça vista de frente. */
.float-shape__body--hollow {
  border: 1px solid var(--maia-line-faint);
  box-shadow: inset 0 0 0 14px rgba(0, 212, 255, .035);
}

/* ---------- corpos do plano da FRENTE --------------------------------------- */

/*
 * ESCURO, como o dono do projeto pediu. Uma silhueta quase opaca lida como algo
 * ENTRE o olho e a cena — e é isso, mais que o tamanho, que coloca a forma na
 * frente. O desfoque leve reforça: o que passa perto da câmera sai de foco.
 */
/* Correção do dono do projeto (2026-09-18): "mais escuros à medida que estão
   mais à frente, mas NUNCA mais escuros que o background". A versão anterior
   usava rgba(4,6,11) — mais escuro que o próprio fundo — e sobre uma seção
   preta a forma virava um buraco. Agora a frente é a mais escura das camadas
   mas ainda ACIMA do fundo (#0e1622 sobre #05070c…#0a0e16), com um contorno de
   luz para existir também nas seções escuras. */
.float-shape__body--dark {
  background: rgba(14, 22, 34, .84);
  border: 1px solid rgba(0, 212, 255, .2);
  box-shadow: 0 0 36px rgba(0, 212, 255, .05);
  filter: blur(.8px);
}
.float-shape__body--edge {
  background: rgba(12, 19, 30, .78);
  border-color: rgba(0, 212, 255, .14);
  box-shadow: inset 0 0 60px rgba(0, 212, 255, .04);
}

/* ---------- onde cada uma pousa -------------------------------------------- */

.float-shape--a { width: 240px; height: 240px; top: 8%;  left: -60px;  --shape-delay: 0s; }
.float-shape--b { width: 170px; height: 170px; top: 58%; right: 4%;    --shape-delay: -6s; --morph-dur: 23s; }
.float-shape--c { width: 120px; height: 120px; top: 34%; right: 22%;   --shape-delay: -12s; --morph-dur: 16s; --bob-dur: 8s; }
.float-shape--d { width: 200px; height: 200px; top: 74%; left: 18%;    --shape-delay: -3s; --morph-dur: 27s; --bob-dur: 14s; }

/* As da frente ficam nas BORDAS, FORA da coluna de conteúdo.
 *
 * Elas passam por cima de tudo, então a posição não é estética: em 1440 a
 * coluna `u-wide` vai de 112px a 1328px, e o corpo da forma precisa terminar
 * antes disso de um lado e começar depois do outro. Com 140px de recuo a forma
 * da direita entrava 8px na coluna e apagava a última letra de um nó do
 * diagrama de H05.
 *
 * Boa parte do corpo fica fora do quadro de propósito — é o corte pela borda
 * que faz a forma parecer grande e perto. */
.float-shape--e { width: 340px; height: 340px; top: 18%; left: -240px;  --shape-delay: -9s; --morph-dur: 31s; --bob-dur: 13s; }
.float-shape--f { width: 260px; height: 260px; top: 62%; right: -190px; --shape-delay: -17s; --morph-dur: 21s; --bob-dur: 9s; }

/* Três arranjos, para capítulos vizinhos nunca mostrarem o mesmo desenho. */
[data-float-field="b"] .float-shape--a { top: 52%; left: auto; right: -70px; width: 280px; height: 280px; }
[data-float-field="b"] .float-shape--b { top: 10%; right: auto; left: 8%; }
[data-float-field="b"] .float-shape--c { top: 70%; right: auto; left: 34%; }
[data-float-field="b"] .float-shape--d { top: 28%; left: auto; right: 26%; }
[data-float-field="b"] .float-shape--e { top: 56%; left: auto; right: -250px; }
[data-float-field="b"] .float-shape--f { top: 12%; right: auto; left: -170px; }

[data-float-field="c"] .float-shape--a { top: 62%; left: 6%; width: 190px; height: 190px; }
[data-float-field="c"] .float-shape--b { top: 6%;  right: 14%; width: 210px; height: 210px; }
[data-float-field="c"] .float-shape--c { top: 40%; right: auto; left: 46%; }
[data-float-field="c"] .float-shape--d { top: 84%; left: auto; right: 8%; width: 150px; height: 150px; }
[data-float-field="c"] .float-shape--e { top: 4%;  left: -290px; width: 380px; height: 380px; }
[data-float-field="c"] .float-shape--f { top: 70%; right: -190px; }

/* Em telas estreitas sobram DUAS: uma de cada plano. Seis num celular viram
   sujeira atrás do texto, e o custo de animar some junto. */
@media (max-width: 900px) {
  .float-shape--b, .float-shape--c, .float-shape--d, .float-shape--f { display: none; }
  .float-shape--a { width: 150px; height: 150px; opacity: .7; }
  .float-shape--e { width: 210px; height: 210px; left: -150px; }
}


/* =============================================================================
   2b. CAMPO DE LUZ DO HERO — para heroes que já têm um motion como protagonista
   ============================================================================= */

/* Um hero com diagrama vivo não leva foto de fundo: a arte disputaria com o
   movimento e o resultado é o que se via em Platform, com o system map lutando
   contra o laboratório. No lugar entram LUZ e GRADE — o mesmo vocabulário
   técnico do diagrama, sem competir com ele. */
.hero__glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  overflow: clip;
}

/* Camada A — dois halos que respiram fora de compasso um com o outro. */
.hero__glow::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 38% 46% at 74% 38%, rgba(0, 212, 255, .17), transparent 68%),
    radial-gradient(ellipse 30% 34% at 52% 78%, rgba(124, 77, 255, .10), transparent 70%);
  animation: maia-breathe 13s ease-in-out infinite alternate;
}

/* Camada B — a grade técnica, mascarada para não virar papel de parede. */
.hero__glow::after {
  content: ""; position: absolute; inset: 0;
  background: var(--bg-grid); opacity: .55;
  mask-image: radial-gradient(ellipse 60% 70% at 72% 46%, #000 10%, transparent 72%);
}

@keyframes maia-breathe {
  from { transform: scale(1); opacity: .82; }
  to   { transform: scale(1.07); opacity: 1; }
}

/* Registro baixo: para heroes curtos e editoriais (Pricing), onde a luz é
   ambiente e não cena. A grade sai — ali não há nada técnico acontecendo.
   A intensidade cai pelo ALFA do gradiente e não por `opacity`, que a animação
   `maia-breathe` já está usando. */
.hero__glow--quiet::before {
  background:
    radial-gradient(ellipse 44% 52% at 78% 30%, rgba(0, 212, 255, .09), transparent 70%),
    radial-gradient(ellipse 34% 38% at 24% 88%, rgba(124, 77, 255, .06), transparent 72%);
}
.hero__glow--quiet::after { display: none; }

/* Uma linha de varredura lenta atravessando o campo. Fica DENTRO do hero e
   por isso não precisa do `.decor--sweep` genérico. */
.hero__scan {
  position: absolute; top: 0; bottom: 0; left: 0; width: 26%; z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, .055), transparent);
  animation: maia-sweep 14s linear infinite;
}


/* =============================================================================
   2c. ENTRADA DO HERO — CSS puro, sem depender de observer
   ============================================================================= */

/* O hero está em quadro no instante zero: escondê-lo esperando JavaScript
   trocaria uma animação por um risco de tela vazia. Então a entrada é uma
   animação de CSS com `backwards`, que já nasce agendada. */
@keyframes hero-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

.hero__copy > *,
.hero__cue {
  animation: hero-in 760ms var(--ease-out) backwards;
}
.hero__copy > *:nth-child(1) { animation-delay:  60ms; }
.hero__copy > *:nth-child(2) { animation-delay: 150ms; }
.hero__copy > *:nth-child(3) { animation-delay: 240ms; }
.hero__copy > *:nth-child(4) { animation-delay: 330ms; }
.hero__copy > *:nth-child(5) { animation-delay: 420ms; }
.hero__cue { animation-delay: 620ms; }

/* A cena de fundo entra por escala, mais devagar que a copy — profundidade,
   não deslocamento. */
@keyframes hero-scene-in {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: none; }
}
.hero__media, .hero__glow {
  animation: hero-scene-in 1400ms var(--ease-out) backwards;
}


/* =============================================================================
   3. REVELAÇÕES DE SCROLL — seis efeitos, distribuídos
   ============================================================================= */

/* Estado inicial comum: só a transição. Cada efeito declara o SEU deslocamento.
   `--reveal-delay` é escrito por scroll-reveal.js para escalonar irmãos. */
[data-reveal] {
  transition:
    opacity 620ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 720ms var(--ease-out) var(--reveal-delay, 0ms),
    clip-path 760ms var(--ease-out) var(--reveal-delay, 0ms),
    filter 620ms var(--ease-out) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="active"],
[data-reveal="completed"] {
  opacity: 1 !important;
  transform: none !important;
  /* `none` e não `inset(0 0 0 0)`: a caixa de borda cortaria os halos dos nós
     dos diagramas, que vazam de propósito. */
  clip-path: none !important;
  filter: none !important;
}

/* — rise: o clássico, usado COM PARCIMÔNIA e com deslocamento curto. */
[data-reveal="inactive"][data-reveal-effect="rise"] {
  opacity: 0; transform: translate3d(0, 22px, 0);
}

/* — mask: a composição é descoberta da esquerda para a direita.
   O recorte para em 30% DE PROPÓSITO. Ver o aviso do efeito `line` logo
   abaixo: um `clip-path` que zera a área do elemento também zera a área de
   interseção, e o IntersectionObserver deixa de disparar. Com 30% sobram 70%
   de área — muito acima do `threshold` de 12% do observer. */
[data-reveal="inactive"][data-reveal-effect="mask"] {
  opacity: .15; clip-path: inset(0 30% 0 0);
}

/* — depth: vem de trás, como se entrasse em foco. */
[data-reveal="inactive"][data-reveal-effect="depth"] {
  opacity: 0; transform: scale(.955); filter: blur(3px);
}

/* — slide-in: entra pela lateral; o lado depende de onde o bloco está. */
[data-reveal="inactive"][data-reveal-effect="slide-left"] {
  opacity: 0; transform: translate3d(-34px, 0, 0);
}
[data-reveal="inactive"][data-reveal-effect="slide-right"] {
  opacity: 0; transform: translate3d(34px, 0, 0);
}

/* — line: uma régua técnica que se desenha, da esquerda para a direita.
   Para cabeçalhos de seção.

   O varrido é feito com MÁSCARA, não com `clip-path`.

   Motivo, e é uma armadilha real: o `clip-path: inset(0 100% 0 0)` da primeira
   versão zerava a área pintada do elemento — e o IntersectionObserver calcula a
   razão de interseção sobre a área RECORTADA. Com razão 0 o `threshold: .12`
   nunca era cruzado, o observer nunca entregava a entrada e o cabeçalho ficava
   escondido para sempre. Todos os capítulos do site abriam sem título.
   A máscara é efeito de PINTURA: não mexe na geometria que o observer mede. */
[data-reveal-effect="line"] {
  -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent 50%);
          mask-image: linear-gradient(90deg, #000 50%, transparent 50%);
  -webkit-mask-size: 200% 100%;  mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition:
    -webkit-mask-position 820ms var(--ease-out) var(--reveal-delay, 0ms),
    mask-position 820ms var(--ease-out) var(--reveal-delay, 0ms),
    opacity 520ms var(--ease-out) var(--reveal-delay, 0ms);
}
/* Máscara deslocada para a esquerda: a metade transparente cobre o elemento. */
[data-reveal="inactive"][data-reveal-effect="line"] {
  opacity: .25;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
[data-reveal="active"][data-reveal-effect="line"],
[data-reveal="completed"][data-reveal-effect="line"] {
  -webkit-mask-position: 0 0; mask-position: 0 0;
}

/* — lift: profundidade sem deslocamento vertical, para mídia pesada. */
[data-reveal="inactive"][data-reveal-effect="lift"] {
  opacity: 0; transform: scale(1.035);
}


/* =============================================================================
   4. PARALLAX — de scroll e de mouse
   ============================================================================= */

/* O deslocamento é escrito por JS numa custom property e aplicado por
   transform: nunca por `top`/`background-position`, que forçam layout
   (readme §16: preferir transform, opacity e clip). */
[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

/* SEM `transition` aqui: a inércia passou a ser feita em JavaScript, que
   interpola o deslocamento a caminho do alvo (atmosphere.js). Amaciar duas
   vezes — uma no laço e outra na transição — deixava a cena arrastada, como se
   respondesse meio segundo depois do gesto. */
[data-mouse-parallax] {
  transform: translate3d(var(--mouse-x, 0px), var(--mouse-y, 0px), 0);
  will-change: transform;
}


/* =============================================================================
   5. MOVIMENTO REDUZIDO — tudo acima é enfeite, nada é informação
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; filter: none !important;
    transition: none !important;
  }
  [data-reveal-effect="line"] { -webkit-mask-image: none !important; mask-image: none !important; }
  [data-parallax], [data-mouse-parallax] { transform: none !important; }
  .decor--flicker, .decor--drift, .decor--sweep { animation: none !important; }
  .decor--flicker { opacity: var(--flicker-high, .55); }
  /* O campo de formas é 100% enfeite: sem movimento ele não tem função, então
     sai inteiro em vez de ficar parado atrás do texto. */
  .float-field { display: none !important; }
}

/* Sem JavaScript nada pode ficar escondido esperando uma revelação que não vem. */
.no-js [data-reveal] {
  opacity: 1 !important; transform: none !important;
  clip-path: none !important; filter: none !important;
}
.no-js [data-reveal-effect="line"] { -webkit-mask-image: none !important; mask-image: none !important; }


/* =============================================================================
   6. TROCAS — saída e entrada em todo painel que muda
   ============================================================================= */

/* Pedido do dono do projeto (2026-09-18): toda troca (abas, roster, FAQ) tem
   uma animação de saída do que estava e de entrada do que chega. A sequência
   é do swap.js; aqui só o desenho de cada fase.

   Curta de propósito — 200ms para sair, 320ms para entrar. Uma troca de aba é
   um gesto do leitor, não uma cena: se ele esperar pela animação, ela está
   longa demais. O eixo vem da direção: aba à direita entra pela direita, e o
   roster/FAQ (sem direção) entram de baixo, mais perto. */
[data-swap="out"] {
  animation: swap-out 200ms var(--ease-hud) forwards;
  pointer-events: none;
}
[data-swap="in"] {
  animation: swap-in 320ms var(--ease-out) both;
}

[data-swap-dir="1"]  { --swap-x: 18px; }
[data-swap-dir="-1"] { --swap-x: -18px; }
[data-swap-dir="0"]  { --swap-x: 0px; }

@keyframes swap-out {
  from { opacity: var(--swap-start-opacity, 1); transform: var(--swap-start-transform, none); }
  to { opacity: 0; transform: translate3d(calc(var(--swap-x, 0px) * -1), -6px, 0); }
}
@keyframes swap-in {
  from { opacity: var(--swap-start-opacity, 0); transform: var(--swap-start-transform, translate3d(var(--swap-x, 0px), 10px, 0)); }
}


/* =============================================================================
   7. FORMAS SOLTAS PELA PÁGINA — entre as seções, não dentro delas
   ============================================================================= */

/* O campo cobre o <main> inteiro e fica SOBRE as seções: cada seção é um
   contexto de empilhamento com fundo opaco, então não existe "atrás do
   conteúdo mas na frente do fundo" para um elemento de fora. Por isso as
   formas pousam nas margens e nas fronteiras entre capítulos — e são finas e
   claras o bastante para não esconder nada se um dia cruzarem texto. */
.page-float {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none; overflow: clip;
}

.page-float__item { position: absolute; will-change: transform; }

.page-float__body {
  display: block; width: 100%; height: 100%;
  animation:
    maia-morph var(--morph-dur, 23s) ease-in-out infinite,
    maia-bob   var(--bob-dur, 12s)   ease-in-out infinite alternate,
    maia-turn  var(--turn-dur, 61s)  linear infinite;
  animation-delay: var(--shape-delay, 0s), var(--shape-delay, 0s), 0s;
}

/* A regra de cor, dita pelo dono do projeto: "mais escuros à medida que estão
   mais à frente, mas nunca mais escuros que o background", e visíveis também
   nas seções escuras. Então:
     · profundidade 3 (atrás)  — a tinta mais CLARA: ciano em névoa;
     · profundidade 2 (meio)   — vidro neutro;
     · profundidade 1 (frente) — a mais ESCURA das três, mas ainda uma camada
       ACIMA do fundo (#0e1622 sobre #05070c…#0a0e16) e com um contorno de luz,
       para que sobre uma seção preta ela continue existindo. */

/* — atrás — */
.page-float__body--ring {
  border: 1px solid rgba(0, 212, 255, .16);
  box-shadow: inset 0 0 60px rgba(0, 212, 255, .06);
}
.page-float__body--grid-tile {
  border-radius: 18% !important;          /* grade não morfa: é peça técnica */
  background:
    linear-gradient(rgba(0, 212, 255, .11) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(0, 212, 255, .11) 1px, transparent 1px) 0 0 / 28px 28px;
  border: 1px solid rgba(0, 212, 255, .10);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 78%);
  animation-name: maia-bob, maia-turn-slow;
  animation-duration: var(--bob-dur, 14s), 140s;
}
.page-float__body--grid-tile-sm {
  background-size: 18px 18px, 18px 18px;
}

/* — meio — */
.page-float__body--glass {
  background:
    radial-gradient(circle at 30% 30%, rgba(0, 212, 255, .12), transparent 60%),
    rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .07);
}
.page-float__body--hollow {
  border: 1px solid rgba(0, 212, 255, .14);
  box-shadow: inset 0 0 0 16px rgba(0, 212, 255, .045);
}

/* — frente — */
.page-float__body--near {
  background: rgba(14, 22, 34, .86);          /* mais escuro que o meio, mais claro que o fundo */
  border: 1px solid rgba(0, 212, 255, .22);
  box-shadow: 0 0 40px rgba(0, 212, 255, .06);
  filter: blur(.6px);
}
.page-float__body--near-edge {
  background: rgba(12, 19, 30, .8);
  border-color: rgba(0, 212, 255, .16);
}
.page-float__body--dot {
  background: rgba(0, 212, 255, .28);
  box-shadow: 0 0 24px rgba(0, 212, 255, .35);
  border-radius: 50% !important;
  animation-name: maia-bob;
}

@keyframes maia-turn-slow {
  from { rotate: 0deg; }
  to   { rotate: 90deg; }
}

/* Onde cada uma pousa: porcentagem da altura do DOCUMENTO, margens e
   fronteiras. Variedade de tamanho de propósito — 60px a 520px. */
.page-float__item--1 { width: 520px; height: 520px; top: 9%;  left: -300px;  --shape-delay: -4s;  --bob-dur: 16s; }
.page-float__item--2 { width: 300px; height: 300px; top: 21%; right: -140px; --shape-delay: -11s; --morph-dur: 29s; }
.page-float__item--3 { width: 180px; height: 180px; top: 33%; left: 3%;     --shape-delay: -7s;  --morph-dur: 21s; --bob-dur: 9s; }
.page-float__item--4 { width: 260px; height: 260px; top: 47%; right: 2%;    --shape-delay: -2s;  --bob-dur: 11s; }
.page-float__item--5 { width: 140px; height: 140px; top: 58%; left: 6%;     --shape-delay: -15s; --morph-dur: 17s; --bob-dur: 8s; }
.page-float__item--6 { width: 120px; height: 120px; top: 27%; left: 9%;     --shape-delay: -9s;  --morph-dur: 19s; --bob-dur: 7s; }
.page-float__item--7 { width: 210px; height: 210px; top: 71%; right: -60px; --shape-delay: -5s;  --morph-dur: 25s; --bob-dur: 10s; }
.page-float__item--8 { width: 14px;  height: 14px;  top: 40%; right: 12%;   --bob-dur: 6s; }

[data-page-float="b"] .page-float__item--1 { left: auto; right: -280px; top: 14%; }
[data-page-float="b"] .page-float__item--2 { right: auto; left: -120px; top: 30%; }
[data-page-float="b"] .page-float__item--3 { left: auto; right: 5%; top: 44%; }
[data-page-float="b"] .page-float__item--4 { right: auto; left: 2%; top: 62%; }
[data-page-float="b"] .page-float__item--5 { left: auto; right: 8%; top: 22%; }
[data-page-float="b"] .page-float__item--6 { left: auto; right: 10%; top: 76%; }
[data-page-float="b"] .page-float__item--7 { right: auto; left: -70px; top: 84%; }
[data-page-float="b"] .page-float__item--8 { right: auto; left: 14%; top: 52%; }

/* Celular: três formas bastam; as grandes viram sujeira atrás do texto. */
@media (max-width: 900px) {
  .page-float__item--1, .page-float__item--2, .page-float__item--4,
  .page-float__item--5, .page-float__item--7 { display: none; }
  .page-float__item--3 { width: 120px; height: 120px; }
  .page-float__item--6 { width: 90px; height: 90px; }
}


/* =============================================================================
   8. DERIVA — as cenas grandes andam devagar, cada uma para um lado
   ============================================================================= */

/* Pedido do dono do projeto (2026-09-18): "as imagens de destaque, heros e de
   background de seção podem ficar se movendo lentamente em direções aleatórias
   para deixar o design mais vivo".

   A deriva mora na IMAGEM, não na camada: a camada (`.hero__media` etc.) já
   carrega o parallax de ponteiro em `transform`, e uma animação de `transform`
   no mesmo nó vence o estilo inline — a cena pararia de responder ao mouse.
   Na imagem, com `translate` e `scale` (propriedades próprias), as duas coisas
   somam.

   A direção é sorteada por atmosphere.js (`--drift-x/--drift-y`, duração e
   fase), então cada abertura da página anda para um lado diferente. Os
   valores são pequenos (~1,2% do quadro): com a folga que as camadas já têm
   para o parallax, a borda nunca aparece. */
.drift {
  animation: maia-drift var(--drift-dur, 42s) ease-in-out infinite alternate;
  animation-delay: var(--drift-delay, 0s);
  will-change: translate, scale;
}
@keyframes maia-drift {
  from { translate: 0 0; scale: 1.03; }
  to   { translate: var(--drift-x, 1.2%) var(--drift-y, -.8%); scale: 1.06; }
}

@media (prefers-reduced-motion: reduce) {
  [data-swap="out"], [data-swap="in"] { animation: none !important; }
  .page-float { display: none !important; }
  .drift { animation: none !important; }
}