/* ── tipografia rev. 10/08 (pedido do dono) ────────────────────────────
   Geist no corpo/UI · Instrument Serif 400 no display · Geist Mono nos
   rótulos. As três são OFL e ficam auto-hospedadas (latin + latin-ext). */
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/geist-mono.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/geist-mono-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif-italic-ext.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ═══════════════════════════════════════════════════════════
   moonworks — personagens vivos para marcas
   estética: company-picnic-core (ink + papel + neon + grão)
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Archivo Var";
  src: url("assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
/* ── NEBULICA — a principal ──────────────────────────────
   Zarma Type Foundry, fonte PAGA. O .woff2 não está no repo porque
   auto-hospedar exige licença de WEBFONT (a de desktop não cobre).
   Assim que o arquivo licenciado for salvo em assets/fonts/nebulica.woff2
   ela entra sozinha — até lá o stack cai na Archivo Var, que é o que o
   site sempre usou. Se a compra vier com mais de um peso, duplicar este
   bloco por peso em vez de deixar o browser sintetizar o bold. */
@font-face {
  font-family: "Nebulica";
  src: url("assets/fonts/nebulica.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
/* ── SPACE MONO — a de apoio (SIL OFL, auto-hospedada) ──────
   rev. 09/08 (dono não curtiu a Press Start 2P): a pixel 8-bit lia
   "videogame" num site que amadureceu pra estúdio. a Space Mono mantém
   o registro de instrumento/telemetria dos rótulos (é MONO, tem as
   quinas técnicas) mas com desenho editorial — e tem minúsculas de
   verdade, coisa que a Press Start nem possuía. Sem size-adjust: a
   métrica dela é normal. */
@font-face {
  font-family: "Space Mono";
  src: url("assets/fonts/space-mono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: "Space Mono";
  src: url("assets/fonts/space-mono-ext.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0;
}
@font-face {
  font-family: "Space Mono";
  src: url("assets/fonts/space-mono-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* ── PRESS START 2P — aposentada do stack (arquivos ficam pra rollback) ──
   substitui a Pixelify. size-adjust NÃO é enfeite: medido lado a lado no
   mesmo font-size, a Press Start 2P sai 2,30× mais LARGA e 1,58× mais
   ALTA que a Pixelify. Sem o ajuste, todo .px do site (chips, tags,
   ticker, HUD) estoura a caixa. 63% iguala a altura da maiúscula — é o
   eixo que o olho compara. A largura ainda cresce ~45%, então os pontos
   que não cabiam foram tratados um a um abaixo (busque "PS2P"). */
@font-face {
  font-family: "Press Start 2P";
  src: url("assets/fonts/press-start-2p.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  size-adjust: 63%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: "Press Start 2P";
  src: url("assets/fonts/press-start-2p-ext.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  size-adjust: 63%;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0;
}
@font-face {
  font-family: "Pixelify Var";
  src: url("assets/fonts/pixelify-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
/* o "works" da marca — serifado itálico contra o grotesco pesado do "moon".
   Playfair Display Italic 500 (SIL OFL, auto-hospedado). font-display:block
   e não swap: é LOGO, e ver a marca piscar num sans genérico antes de
   assentar é pior do que esperar 100ms por ela. */
@font-face {
  font-family: "Playfair Italic";
  src: url("assets/fonts/playfair-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 500;
  font-display: block;
}

:root {
  --ink: #191919;
  --ink-deep: #121212;
  --paper: #f0f0f0;
  --laser: #d6ff00;
  --red: #ff4e33;
  --blue: #05c1f0;
  --yellow: #ffdc30;
  --purple: #6d45ff;

  /* ── a marca ──
     coral amostrado direto da arte do logo (#ee815b): é salmão, mais quente e
     mais baixo que o --red (#ff4e33) da interface. os dois NÃO são a mesma
     tinta e não devem virar uma só — o --red grita (fundo do fecho, ênfases),
     o coral da lua é identidade e fica quieto. */
  --moon-coral: #ee815b;
  /* geometria do eclipse, medida na arte: dois discos de mesmo diâmetro com
     os centros a 0.733 diâmetro de distância — a lente onde se cruzam é
     VAZADA, deixa passar o fundo. mexer aqui redesenha a marca inteira. */
  --moon-d: .557em;
  --moon-gap: .733;

  /* Nebulica na frente; Archivo Var segura enquanto o .woff2 não chega.
     A Pixelify fica no fim do stack de apoio de propósito: a Press Start
     2P não tem ☾ ✦ → ↔, e sem ela esses símbolos cairiam num monospace
     do sistema no meio de uma linha de pixel. */
  --ui:   "Geist", "Archivo Var", system-ui, sans-serif;
  --disp: "Instrument Serif", Georgia, "Times New Roman", serif;
  --serif: "Playfair Italic", Georgia, "Times New Roman", serif;
  --px: "Geist Mono", "Space Mono", "Pixelify Var", "Courier New", monospace;

  --wide: normal;
  --shadow: 0.28rem 0.28rem 0 rgba(0,0,0,.9);
  /* ── o céu do site ──
     um ÚNICO gradiente para toda a viagem 3D (tese → sapo → elenco →
     jardim): ancorado no viewport, então a luz de fundo é a mesma em
     qualquer seção. calibrado no jardim do cap. 03. */
  --sky: radial-gradient(125% 88% at 50% 4%, #0b0e26 0%, #070a1c 40%, #04060f 74%, #010208 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* `clip` e não `hidden`: hidden no root faz do body um contêiner de rolagem
   e mata TODO position:sticky do site (hero, beats, poço, teatro). clip
   corta a sangria sem criar scrollport. o vilão é a borda rasgada
   (.torn-top::before sangra 20px pros lados) — no celular esses 20px
   viravam scrollWidth de 410px e empurravam o header pra fora da tela. */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--ui);
  font-variation-settings: normal;
  background: var(--ink);
  color: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; color: var(--laser); }
section { position: relative; }

/* ── grão de papel em tudo ─────────────────────────────── */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none; z-index: 999;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation: grain-shift 1.2s steps(3) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0,0) }
  33% { transform: translate(-2%,1%) }
  66% { transform: translate(1%,-2%) }
  100% { transform: translate(0,0) }
}

/* ── tipografia utilitária ─────────────────────────────── */
.px {
  font-family: var(--px);
  font-weight: 400;
  /* PS2P: a Pixelify pedia -0.02em pra fechar; a Press Start 2P é
     monoespaçada com respiro embutido — tracking negativo cola os pixels
     e some com o vão que faz a fonte ser legível. */
  letter-spacing: 0;
  font-size: clamp(.82rem, 1.6vw, 1.05rem);
}
.h2 {
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: clamp(2.6rem, 7.2vw, 5.6rem);
  line-height: .92;
  letter-spacing: -0.02em;
}
.chapter {
  display: inline-block;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: .45em .95em;
  margin-bottom: 1.6rem;
  opacity: .85;
}
.lead {
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  font-weight: 500;
  line-height: 1.35;
  max-width: 34em;
  margin-top: 1.4rem;
}
.lead strong { color: var(--laser); font-weight: 700; }

/* ── rasgo de papel entre seções ───────────────────────── */
.torn-top::before {
  content: "";
  position: absolute;
  top: -13px; left: -20px; right: -20px;
  height: 30px;
  background: var(--tornc, var(--paper));
  filter: url(#torn);
  pointer-events: none;
  z-index: 3;
}

/* ── botões ────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--disp);
  font-variation-settings: "wdth" 110;
  font-weight: 800;
  background: var(--laser);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: .55em 1.3em;
  box-shadow: var(--shadow);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
.btn:hover { transform: translate(-2px,-3px) rotate(-1.5deg); box-shadow: .45rem .5rem 0 rgba(0,0,0,.9); }
.btn:active { transform: translate(2px,2px); box-shadow: .1rem .1rem 0 rgba(0,0,0,.9); }
.btn-big {
  font-size: clamp(1.2rem, 3vw, 1.9rem);
  padding: .7em 1.5em;
  border-width: 3px;
}

/* ── header (ilhas flutuantes, ref. passionfroot) ──────── */
.site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .95rem 1.15rem;
  pointer-events: none;
}
.head-island {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .48rem .6rem;
  border-radius: 16px;
  /* .68 + saturate(1.25) deixava 32% da seção passar E ainda saturava o que
     passava: sobre o vermelho do fecho a ilha virava marrom #5e241d, matiz
     irmã do coral da marca — o disco coral do logo sumia como mancha (4,5:1).
     mais opaca e dessaturada, a ilha para de se tingir com a seção de trás e o
     logo pisa sempre em ink: o coral sobe pra ~6,2:1 e o "oo" volta a ler
     como dois. o desfoque continua aí, só não pinta mais. */
  background: rgba(13, 14, 19, .86);
  border: 1px solid rgba(255, 255, 255, .11);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
  -webkit-backdrop-filter: blur(16px) saturate(.7);
          backdrop-filter: blur(16px) saturate(.7);
  color: #fff;
}
.head-island .logo { color: #fff; padding: 0 .45rem 0 .35rem; }
.head-sep {
  width: 1px;
  height: 1.15em;
  background: rgba(255, 255, 255, .18);
  margin: 0 .45rem;
  flex: none;
}
.head-links { display: inline-flex; align-items: center; gap: .1rem; }
.head-link {
  font-variation-settings: "wdth" 106;
  font-weight: 650;
  font-size: .92rem;
  letter-spacing: .005em;
  color: rgba(255, 255, 255, .82);
  padding: .42em .72em;
  border-radius: 10px;
  transition: color .16s, background-color .16s;
}
.head-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.head-tag { opacity: .62; padding-left: .5rem; }
.btn-head {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--disp);
  font-variation-settings: "wdth" 108;
  font-weight: 750;
  font-size: .92rem;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 11px;
  padding: .5em 1em;
  transition: background-color .18s, color .18s, border-color .18s;
}
.btn-head .arr { transition: transform .18s; }
.btn-head:hover {
  background: var(--laser);
  border-color: var(--laser);
  color: var(--ink);
}
.btn-head:hover .arr { transform: translateX(3px); }
@media (max-width: 980px) {
  .head-tag, .head-right .head-sep { display: none; }
}
@media (max-width: 760px) {
  .head-links, .head-left .head-sep { display: none; }
  .head-island { border-radius: 14px; padding: .42rem .5rem; }
  .site-head { padding: .7rem .8rem; gap: .5rem; }
  /* as duas ilhas não cabem lado a lado numa tela de 390: a da direita
     encolhe até caber em vez de vazar pela borda */
  .head-right { min-width: 0; }
  .btn-head { font-size: .82rem; padding: .5em .8em; white-space: nowrap; }
  .logo { font-size: 1.15rem; }
}
@media (max-width: 400px) {
  .btn-head { font-size: .78rem; padding: .5em .7em; }
  .btn-head .arr { display: none; }
}

/* ── marca: o vetor mestre (r9) ─────────────────────────────
   a logo deixou de ser texto + dois discos de CSS e passou a ser o VETOR
   APROVADO, inline. o sprite mora escondido no topo do body e cada uso é
   um <use> — uma cópia só do path pra quatro lugares (header, hero,
   bandeira, rodapé).

   ATENÇÃO ao mexer: <use> clona o conteúdo num shadow tree. seletor de
   fora NÃO entra lá (".logo:hover .mw-ph" não casa com nada). só
   propriedade herdada atravessa — é por isso que a cor vai por
   currentColor e o hover vai pela custom property --mw-close, com o
   transform e a transição declarados INLINE dentro do sprite.
   ─────────────────────────────────────────────────────── */
.mw-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* a marca herda a cor de quem a contém, em qualquer polaridade */
.mw-logo, svg.hero-brand { fill: currentColor; }
.mw-logo { display: block; height: .78em; width: auto; }

.logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 1.5rem;   /* só serve de escala: o em do .mw-logo sai daqui */
}

/* a lua se põe: o hover aproxima as fases do disco. cada fase anda
   --mw-close vezes a sua posição na fila, então os vãos fecham por igual e
   a geometria continua coerente no meio do caminho.
   o valor é contido de propósito: fechar demais funde as fases e a marca
   passa a ler "monworks" — o mesmo motivo que reprovou a outra versão. */
   medido no vetor MESTRE (05/08): a -12 as fases já se fundem e o vão
   antes do "n" abre demais — o cluster vira um borrão. a -6 as quatro
   fases seguem distintas. o valor mudou junto com a geometria: o cluster
   antigo era reconstrução paramétrica, este é o traçado do master. */
.logo:hover, .logo:focus-visible { --mw-close: -6px; }

/* ── hero: o pouso na lua (scroll = aproximação) ───────── */
.hero {
  position: relative;
  height: 320vh;
}
.hero-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(5rem, 10vh, 7rem) 1.2rem 0;
  overflow: hidden;
  background:
    radial-gradient(90% 55% at 50% 108%, rgba(214,255,0,.10) 0%, transparent 60%),
    linear-gradient(180deg, #08090f 0%, #10111a 42%, #171720 68%, var(--ink) 100%);
}

/* a lua vista de longe — cresce conforme você chega.
   o disco nasce GIGANTE (resolução nativa, textura 4k) e entra em cena
   REDUZIDO via scale — assim nunca perde nitidez no zoom. */
.moon-far {
  display: none;
  position: absolute;
  left: 50%; top: 58.5%;
  width: 280vh;
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 2;
  overflow: hidden;
  background: url("assets/moon-far.jpg") 0 42% / cover repeat-x;
  filter: saturate(.55) contrast(1.06);
  box-shadow:
    0 0 60vh rgba(240,240,235,.15),
    0 0 12vh rgba(255,255,255,.22);
  --far-base: .17; /* já entra GRANDE: ~48vh de diâmetro */
  transform: translate(-50%,-50%) scale(.17);
  will-change: transform, opacity;
}
/* sombreamento esférico (em gradiente = escala junto com o disco) */
.moon-far::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.16) 0%, transparent 46%),
    radial-gradient(circle at 50% 42%, transparent 50%, rgba(5,6,10,.22) 68%, rgba(5,6,10,.56) 84%, rgba(5,6,10,.82) 98%);
}
.prelanding .moon-far { display: block; pointer-events: auto; cursor: grab; }
.moon-far.grabbing { cursor: grabbing; }
.moon-far-hint {
  position: absolute;
  left: 50%;
  top: calc(60% + clamp(150px, 24.5vh, 235px));
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(240,240,235,.55);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.moon-far-hint.show { opacity: 1; }
@media (hover: none) { .moon-far-hint { display: none; } }

/* antes do pouso: chão fora de cena e elenco guardado */
.prelanding .moonstage { transform: translateY(108%); }
.moonstage { will-change: transform; }
.lunar, .lunar-peek, .flagpole { transition: scale .6s cubic-bezier(.34,1.56,.64,1); }
.prelanding .lunar:not(.on),
.prelanding .lunar-peek:not(.on),
.prelanding .flagpole:not(.on) { scale: 0; }

/* céu */
.sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.stars { position: absolute; inset: -12%; background-repeat: repeat; }
.stars-a {
  background-image:
    radial-gradient(1.4px 1.4px at 22% 28%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 68% 14%, rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 44% 62%, rgba(255,255,255,.7) 50%, transparent 52%),
    radial-gradient(1px 1px at 86% 48%, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(.9px .9px at 8% 78%, rgba(255,255,255,.55) 50%, transparent 52%);
  background-size: 340px 340px;
  animation: twinkle 4.2s ease-in-out infinite alternate;
}
.stars-b {
  background-image:
    radial-gradient(2px 2px at 12% 40%, var(--laser) 50%, transparent 54%),
    radial-gradient(1.7px 1.7px at 78% 22%, #fff 50%, transparent 54%),
    radial-gradient(1.5px 1.5px at 55% 80%, rgba(5,193,240,.9) 50%, transparent 54%),
    radial-gradient(2.2px 2.2px at 92% 66%, rgba(255,255,255,.9) 50%, transparent 54%);
  background-size: 560px 560px;
  animation: twinkle 3.1s ease-in-out infinite alternate-reverse;
}
@keyframes twinkle { from { opacity: .55 } to { opacity: 1 } }

.shooting {
  position: absolute;
  top: 14%; left: -12%;
  width: 150px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff 55%, var(--laser));
  box-shadow: 0 0 14px rgba(214,255,0,.7);
  transform: rotate(16deg);
  opacity: 0;
  animation: shoot 9s ease-in 2.2s infinite;
}
@keyframes shoot {
  0% { opacity: 0; translate: 0 0 }
  4% { opacity: 1 }
  11% { opacity: 0; translate: 68vw 24vh }
  100% { opacity: 0; translate: 68vw 24vh }
}

/* rev. 09/08 ("nem a terra" tinha textura): mapa REAL girando — a mesma
   receita da lua-globo: faixa equiretangular deslizando dentro do disco
   + sombreamento esférico no ::after. mapa Solar System Scope CC BY 4.0. */
.earth {
  --esz: clamp(90px, 16vh, 180px);
  position: absolute;
  top: 27%; right: 20%;
  width: var(--esz);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: url("assets/planets/earth.jpg") repeat-x;
  background-size: calc(var(--esz) * 2) 100%;
  /* sombreamento por INSET SHADOWS (ref que o dono trouxe, globe.tsx do
     21st.dev): aro de atmosfera ciano na borda iluminada + terminador
     profundo engolindo o lado noite. os valores são FRAÇÕES de --esz
     via calc — a ref era fixa em 250px e afogaria o globo no mobile. */
  box-shadow:
    0 0 20px rgba(255,255,255,.2),
    0 0 26px rgba(5,193,240,.3),
    calc(var(--esz) * -0.02) 0 calc(var(--esz) * 0.032) #c3f4ff inset,
    calc(var(--esz) * 0.06) calc(var(--esz) * 0.008) calc(var(--esz) * 0.1) #000 inset,
    calc(var(--esz) * -0.096) calc(var(--esz) * -0.008) calc(var(--esz) * 0.136) rgba(195,244,255,.6) inset,
    var(--esz) 0 calc(var(--esz) * 0.176) rgba(0,0,0,.4) inset,
    calc(var(--esz) * 0.6) 0 calc(var(--esz) * 0.152) rgba(0,0,0,.67) inset;
  animation:
    earth-drift 11s ease-in-out infinite,
    earth-spin 74s linear infinite;
}
@keyframes earth-drift { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes earth-spin { to { background-position-x: calc(var(--esz) * -2); } }

/* título */
.hero-inner { position: relative; z-index: 5; }
.hero-title {
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: clamp(2.6rem, 8vw, 6.2rem);
  line-height: .88;
  letter-spacing: -0.025em;
  text-shadow: 0 8px 60px rgba(0,0,0,.6);
}
span.rl { display: inline-block; will-change: transform; }
/* a mesma gelatina agora roda em <g> do SVG da marca: fill-box pra
   rotação pivotar no centro da própria letra, não na origem do viewBox */
g.rl { transform-box: fill-box; transform-origin: 50% 50%; will-change: transform; }
.hero-title .line { display: block; }
.hero-title .dot { color: var(--red); }
.hero-sub {
  position: absolute;
  left: 63%;
  bottom: 3.5%;
  z-index: 7;
  color: rgba(240,240,240,.85);
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
  rotate: -3deg;
}

/* palco lunar */
.moonstage {
  position: relative;
  z-index: 6;
  /* full-bleed SEMPRE: a keyart wide (3.5:1) tem sobra de terreno nos dois
     lados, então cover nunca corta o elenco — em janela alta mostra o miolo
     (o elenco de borda a borda), em janela larga e baixa revela as sobras. */
  width: 100vw;
  height: min(42.5vw, 68svh);
  margin-top: auto;
  pointer-events: none;
}
/* ── a cena pousada: KEYART única (elenco inteiro num render só,
   gerada com os canons como referência) ─────────────────── */
.moon-scene-wrap { position: absolute; inset: 0; z-index: 2; }
.moon-scene {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  /* topo funde no céu de CSS (o pano da bandeira começa em ~11% — o fade
     acaba antes) e o CHÃO se desfaz na poeira do capítulo seguinte: sem o
     fade de baixo a keyart terminava numa LINHA RETA atravessando a tela,
     que no celular é a primeira coisa que se vê ao sair do hero. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.72) 4.5%, #000 9.5%, #000 74%, rgba(0,0,0,.6) 89%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.72) 4.5%, #000 9.5%, #000 74%, rgba(0,0,0,.6) 89%, transparent 100%);
}
/* a colagem antiga sai de cena (fica só a bandeira por cima) */
.ground-wrap, .lunar, .lunar-peek { display: none; }

/* ── o chão em POV: você está EM PÉ na superfície ─────────
   plano com a textura 4k em perspectiva real de CSS —
   horizonte quase reto, primeiro plano vindo até os pés. */
.ground-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  perspective: 68vh;
  perspective-origin: 50% 0%;
}
/* brilho do horizonte subindo pro céu */
.ground-wrap::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -7vh;
  height: 7vh;
  background: linear-gradient(180deg, transparent, rgba(240,240,235,.12));
}
.ground-plane {
  position: absolute;
  left: 50%; top: .3vh;
  width: 340vw;
  height: 300vh;
  z-index: 1;
  transform: translateX(-50%) rotateX(86.5deg);
  transform-origin: 50% 0%;
  background: url("assets/moon-ground.jpg") repeat 0 0 / 128vw auto;
  filter: saturate(.4) contrast(1.05) brightness(.98);
}
/* luz rasante: horizonte claro, primeiro plano na sombra */
.ground-plane::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,.28) 0%,
    rgba(255,255,255,.07) 5%,
    transparent 15%,
    rgba(5,6,10,.28) 55%,
    rgba(5,6,10,.66) 100%);
}
/* cume distante irregular na linha do horizonte */
.ground-ridge {
  position: absolute;
  left: -2vw; right: -2vw;
  top: -2.1vh;
  height: 4.4vh;
  z-index: 2;
  background: url("assets/moon-ground.jpg") repeat 14% 30% / 200vw auto;
  filter: saturate(.35) brightness(1.12) contrast(.92) drop-shadow(0 -1px 0 rgba(255,255,255,.3));
  clip-path: polygon(0 100%, 0 62%, 6% 48%, 13% 58%, 22% 40%, 30% 55%, 38% 46%, 47% 60%, 55% 42%, 64% 56%, 72% 44%, 80% 58%, 88% 46%, 95% 60%, 100% 50%, 100% 100%);
}

/* elenco em cena */
.lunar-cast { position: absolute; inset: 0; z-index: 4; }
.lunar {
  position: absolute;
  height: var(--h);
  bottom: var(--b);
  left: var(--x);
  translate: -50% 0;
  animation: lunar-bob var(--t, 5.5s) ease-in-out var(--d, 0s) infinite;
  transform-origin: 50% 100%;
  will-change: transform;
}
.stars { translate: var(--px, 0px) var(--py, 0px); }
.earth { translate: var(--px, 0px) calc(var(--py, 0px) + var(--rise, 0px)); }
.lunar img {
  position: relative;
  z-index: 2;
  height: 100%; width: auto;
  /* grade unificador: leve dessaturação + contraste + bloom de contraluz no topo */
  filter:
    brightness(var(--dim, 1)) saturate(.88) contrast(1.06)
    drop-shadow(-3px -4px 7px rgba(255,255,244,.20))
    drop-shadow(0 10px 14px rgba(10,10,14,.35));
}
/* sombra projetada (clone espelhado nos pés, achatado, direção do sol) */
.lunar img.cast-shadow {
  position: absolute;
  left: 0; top: 0;
  z-index: 1;
  transform-origin: 50% 100%;
  transform: scaleY(calc(var(--shl, .3) * -1)) skewX(58deg);
  filter: brightness(0) blur(2.5px);
  opacity: .4;
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, rgba(0,0,0,.9) 45%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 4%, rgba(0,0,0,.9) 45%, #000 100%);
}
.lunar::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%; bottom: -1vh;
  height: 2vh;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(10,10,14,.55), transparent 68%);
}
/* vinheta de primeiro plano: pedras desfocadas fecham os cantos */
.moonstage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    radial-gradient(42% 34% at 3% 103%, rgba(6,7,11,.78), transparent 68%),
    radial-gradient(34% 26% at 99% 102%, rgba(6,7,11,.62), transparent 64%),
    linear-gradient(180deg, transparent 82%, rgba(6,7,11,.30) 100%);
  filter: blur(6px);
}
@keyframes lunar-bob {
  0%,100% { transform: translateY(0) rotate(calc(var(--tilt, 0deg) - .8deg)) }
  50% { transform: translateY(-1.1vh) rotate(calc(var(--tilt, 0deg) + .9deg)) }
}
/* composição em 3 grupos, escala disciplinada por profundidade:
   fundo 8-10vh (sombra) · meio 13-17vh · frente 24-34vh */
.lu-poupercio { --x: 8%;  --b: 74%; --h: clamp(54px, 9vh, 108px); --t: 6.2s; --d: -2s; --dim: .75; --shl: .3; }
.lu-sabixao   { --x: 15%; --b: 48%; --h: clamp(88px, 15vh, 180px); --t: 5.4s; --d: -1s; --dim: .9; --shl: .3; }
.lu-nozes     { --x: 6%;  --b: 4%;  --h: clamp(78px, 13vh, 155px); --t: 6.6s; --d: -1.4s; --shl: .3; }
.lu-trovao    { --x: 27%; --b: 10%; --h: clamp(150px, 26vh, 310px); --t: 4.6s; --d: -.4s; --shl: .3; }
.lu-sapo      { --x: 52%; --b: 6%;  --h: clamp(200px, 34vh, 400px); --t: 5.8s; --d: -2.6s; z-index: 6; --shl: .3; }
/* pituco espia da borda de baixo do quadro, com a nozes do lado (dupla) */
.lunar-peek {
  position: absolute;
  height: clamp(130px, 22vh, 260px);
  bottom: -2vh;
  left: 14.5%;
  translate: -50% 0;
  z-index: 7;
  animation: ratito-peek 9s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.lunar-peek img { height: 100%; width: auto; filter: drop-shadow(0 10px 14px rgba(10,10,14,.4)); }
.lu-budinha   { --x: 66%; --b: 45%; --h: clamp(64px, 11vh, 130px); --t: 7s;  --d: -3s; --dim: .93; --shl: .3; }
.lu-pneu      { --x: 78%; --b: 52%; --h: clamp(82px, 14vh, 165px); --t: 5s;   --d: -1.6s; --dim: .9; --shl: .3; }
.lu-pipoca    { --x: 84%; --b: 8%;  --h: clamp(145px, 25vh, 300px); --t: 4.8s; --d: -2.2s; --shl: .3; }
.lu-regua     { --x: 92%; --b: 40%; --h: clamp(100px, 17vh, 200px); --t: 6s; --d: -.6s; --dim: .95; --shl: .3; }
.lu-malagueta { --x: 86%; --b: 70%; --h: clamp(56px, 9.5vh, 112px); --t: 5.2s; --d: -1.2s; --dim: .78; --shl: .3; }
.lu-bala      { --x: 38%; --b: 54%; --h: clamp(80px, 13.5vh, 160px); --t: 4.4s; --d: -.8s; --dim: .9; --shl: .3; }
.lu-zuzu      { --x: 41%; --b: 60%; --h: clamp(46px, 8vh, 100px); z-index: 2; --dim: .95; }
@keyframes ratito-peek {
  0%,100% { transform: translateY(26%) rotate(-2deg) }
  18%, 58% { transform: translateY(6%) rotate(1.5deg) }
  76% { transform: translateY(14%) rotate(-1deg) }
}
.lu-fly { animation: zuzu-fly 13s ease-in-out infinite; }
.lu-fly::after { display: none; }
@keyframes zuzu-fly {
  0%,100% { transform: translate(0,0) rotate(-4deg) }
  25% { transform: translate(-4vw,-2.5vh) rotate(3deg) }
  50% { transform: translate(-7vw,.5vh) rotate(-2deg) }
  75% { transform: translate(-3vw,-3.5vh) rotate(4deg) }
}

/* bandeira plantada */
.flagpole {
  display: none; /* a bandeira agora vive DENTRO da keyart */
  position: absolute;
  left: 58.5%;
  bottom: 54%;
  height: clamp(66px, 11vh, 132px);
  z-index: 5;
  flex-direction: column;
  align-items: flex-start;
}
.pole {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(#fafafa, #b9b9b2);
}
.flag {
  position: relative;
  margin-left: 3px;
  display: inline-flex;
  align-items: baseline;
  background: var(--laser);
  color: var(--ink);
  font-variation-settings: "wdth" 112;
  font-weight: 800;
  font-size: clamp(.8rem, 1.5vw, 1.15rem);
  letter-spacing: -0.03em;
  line-height: 1;              /* o alinhamento dos discos depende disso */
  padding: .38em .6em .42em;
  transform-origin: left center;
  animation: flag-wave 3.2s ease-in-out infinite;
}
@keyframes flag-wave {
  0%,100% { transform: skewY(0deg) }
  30% { transform: skewY(-3.4deg) }
  65% { transform: skewY(2.6deg) }
}
.flagpole::after {
  content: "";
  position: absolute;
  left: -8px; bottom: -1vh;
  width: 22px; height: 1.6vh;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(15,15,18,.4), transparent 72%);
}

.scroll-hint {
  position: absolute;
  bottom: 1.1rem; left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  color: rgba(240,240,240,.7);
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
  animation: hint-bob 1.6s ease-in-out infinite;
}
@keyframes hint-bob { 0%,100% { transform: translate(-50%,0) } 50% { transform: translate(-50%,7px) } }

@media (max-width: 760px) {
  /* os 13 continuam em cena, menores (mesmos 3 grupos) */
  .lu-poupercio { --x: 7%;  --b: 76%; --h: clamp(34px, 6vh, 66px); }
  .lu-sabixao   { --x: 14%; --b: 50%; --h: clamp(52px, 9.5vh, 105px); }
  .lu-nozes     { --x: 5%;  --b: 5%;  --h: clamp(48px, 8.5vh, 95px); }
  .lu-trovao    { --x: 26%; --b: 12%; --h: clamp(88px, 15.5vh, 170px); }
  .lu-bala      { --x: 37%; --b: 55%; --h: clamp(48px, 8.5vh, 95px); }
  .lu-sapo      { --x: 53%; --b: 7%;  --h: clamp(118px, 21vh, 230px); }
  .lu-budinha   { --x: 67%; --b: 51%; --h: clamp(34px, 6vh, 66px); }
  .lu-pneu      { --x: 77%; --b: 53%; --h: clamp(48px, 8.5vh, 95px); }
  .lu-pipoca    { --x: 84%; --b: 9%;  --h: clamp(82px, 14.5vh, 160px); }
  .lu-regua     { --x: 92%; --b: 42%; --h: clamp(56px, 10vh, 112px); }
  .lu-malagueta { --x: 86%; --b: 72%; --h: clamp(34px, 6vh, 66px); }
  .lu-zuzu      { --x: 44%; --b: 54%; --h: clamp(26px, 4.8vh, 55px); }
  .lunar-peek   { left: 15%; bottom: -1vh; height: clamp(78px, 14vh, 155px); }
  .flagpole   { display: none; }
  .earth { top: 24%; right: 12%; width: clamp(66px, 12vh, 120px); }
  .moonstage { height: clamp(320px, 56vh, 560px); }
  .hero-title { font-size: clamp(1.9rem, 9vw, 3rem); }
  .moon-far { top: 52%; --far-base: .13; transform: translate(-50%,-50%) scale(.13); }
  .moon-far-hint { top: calc(52% + clamp(130px, 20vh, 190px)); }
  .ground-plane { width: 480vw; background-size: 320vw auto; }
  .ground-ridge { background-size: 420vw auto; }
  .hero-sub { left: 6%; top: 33%; bottom: auto; }
}

/* ── narrativa sticky ──────────────────────────────────── */
.story {
  height: 420vh;
  background: var(--paper);
  color: var(--ink);
}

/* ── o mergulho da tese (rev. 09/08, pegada lusion.co) ─────────
   statement → celular sobe → engole a tela → palavras atravessam.
   a seção reusa .story só pelo id/nav; o visual é todo daqui. */
.dive {
  /* 430vh deixava uma tela morta no fim: a coreografia termina, o sticky
     solta e sobra ~1 viewport de rolagem em que as palavras já saíram por
     cima e o capítulo do Sapo ainda não entrou. 380vh encurta esse rabo
     (a coreografia continua com 2.500px de curso) e o .case sobe pra
     encostar — o título do Sapo entra enquanto as palavras saem. */
  height: 380vh;
  background: transparent;   /* o céu do cosmos é o fundo */
  color: var(--paper);
}
.dive-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.dive-intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 0 1.4rem 9svh;
  text-align: center;
  pointer-events: none;
  z-index: 3;
}
.dive-statement {
  font-family: var(--disp);
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: clamp(1.6rem, 4.1vw, 3.6rem);
  line-height: 1.06;
  max-width: min(94vw, 1240px);
  margin-inline: auto;
  letter-spacing: -.02em;
  text-shadow: 0 6px 40px rgba(0, 0, 6, .6);
}
.dive-statement em { font-style: normal; color: var(--laser); }
.dive-side {
  max-width: 34em;
  color: rgba(240, 240, 240, .78);
  font-size: clamp(.95rem, 1.5vw, 1.12rem);
  text-shadow: 0 2px 16px rgba(0, 0, 6, .6);
}
.dive-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  /* tela 16:9 — o filme é o Sapo astronauta no multiverso de vidro, que
     é widescreen (a moldura de celular cover-cropava 70% da largura) */
  width: min(58vw, 104svh, 980px);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, 50svh) translateY(-50%);
  border-radius: 22px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, .16);
  box-shadow: 0 30px 90px rgba(0, 0, 6, .65);
  background: #05070f;
  opacity: 0;
  z-index: 2;
  will-change: transform;
}
.dive-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dive-words {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(.5rem, 1.6vh, 1.1rem);
  width: min(76vw, 1120px);
  margin-inline: auto;
  pointer-events: none;
  z-index: 4;
  will-change: transform;
}
/* as palavras JUSTIFICADAS: cada linha é um par (sujeito · verbo) jogado
   pras duas bordas do bloco. o vão do meio é o efeito — é ele que faz a
   frase ocupar a tela inteira e o olho varrer de ponta a ponta. */
.dw-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  white-space: nowrap;
  font-family: var(--disp);
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: clamp(1.6rem, 5vw, 4.3rem);
  line-height: .98;
  letter-spacing: -.01em;
  color: #fff;
  opacity: 0;
  text-shadow: 0 4px 30px rgba(0, 0, 6, .55);
}
.dw-hero { color: var(--laser); }
/* reduced-motion: tableau parado, sem coreografia */
.dive-static { height: auto; }
.dive-static .dive-sticky { position: static; height: auto; padding: 14svh 0; }
.dive-static .dive-intro { position: static; padding: 0 1.4rem 3rem; }
.dive-static .dive-frame { position: static; transform: none; opacity: 1; margin: 0 auto; }
.dive-static .dive-words { display: none; }
@media (max-width: 760px) {
  .dive { height: 380vh; }
  .dive-frame { width: min(88vw, 420px); }
  .dw-line { font-size: clamp(1.5rem, 7.4vw, 2.6rem); }
}
/* no celular a tese custava 4,2 telas de rolagem pra 3 frases, e a última
   ainda saía deslizando por uma tela inteira de nada. 3 telas: uma por
   batida, e o corte pro capítulo do sapo cola. */
@media (max-width: 760px) {
  .story { height: 300vh; }
}
.story-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.beat {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.4rem;
  opacity: 0;
  transform: translateY(46px) scale(.97);
  transition: opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.beat.on { opacity: 1; transform: translateY(0) scale(1); }
.beat-title {
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: clamp(2.9rem, 9.5vw, 7.6rem);
  line-height: .9;
  letter-spacing: -0.025em;
}
.beat[data-beat="2"] .beat-title em {
  color: var(--ink);
  background: var(--laser);
  padding: 0 .12em;
  box-decoration-break: clone;
}
.beat-sub { margin-top: 1.3rem; opacity: .75; }
/* rev. 09/08 (dono trouxe o friso da banda andando): os stickers saíram
   — a ilustração da tese agora é O DESFILE. a banda do sapo marcha em
   loop pela base do palco durante os 3 beats: "Conteúdo passa" com
   personagens literalmente passando — e quando chega em "Personagem
   fica", eles AINDA estão ali, marchando. a tese se encena sozinha.
   3 sprites (bateria · trio · dupla — recortados do POSE-6-friso via
   rembg; os 6 sapos se sobrepõem, corte individual mutilava braço),
   cada grupo com gingado próprio = marcha viva. */
.parade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  overflow: hidden;
  pointer-events: none;
  /* nasce e morre no escuro, não na borda da tela */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.parade-track {
  display: flex;
  align-items: flex-end;
  width: max-content;
  /* eles olham pra ESQUERDA — a marcha vai pra lá */
  animation: parade-walk 52s linear infinite;
}
.parade-clone { display: contents; }
.parade-g {
  height: clamp(120px, 24vh, 230px);
  width: auto;
  margin-right: clamp(2.2rem, 7vw, 6rem);
  filter: drop-shadow(0 14px 26px rgba(0, 0, 6, .6));
  animation: parade-bob 1.05s ease-in-out infinite;
}
/* gaits diferentes por grupo: uníssono perfeito lê como esteira de
   fábrica, defasado lê como banda andando */
.parade-track :is(.parade-g:nth-child(2), .parade-clone .parade-g:nth-child(2)) {
  animation-duration: 1.22s; animation-delay: .18s;
}
.parade-track :is(.parade-g:nth-child(3), .parade-clone .parade-g:nth-child(3)) {
  animation-duration: .94s; animation-delay: .4s;
}
@keyframes parade-walk { to { transform: translateX(-50%); } }
@keyframes parade-bob {
  0%, 100% { transform: translateY(0) rotate(-.5deg); }
  50% { transform: translateY(-6px) rotate(.4deg); }
}
@media (max-width: 760px) { .parade-g { height: clamp(96px, 18vh, 150px); } }
@media (prefers-reduced-motion: reduce) {
  .parade-track, .parade-g { animation: none; }
}

/* fase da lua = progresso da tese */
.moonphase {
  position: absolute;
  top: clamp(5.2rem, 10vh, 6.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--ink);
  overflow: hidden;
  border: 2.5px solid var(--ink);
}
.moonphase-disc {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--laser);
  transform: translateX(calc(-100% + var(--phase, 0) * 100%));
  transition: transform .2s linear;
}

/* ── case (ink) ────────────────────────────────────────── */
.case {
  /* o capítulo do Sapo começa NO ponto em que a tese solta o sticky: a
     última tela da tese era só rolagem morta (palavras paradas sobre a
     poeira). o limite é geométrico: uma seção fica VISÍVEL uma tela antes
     do seu topo, então só dá pra puxar o Sapo até onde as palavras já
     saíram — daí a coreografia inteira foi antecipada. -17vh é o máximo
     sem sobreposição (medido). */
  margin-top: -66vh;
  --tornc: var(--ink);
  background: var(--ink);
  color: var(--paper);
  padding: clamp(5rem, 12vh, 8rem) 1.4rem clamp(4rem, 9vh, 7rem);
  text-align: center;
}
.case .chapter { color: var(--laser); border-color: var(--laser); }
.case .lead { margin-inline: auto; }

/* ── cap.01 os trabalhos: o portfólio de verdade ─────────────
   três filmes REAIS em loop mudo (o áudio mora nas redes; aqui o
   trabalho se apresenta sozinho) + a fileira de marcas. no céu do
   cosmos, mesma luz das seções vizinhas. */
.folio {
  color: var(--paper);
  padding: clamp(5rem, 12vh, 8rem) 1.4rem clamp(4rem, 9vh, 7rem);
  text-align: center;
}
.folio .chapter { color: var(--laser); border-color: var(--laser); }
.folio .lead { margin-inline: auto; }
/* esta manchete é uma FRASE (8 palavras), não um grito de 4 — no corpo
   das outras ela virava um bloco de 5 linhas. corpo menor + medida mais
   larga = 2 linhas, o mesmo ritmo visual das vizinhas. */
.folio .h2 {
  font-size: clamp(1.7rem, 4vw, 3.2rem);
  line-height: 1.0;
  max-width: min(94vw, 1180px);
  margin-inline: auto;
  text-wrap: balance;
}
.folio-grid {
  /* altura manda: os três quadros dividem a MESMA altura e cada um tira
     a largura do próprio aspecto (16:9 + 9:16 + 9:16 ≈ 2,9×altura) —
     nada de cover cortando o vertical pra caber na fileira */
  --fh: min(52vh, 23vw, 500px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(.8rem, 1.6vw, 1.4rem);
  margin: clamp(1.8rem, 4.5vh, 3.2rem) auto 0;
}
.folio-card { height: var(--fh); }
.folio-wide { aspect-ratio: 16 / 9; }
.folio-tall { aspect-ratio: 9 / 16; }
.folio-card {
  position: relative;
  margin: 0;
  border-radius: 18px;
  border: 1.5px solid rgba(255, 255, 255, .13);
  background: #0a0e1c;
  box-shadow: 0 22px 60px rgba(0, 0, 6, .55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.folio-card video {
  width: 100%;
  height: 100%;
  flex: 1;
  object-fit: cover;
  display: block;
  background: #05070f;
}
.folio-card figcaption {
  position: absolute;
  left: .55rem; right: .55rem; bottom: .55rem;
  padding: .4rem .55rem;
  border-radius: 10px;
  background: rgba(5, 7, 15, .72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: clamp(.5rem, .95vw, .68rem);
  line-height: 1.5;
  color: rgba(240, 240, 240, .88);
}
/* ── a esteira de episódios do elenco ────────────────────────
   os trechos dos universos PASSANDO em loop contínuo: duas metades
   idênticas e translateX(-50%) — a emenda é invisível porque a segunda
   metade é clone da primeira (display:contents pra não quebrar a fila). */
.film-strip {
  --fg: clamp(.7rem, 1.4vw, 1.1rem);
  width: 100vw;
  margin: clamp(1.6rem, 4vh, 2.8rem) calc(50% - 50vw) 0;
  overflow: hidden;
  /* fade lateral: a esteira nasce e morre no escuro, não na borda */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.film-track {
  display: flex;
  width: max-content;
  animation: film-roll 55s linear infinite;
}
.film-strip:hover .film-track { animation-play-state: paused; }
.film-clone { display: contents; }
@keyframes film-roll { to { transform: translateX(-50%); } }
.film-card {
  position: relative;
  margin: 0 var(--fg) 0 0;
  height: clamp(200px, 34vh, 320px);
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, .13);
  background: #0a0e1c;
  overflow: hidden;
  flex: 0 0 auto;
}
.film-card:nth-child(odd) { transform: rotate(-.7deg); }
.film-card:nth-child(even) { transform: rotate(.6deg); }
.film-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-card figcaption {
  position: absolute;
  left: .45rem; right: .45rem; bottom: .45rem;
  padding: .32rem .45rem;
  border-radius: 8px;
  background: rgba(5, 7, 15, .72);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: clamp(.46rem, .8vw, .58rem);
  line-height: 1.45;
  color: rgba(240, 240, 240, .85);
}
@media (max-width: 760px) {
  .film-card { height: clamp(160px, 42vw, 220px); }
}
@media (prefers-reduced-motion: reduce) {
  .film-track { animation: none; }
  .film-strip { overflow-x: auto; }
}

/* rev. 07/08 ("quantidade de informação bizarra"): um widget de cada
   vez. enquanto o tubo coleta poeira, o botão nem existe na tela — ele
   só nasce quando a poeira transborda e a trava cai. os outros cortes
   da mesma rodada: HUD orbital, chips de seção, foguete e o letreiro
   "nossos universos" saíram do HTML — a pílula é o único "onde estou". */
#bang-btn:not(.is-armed) { display: none; }

.folio-brands { margin-top: clamp(2rem, 5vh, 3.4rem); }
.folio-brands-label { color: rgba(240, 240, 240, .5); }
/* a fila de marcas é um LETREIRO: sangra a largura toda da tela, desliza
   sem parar e some nas bordas por máscara (nada de corte seco). o par
   "duas metades idênticas + translateX(-50%)" é o mesmo do ticker. */
.brand-marquee {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: .9rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.folio-brand-row {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;          /* quebrar a linha destruiria o loop */
  align-items: baseline;
  width: max-content;
  /* ⚠️ o espaçamento NÃO pode ser `gap`: com 10 itens a largura é
     soma + 9·gap, e translateX(-50%) anda soma/2 + 4,5·gap — meio gap a
     menos que o módulo que se repete (soma/2 + 5·gap). O letreiro daria
     um salto a cada volta. Com o respiro DENTRO do item, cada metade é
     exatamente o módulo e a emenda some. */
  gap: 0;
  animation: brand-run 120s linear infinite;
}
/* a marca que o olho pegou fica parada enquanto o mouse está em cima */
.brand-marquee:hover .folio-brand-row { animation-play-state: paused; }
@keyframes brand-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .folio-brand-row { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; }
  .folio-brand-row li[aria-hidden="true"] { display: none; }
}
.folio-brand-row li {
  padding-inline-end: clamp(1.4rem, 4vw, 3rem);
  white-space: nowrap;
  font-family: var(--disp);
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: clamp(1.15rem, 2.5vw, 1.9rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(240, 240, 240, .42);
  white-space: nowrap;
}
@media (max-width: 760px) {
  /* no celular o reel vira esteira com snap — mesma gramática das
     esteiras do elenco */
  .folio-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .6rem;
  }
  /* stretch (do desktop) esticava o 16:9 pra altura dos verticais e o
     comercial virava um retrato cortado — na esteira, cada quadro fica
     com a altura do próprio aspecto, alinhados pelo centro */
  .folio-grid { --fh: min(58vh, 118vw); align-items: center; }
  .folio-wide, .folio-tall { flex: 0 0 auto; scroll-snap-align: center; height: auto; }
  .folio-wide { width: min(86vw, 480px); }
  .folio-tall { width: min(58vw, 270px); }
}

.case-board {
  position: relative;
  width: min(980px, 94vw, 100%);   /* mesmo caso do .uni-grid: 94vw estoura
                                      a caixa de conteúdo em tela estreita */
  margin: clamp(2.5rem, 6vh, 4.5rem) auto 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(-1rem, 1vw, 2rem);
}
.polaroid {
  background: var(--paper);
  color: var(--ink);
  padding: .55rem .55rem .8rem;
  border-radius: 6px;
  box-shadow: 0 18px 45px rgba(0,0,0,.5);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.polaroid img { border-radius: 3px; }
.polaroid figcaption { margin-top: .55rem; }
.p-main { width: min(340px, 44vw); transform: rotate(-3deg); z-index: 2; }
.p-ad   { width: min(300px, 40vw); transform: rotate(2.2deg) translateY(-16px); }
.p-ig   { width: min(230px, 34vw); transform: rotate(5deg) translateY(10px); }
.polaroid:hover { transform: rotate(0deg) translateY(-10px) scale(1.03); z-index: 5; }
@media (max-width: 760px) {
  /* duas polaroides lado a lado (a terceira sai); o board vira uma dupla
     e não uma pilha — três em 390px viravam selo de correio */
  .case-board { flex-wrap: nowrap; gap: .7rem; align-items: flex-end; }
  .p-main { width: 46vw; transform: rotate(-3deg); }
  .p-ad { width: 42vw; transform: rotate(2.2deg) translateY(-10px); }
  .p-ig { display: none; }
  /* o selo fica na quina de cima do quadro, como adesivo — só menor,
     senão engolia metade da polaroide numa tela de 390 */
  .burst {
    top: -26px;
    left: -6px;
    width: clamp(88px, 26vw, 108px);
    font-size: .72rem;
  }
}

.burst {
  position: absolute;
  top: -34px; left: max(-14px, 1vw);
  width: clamp(110px, 14vw, 150px);
  aspect-ratio: 1;
  background: var(--red);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--px);
  font-size: clamp(.8rem, 1.4vw, 1rem);
  line-height: 1.15;
  clip-path: polygon(50% 0%, 59% 12%, 72% 5%, 75% 19%, 90% 18%, 87% 32%, 100% 38%, 91% 50%, 100% 62%, 87% 68%, 90% 82%, 75% 81%, 72% 95%, 59% 88%, 50% 100%, 41% 88%, 28% 95%, 25% 81%, 10% 82%, 13% 68%, 0% 62%, 9% 50%, 0% 38%, 13% 32%, 10% 18%, 25% 19%, 28% 5%, 41% 12%);
  animation: burst-wobble 7s ease-in-out infinite;
  z-index: 6;
}
@keyframes burst-wobble {
  0%, 100% { transform: rotate(-2.5deg) scale(1); }
  50% { transform: rotate(2.5deg) scale(1.03); }
}

.stats {
  display: flex;
  justify-content: center;
  gap: clamp(1.6rem, 6vw, 4.5rem);
  margin-top: clamp(2.6rem, 6vh, 4rem);
  flex-wrap: wrap;
}
/* no celular os três números embrulhavam 2+1 e o "TV" ficava sozinho no
   meio da linha de baixo. três colunas fixas, número menor: o trio lê
   como um placar, que é o que ele é. */
@media (max-width: 760px) {
  /* o vão entre o placar e o letreiro era de quase uma tela */
  .case { padding-bottom: clamp(1.6rem, 4vh, 2.6rem); }
}

/* desktop: o case inteiro cabe numa tela (tudo escala com a altura) */
@media (min-width: 1000px) {
  .case { padding: clamp(2.6rem, 6vh, 4.6rem) 1.4rem clamp(2rem, 4.4vh, 3.6rem); }
  .case .chapter { margin-bottom: clamp(.7rem, 1.6vh, 1.6rem); }
  .case .h2 { font-size: min(5.6rem, 7.2vw, 7vh); }
  .case .lead { margin-top: .8rem; max-width: 46em; }
  .case-board { margin-top: clamp(1.2rem, 3vh, 2.6rem); }
  .p-main { width: min(340px, 44vw, 29vh); }
  .p-ad   { width: min(300px, 40vw, 25.5vh); }
  .p-ig   { width: min(268px, 36vw, 22.3vh); }
  .stats { margin-top: clamp(1.4rem, 3.4vh, 3rem); }
  .stat strong { font-size: min(4.6rem, 6.5vw, 6vh); }
}
.stat strong {
  display: block;
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: clamp(2.6rem, 6.5vw, 4.6rem);
  line-height: 1;
  color: var(--laser);
}
.stat .px { opacity: .7; }

/* ── ticker ────────────────────────────────────────────── */
.ticker {
  background: var(--laser);
  color: var(--ink);
  transform: rotate(-1.6deg) scale(1.02);
  overflow: hidden;
  border-block: 3px solid var(--ink);
  position: relative;
  z-index: 4;
  margin-block: -1.2rem;
}
.ticker-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: ticker-run 16s linear infinite;
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  padding: .5rem 0;
}
@keyframes ticker-run { to { transform: translateX(-50%) } }

/* ── as provas dentro do fecho vermelho ──
   antes eram três blocos gigantes de citação, um por tela: muito papel
   sobre vermelho e quatro rolagens de prova antes da oferta. agora é UM
   instrumento — o número manda, a frase explica, a fonte assina — e as
   provas se revezam nele sozinhas. */
/* o trilho: a seção inteira pendura na MESMA coluna do painel de provas.
   antes eram oito bordas-esquerda diferentes — painel alinhado à esquerda
   dentro de um campo centralizado, com display centralizado em cima e
   embaixo. o bloco segue centrado no viewport (a mariposa depende disso);
   o que virou ranged-left é o texto. */
.cta-col {
  width: min(var(--col), 100%);
  margin-inline: auto;
}
/* o tubo do big bang é fixo no canto inferior-esquerdo e é dono da faixa dos
   primeiros ~80px. esta coluna é CENTRADA: em janela estreita a borda esquerda
   dela caía embaixo do vidro e o manifesto — e o "fim das provas" — ficavam
   atrás do tubo. reservo a faixa dos dois lados, senão a coluna sai do centro.
   acima de ~1048px o min() nem morde, porque as 53rem já cabem com folga; e o
   celular fica fora porque lá o dock é outro (tubo de 30×72 em fileira). */
@media (min-width: 761px) {
  .cta-col { width: min(var(--col), calc(100vw - 12.5rem)); }
}
/* quebras de linha que só existem no celular */
.brk-m { display: none; }

.cta-col .chapter {
  border-color: var(--hair);
  color: var(--ink);
  opacity: 1;                  /* ink cheio sobre vermelho = 5,35:1 */
  font-size: var(--t-tag);
  margin-bottom: 1.5rem;
}
.proof-lede {
  width: 100%;
  margin: 0;
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: var(--t-deck);
  line-height: .95;
  letter-spacing: -.025em;
}
.proof-lede em {
  color: var(--ink);
  background: var(--laser);
  padding: .02em .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ── cap. 04: o teatro da prova ─────────────────────────────
   o painel fica preso na tela e as três provas passam com o scroll — uma por
   terço de rolagem — só então a página libera pra oferta. a classe vem do JS
   (proof.js): sem script, ou com movimento reduzido, o wrapper não faz nada e
   o painel segue no fluxo normal.
   ───────────────────────────────────────────────────────── */
.cta.js-proof .proof-theater { height: 300vh; }
.cta.js-proof .proof-stage {
  position: sticky;
  /* o palco tem a altura do CONTEÚDO, não da tela. com 100svh + conteúdo
     centralizado sobrava meia tela de ar acima da cartela e a outra metade
     virava um vão morto entre o painel e o manifesto quando o teatro acabava
     (306px e 348px medidos numa janela de 915px). preso só pelo `top`, o
     painel encosta no começo do teatro na entrada, fica parado na mesma
     altura durante as três provas, e no fim o manifesto vem logo embaixo
     dele.
     o `top` é pequeno de propósito: o bloco tem que parar quase onde já
     estava quando a seção entrou (o padding-top da .cta dá ~82px), pra o pin
     engatar sem salto e a composição continuar colada no alto. centrado na
     tela — que foi minha primeira tentativa — ele congelava no meio de um
     campo vermelho, com a borda rasgada já fora de cena. */
  top: clamp(5rem, 11vh, 7.5rem);
}

.proof {
  width: 100%;
  margin: clamp(1.5rem, 4vh, 2.4rem) 0 0;
  background: var(--ink-deep);
  color: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow);
  text-align: left;
  overflow: hidden;
}
/* as telas moram na MESMA célula: a caixa cresce até a prova mais alta
   e nenhuma troca faz o painel pular de altura */
.proof-screen { display: grid; }
.proof-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1.1rem, 3vw, 2.4rem);
  padding: clamp(1.5rem, 3.2vw, 2.4rem) clamp(1.5rem, 3.2vw, 2.4rem) clamp(1.1rem, 2.2vw, 1.6rem);
  transition: opacity .42s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}
.proof-slide:not(.is-on) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
}
.proof-fig {
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: clamp(2.8rem, 6.2vw, 4.7rem);
  line-height: .84;
  letter-spacing: -.045em;
  color: var(--laser);
  white-space: nowrap;
}
.proof-fig b { font-weight: 900; font-size: .52em; }
.proof-fig-q {
  font-size: clamp(4.4rem, 10vw, 7.6rem);
  line-height: 1;
  height: .52em;          /* a aspa é alta e vazia embaixo: corta o vão */
  letter-spacing: 0;
}
.proof-claim {
  font-variation-settings: "wdth" 108;
  font-weight: 700;
  font-size: clamp(1.02rem, 2vw, 1.5rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.proof-claim em { color: var(--laser); }
.proof-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.proof-src {
  margin-top: .85rem;
  opacity: .58;
  font-size: clamp(.64rem, .95vw, .76rem);
  line-height: 1.5;
  max-width: 42em;
}
/* a régua tripla: paginação e relógio ao mesmo tempo */
.proof-rail {
  display: flex;
  gap: .45rem;
  padding: 0 clamp(1.5rem, 3.2vw, 2.4rem) clamp(1.1rem, 2.2vw, 1.5rem);
}
.proof-tick {
  flex: 1;
  height: 18px;
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.proof-tick i {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(240, 240, 240, .16);
  overflow: hidden;
  transition: background .25s ease;
}
.proof-tick:hover i { background: rgba(240, 240, 240, .3); }
.proof-tick b { display: block; height: 100%; width: 0; background: var(--laser); }
.proof-tick:focus-visible { outline: 2px solid var(--laser); outline-offset: 3px; border-radius: 4px; }

/* a assinatura: era manchete de 46px brigando com o título logo abaixo —
   três manchetes de tamanhos vizinhos lêem como erro. virou colofão. */
.cta-manifesto {
  width: 100%;
  margin: clamp(2.2rem, 6vh, 3.4rem) 0 0;
  font-variation-settings: "wdth" 100;
  font-weight: 600;
  font-size: var(--t-line);
  line-height: 1.3;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.cta-manifesto em {
  color: var(--ink);
  box-shadow: inset 0 -.34em 0 var(--laser);   /* marca-texto fino */
}

/* a régua da virada: 1,5px ink — a MESMA espessura da borda da pílula
   que abre este capítulo. sem laser, sem toco de progresso: é régua
   editorial, não relógio disfarçado. o ombro direito abre a porta. */
.cta-rule {
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 1.4vw, .9rem);
  margin: 1.05rem 0 clamp(2.6rem, 7vh, 3.9rem);   /* o maior vão da seção */
}
.cta-rule i { flex: 1; height: 1.5px; background: var(--hair); }
.cta-rule-tag,
.cta-rule-mail {
  font-size: var(--t-tag);
  color: var(--ink);
  white-space: nowrap;
}
.cta-rule-mail {
  border-bottom: 1.5px solid var(--hair);
  padding-bottom: .15em;
  transition: color .18s ease, border-color .18s ease;
}
.cta-rule-mail:hover { color: #ee815b; border-color: #ee815b; }
.cta-rule-mail:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 760px) {
  .proof-slide { grid-template-columns: 1fr; gap: .5rem; }
  .proof-claim { font-size: clamp(1rem, 4.4vw, 1.25rem); }
  /* o número do painel gritava mais alto que a própria oferta:
     58px contra um título de 33. agora ele cabe embaixo dela. */
  .proof-fig { font-size: clamp(1.85rem, 7.8vw, 2.7rem); }
  .proof-fig-q { font-size: 3.05rem; height: .5em; }
  .cta-rule { gap: .55rem; }
}

/* ── elenco (papel) ────────────────────────────────────── */
.cast {
  --casttop: #0a0b13;
  --castbot: #0d0e19;
  background:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(240,240,240,.75) 48%, transparent 52%),
    radial-gradient(1.2px 1.2px at 31% 64%, rgba(240,240,240,.5) 48%, transparent 52%),
    radial-gradient(1.8px 1.8px at 47% 28%, rgba(240,240,240,.65) 48%, transparent 52%),
    radial-gradient(1.1px 1.1px at 63% 71%, rgba(240,240,240,.45) 48%, transparent 52%),
    radial-gradient(1.7px 1.7px at 78% 12%, rgba(240,240,240,.7) 48%, transparent 52%),
    radial-gradient(1.2px 1.2px at 88% 49%, rgba(240,240,240,.5) 48%, transparent 52%),
    radial-gradient(1.4px 1.4px at 22% 87%, rgba(240,240,240,.4) 48%, transparent 52%),
    radial-gradient(1.5px 1.5px at 71% 90%, rgba(240,240,240,.45) 48%, transparent 52%),
    radial-gradient(120% 90% at 50% -10%, #131527 0%, var(--casttop) 46%, var(--castbot) 100%);
  color: var(--paper);
  padding: clamp(4rem, 9vh, 6.5rem) 1.4rem clamp(3.5rem, 8vh, 5.5rem);
  text-align: center;
}
/* as manchetes do site são todas de DOIS níveis (linha branca + linha
   laser) numa medida curta; esta cabia numa linha só e ia de borda a
   borda — fora do padrão. a medida força os dois níveis. */
.cast .h2 { max-width: 16ch; margin-inline: auto; }
.cast .lead { margin-inline: auto; }
.cast .lead .px { opacity: .6; }

/* ── nossos universos: letreiro + mural de pôsteres ────── */
.uni-marquee {
  overflow: hidden;
  margin: clamp(2rem, 4.5vh, 3.2rem) -1.4rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.uni-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: uni-run 34s linear infinite;
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(240,240,240,.42);
  paint-order: stroke;
}
@keyframes uni-run { to { transform: translateX(-50%) } }

.uni-grid {
  /* o `100%` é o que segura a simetria: a seção já tem 1,4rem de padding,
     então 94vw é MAIS LARGO que a caixa de conteúdo em tela estreita — a
     margem automática zerava e o grid vazava tudo pro lado direito
     (22,4px de margem à esquerda contra 1px à direita, medido a 390) */
  width: min(1100px, 94vw, 100%);
  margin: clamp(1.6rem, 4vh, 2.6rem) auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.9rem, 1.6vw, 1.3rem);
  text-align: left;
}
.uni-card {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: 8px;
  padding: .45rem .45rem .7rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.uni-card:nth-child(2) { --tilt: -1deg; }
.uni-card:nth-child(3) { --tilt: .8deg; }
.uni-card:nth-child(4) { --tilt: -.6deg; }
.uni-card:nth-child(5) { --tilt: 1.1deg; }
.uni-card:nth-child(6) { --tilt: -1.1deg; }
.uni-card:nth-child(7) { --tilt: .7deg; }
.uni-card:nth-child(8) { --tilt: -.8deg; }
.uni-card:nth-child(9) { --tilt: 1deg; }
.uni-card:hover {
  transform: rotate(0deg) translateY(-7px) scale(1.015);
  box-shadow: 0 20px 48px rgba(0,0,0,.62);
  z-index: 3;
}
.uni-fig {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4 / 5;
  background: var(--ink-deep);
}
.uni-fig img, .uni-fig video {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.uni-card:hover :is(.uni-fig img, .uni-fig video) { transform: scale(1.045); }
.uni-feat { grid-column: 1 / -1; --tilt: -.4deg; }
.uni-feat .uni-fig { aspect-ratio: 1376 / 600; }
.uni-feat .uni-fig :is(img, video) { object-position: 50% 38%; }
.uni-flag {
  position: absolute;
  top: 16px; left: -8px;
  z-index: 2;
  background: var(--laser);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  padding: .3em .7em .36em;
  font-size: clamp(.72rem, 1vw, .88rem);
  transform: rotate(-2.4deg);
  box-shadow: .24rem .28rem 0 rgba(0,0,0,.75);
}
.uni-line {
  position: absolute;
  left: .6rem; right: .6rem; bottom: .6rem;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  padding: .45rem .6rem .5rem;
  box-shadow: .28rem .34rem 0 rgba(0,0,0,.8);
  opacity: 0;
  transform: translateY(10px) rotate(-.5deg);
  transition: opacity .3s ease, transform .38s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
/* PS2P: mesmo com o size-adjust a de apoio corre ~45% mais larga que a
   Pixelify, e este chip é estreito (~80-120px). Palavra comprida
   ("literalmente", "profissional") passava a caixa — daí o corpo menor,
   a entrelinha maior e a quebra liberada. */
.uni-line {
  font-size: clamp(.58rem, 1.05vw, .72rem);
  line-height: 1.5;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.uni-card:hover .uni-line { opacity: 1; transform: translateY(0) rotate(-.5deg); }
@media (hover: none) { .uni-line { display: none; } }
.uni-info { margin-top: .6rem; padding-inline: .25rem; }
.uni-info h3 {
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  display: flex;
  align-items: flex-start;
}
.uni-mat {
  width: .5em; height: .5em;
  flex: none;
  background: var(--mat, var(--laser));
  border: 1.6px solid var(--ink);
  margin-top: .28em;
  margin-right: .45em;
  transform: rotate(-4deg);
}
.uni-tags { margin-top: .24rem; opacity: .58; font-size: clamp(.72rem, .95vw, .84rem); }
.cast .px { font-variant-ligatures: none; }
.uni-desc {
  margin-top: .4rem;
  font-weight: 500;
  font-size: clamp(.9rem, 1.3vw, 1rem);
  max-width: 44em;
}
.uni-ghost {
  grid-column: 1 / -1;
  background: transparent;
  color: var(--paper);
  border: 2.5px dashed rgba(240,240,240,.42);
  box-shadow: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .5rem 1.1rem;
  padding: .9rem 1.2rem 1rem;
  min-height: 0;
}
.uni-ghost .uni-q {
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  line-height: 1;
  color: var(--laser);
  text-shadow: 0 0 28px rgba(214,255,0,.35);
}
.uni-ghost h3 {
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  letter-spacing: -0.02em;
}
.uni-ghost .uni-tags { opacity: .6; margin-top: 0; }
.uni-ghost-btn { margin-top: 0; font-size: .88rem; padding: .5em 1.1em .55em; }
.uni-ghost:hover {
  transform: translateY(-4px);
  border-color: var(--laser);
  background: rgba(214,255,0,.05);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

@media (max-width: 980px) {
  .uni-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .uni-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .uni-card { padding: .38rem .38rem .6rem; border-radius: 7px; }
  .uni-card:nth-child(n) { --tilt: 0deg; }
  .uni-card:nth-child(odd) { --tilt: -.5deg; }
  .uni-card:nth-child(even) { --tilt: .5deg; }
  .uni-feat { --tilt: 0deg; }
  .uni-feat .uni-fig { aspect-ratio: 1376 / 760; }
  .uni-info { margin-top: .5rem; padding-inline: .12rem; }
  .uni-info h3 { font-size: .96rem; }
  .uni-tags { font-size: .66rem; letter-spacing: 0; }
  .uni-desc { font-size: .88rem; }
  .uni-ghost { padding: 1rem .9rem 1.1rem; }
  .uni-marquee { margin-top: 1.8rem; }
  .uni-track { font-size: clamp(1.9rem, 8.5vw, 2.4rem); -webkit-text-stroke-width: 1.1px; }
}

/* o elenco em DOCK: fila no palco; quem recebe o mouse cresce,
   os vizinhos crescem junto (falloff por distância, estilo dock de mac) */
.dock-wrap {
  --dockh: clamp(8rem, 18vw, 19rem);
  margin: clamp(5.5rem, 13vh, 9.5rem) auto 0;
  width: min(1560px, 97vw);
}
.dock {
  list-style: none;
  margin: 0; padding: 0 .5rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(.45rem, 1.1vw, 1rem);
  /* sem headroom: a magnificação TRANSBORDA por cima da fileira de cima */
  height: calc(var(--dockh) * 1.05);
}
.dock-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  outline: none;
  z-index: 1;
}
.dock-item.is-active { z-index: 6; }
.dock-fig {
  position: relative;
  display: block;
  height: calc(var(--dockh) * var(--m, 1));
  transition: height .5s cubic-bezier(.16, 1, .3, 1);
  cursor: pointer;
}
.dock-fig img {
  display: block;
  height: 100%; width: auto;
  filter: drop-shadow(0 4px 10px rgba(25,25,25,.22));
  transition: filter .5s cubic-bezier(.16, 1, .3, 1);
}
.dock-item.is-active .dock-fig img,
.dock-item:hover .dock-fig img {
  filter: drop-shadow(0 9px 18px rgba(25,25,25,.3));
}
/* a marquinha de palco sob os pés — na cor do personagem */
.dock-fig::after {
  content: '';
  position: absolute;
  left: 6%; right: 6%; bottom: -11px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, var(--mat, var(--laser)) 0 42%, transparent 74%);
  opacity: .55;
  transition: opacity .3s;
}
.dock-item.is-active .dock-fig::after { opacity: .95; }
.dock-row2 { margin-top: clamp(1.8rem, 4vh, 3rem); }

.dock-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  padding: .5rem .75rem .55rem;
  box-shadow: .32rem .4rem 0 rgba(0,0,0,.85);
  white-space: nowrap;
  text-align: center;
  transition: opacity .3s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.dock-tip strong {
  display: inline-block;
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  background: var(--mat, var(--laser));
  padding: .02em .32em .06em;
  transform: rotate(-1deg);
}
.dock-tip .px {
  display: block;
  margin-top: .38rem;
  font-size: .62rem;
  opacity: .68;
}
.dock-item.is-active .dock-tip,
.dock-item:hover .dock-tip,
.dock-item:focus-visible .dock-tip {
  opacity: 1;
  transform: translate(-50%, 0);
}
.dock-item:focus-visible .dock-fig img { outline: 2.5px dashed var(--ink); outline-offset: 4px; }

.dock-name { display: none; }
.dock-shelf {
  height: 3px;
  background: var(--ink);
  border-radius: 2px;
  width: 100%;
  margin: 2px auto 0;
}
.dock-hint { margin-top: 1rem; opacity: .5; }
.dock-hint-mob { display: none; }

/* touch / telas estreitas: vira uma fila que desliza, com nome embaixo */
@media (hover: none), (max-width: 760px) {
  .dock {
    justify-content: flex-start;
    overflow-x: auto;
    height: auto;
    padding: .4rem .9rem .2rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* a linha do palco vive DENTRO da fila e rola junto (sob os pés) */
    background: linear-gradient(var(--ink), var(--ink)) 0 calc(.4rem + clamp(5.5rem, 24vw, 7.5rem) + 5px) / 100% 3px no-repeat local;
  }
  .dock::-webkit-scrollbar { display: none; }
  .dock-item { scroll-snap-align: center; flex: 0 0 auto; }
  .dock-fig { height: clamp(5.5rem, 24vw, 7.5rem); }
  .dock-shelf { display: none; }
  .dock-row2 { margin-top: .9rem; }
  .dock-tip { display: none; }
  .dock-name {
    display: block;
    margin-top: .55rem;
    font-size: .58rem;
    opacity: .7;
    background: var(--mat, var(--laser));
    padding: .12em .45em .2em;
    border-radius: 4px;
  }
  .dock-hint-desk { display: none; }
  .dock-hint-mob { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .dock-fig, .dock-tip { transition: none; }
}
.cast-note { margin-top: 2.6rem; opacity: .65; }

/* ── como funciona: a metamorfose (noite full-bleed) ───── */
.how {
  --tornc: #07080e;
  background: #0b0c12;
  color: var(--paper);
  padding: clamp(5rem, 12vh, 8rem) 1.4rem clamp(4.5rem, 10vh, 7rem);
  text-align: center;
}
.how .chapter { color: var(--blue); border-color: var(--blue); }
.how-sticky { background: linear-gradient(180deg, #07080e 0%, #0c0d14 46%, #12131b 100%); }

/* o céu é a seção inteira: o svg vira fundo do bloco todo */
#meta-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.how .how-head, .how .steps, .how .how-note, .how .how-stage {
  position: relative;
  z-index: 1;
}

/* palco (base, sem JS: espaçador do tableau + legenda) */
.how-stage {
  width: min(1100px, 94vw);
  margin: clamp(2rem, 5vh, 3.2rem) auto 0;
  aspect-ratio: 1600 / 900;
  max-height: 56vh;
}
.stage-cap {
  position: absolute;
  left: clamp(.6rem, 1.6vw, 1.4rem);
  bottom: .4rem;
  /* rev 09/08: a .5 sobre o céu estrelado a legenda sumia — as estrelas
     passavam POR DENTRO das letras. sombra de contato + opacidade maior
     devolvem a leitura sem ela virar protagonista. */
  opacity: .72;
  text-shadow: 0 1px 10px rgba(2, 4, 12, .95), 0 0 22px rgba(2, 4, 12, .8);
  pointer-events: none;
  text-align: left;
}
/* as estrelas do SVG deste capítulo SAEM: são círculos de borda dura e
   tamanho uniforme, que ao lado da poeira macia do site leem como
   bolinhas coladas na tela — não como céu. O céu aqui já é o do site
   inteiro (o canvas passa por baixo), então elas eram redundantes. */
/* ⚠️ o seletor certo é `#meta-svg .st`, não `.how-stage .st`: as estrelas
   moram no SVG, que é IRMÃO do palco, não filho. Com o seletor errado a
   regra nunca casou e as bolinhas continuaram na tela. */
#meta-svg .st { display: none; }
@keyframes st-tw { 50% { opacity: .12; } }
.mant { fill: none; stroke: #b7d20e; stroke-width: 2.4; stroke-linecap: round; }

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.2vw, 1.8rem);
  width: min(1080px, 94vw);
  margin: clamp(2.6rem, 6vh, 4rem) auto 0;
  text-align: left;
}
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step {
  border: 2px solid rgba(240,240,240,.28);
  border-radius: 14px;
  padding: 1.2rem 1.2rem 1.4rem;
  background: var(--ink-deep);
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease,
              opacity .35s ease, box-shadow .35s ease;
}
.step:hover { transform: translateY(-6px) rotate(-.6deg); border-color: var(--laser); }
.step-head { display: flex; align-items: center; gap: .55rem; }
.step-ic {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .85;
}
.step-n { color: var(--laser); }
.step h3 {
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  margin: .35rem 0 .45rem;
}
.step p { font-size: .98rem; line-height: 1.45; opacity: .78; }
.how-note { margin-top: 2.4rem; color: var(--laser); opacity: .95; }

/* modo teatro (com JS): a seção vira scroll-theater de 4 atos */
.how.js-theater { height: 460vh; padding: 0 0 0; }
.how.js-theater .how-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.7rem, 1.4vh, 1.2rem);
  padding: clamp(4.6rem, 9vh, 6rem) 1.4rem clamp(1.6rem, 3.4vh, 3.2rem);
  overflow: hidden;
}
.how.js-theater .how-head .chapter { margin-bottom: .7rem; }
.how.js-theater .how-head .h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  /* legível mesmo com a lua cheia passando atrás */
  text-shadow: 0 3px 26px rgba(7,8,14,.9), 0 1px 5px rgba(7,8,14,.65);
}
.how.js-theater .how-stage {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  aspect-ratio: auto;
  max-height: none;
}
/* no teatro a legenda mora no topo-esquerda (céu sempre vazio ali —
   embaixo o galho pode descer e colidir em janelas largas e baixas) */
.how.js-theater .stage-cap { top: .5rem; bottom: auto; }
.how.js-theater .steps {
  display: flex;
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  /* o tubo do big bang é FIXO no canto inferior-esquerdo e é dono da faixa dos
     primeiros ~71px (1.05rem de recuo + 54px de largura). com os 96vw de antes,
     em qualquer viewport abaixo de ~1333px a tira encostava nas bordas e o
     card 01 nascia embaixo do tubo. reservo a faixa dos DOIS lados, senão a
     tira sai do centro. */
  --dock-clear: 6.25rem;
  width: min(1280px, calc(100vw - var(--dock-clear) * 2));
  margin: 0 auto;
}
.how.js-theater .step {
  flex: 1 1 0;
  padding: .75rem .95rem .85rem;
  opacity: .55;
}
.how.js-theater .step h3 { font-size: clamp(1.1rem, 1.9vw, 1.45rem); margin: .2rem 0 .25rem; }
.how.js-theater .step p { font-size: .82rem; line-height: 1.35; opacity: .72; }
.how.js-theater .step.on {
  opacity: 1;
  border-color: var(--laser);
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px var(--laser), 0 12px 30px rgba(214,255,0,.12);
}
.how.js-theater .step.on .step-ic { stroke: var(--laser); opacity: 1; }
.how.js-theater .how-note { margin: 0 0 .4rem; }

/* telão: cards do filmstrip crescem junto */
@media (min-width: 1600px) {
  .how.js-theater .steps { width: min(1560px, 88vw); gap: 1.2rem; }
  .how.js-theater .step { padding: 1.05rem 1.25rem 1.2rem; }
  .how.js-theater .step h3 { font-size: 1.8rem; }
  .how.js-theater .step p { font-size: .98rem; }
  .how.js-theater .step .step-ic { width: 27px; height: 27px; }
  .how.js-theater .how-head .h2 { font-size: clamp(2rem, 2.4vw, 3.2rem); }
}

@media (max-width: 760px) {
  .how.js-theater { height: 420vh; }
  /* o palco do celular é dividido em três faixas de verdade:
     TÍTULO (com véu próprio) · CÉU (a metamorfose) · TIRA DE CARDS.
     o rodapé fica reservado pra doca do tubo, que é fixa e antes
     subia por cima do card ativo. */
  .how.js-theater .how-sticky {
    /* o título deste capítulo é sticky: ele fica parado no topo a viagem
       toda, então não pode nascer embaixo da ilha do header (4,2rem era
       raso por ~13px e a ilha comia a primeira linha o tempo todo). */
    padding-top: 5.6rem;
    padding-bottom: calc(5.8rem + env(safe-area-inset-bottom, 0px));
    gap: .55rem;
  }
  /* faixa 1 — o título ganha um véu de noite: a lua cheia termina o filme
     exatamente atrás dele, e cinza-sobre-branco não se lê. o degradê é
     vertical (parece céu, não mancha) e mora sob o texto, sobre o svg. */
  .how.js-theater .how-sticky::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 40%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(7,8,14,.95) 0%, rgba(7,8,14,.9) 46%, rgba(7,8,14,.58) 76%, rgba(7,8,14,0) 100%);
  }
  .how.js-theater .how-head .chapter { margin-bottom: .55rem; }
  /* wdth 106 (em vez de 122) + corpo menor: é o que faz "A gente cria e
     opera" caber numa linha só. na largura anterior a quebra autoral
     estourava e o título virava quatro linhas em escada.
     vale nos dois modos — o tableau estático (reduced-motion) usava o
     corpo cheio do .h2 e escadeava ainda mais. */
  .how .how-head .h2 {
    font-variation-settings: "wdth" 106;
    font-size: clamp(1.45rem, 7vw, 2.15rem);
    line-height: .97;
  }
  /* faixa 3 — a tira: as bordas somem em degradê, senão o card vizinho
     entrava como um bloco preto cortado a faca na beira da tela */
  .how.js-theater .steps {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    justify-content: flex-start;
    scrollbar-width: none;
    /* sangria de verdade: só `width:100vw` deixava o carrossel começar
       no padding da seção e terminar 22px fora da tela, então o card que
       encaixava no snap ficava descentrado na mesma medida */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    gap: .8rem;
    /* padding lateral = (100vw − card)/2 → primeiro/último card centram no snap */
    /* o topo precisa de folga: overflow-x:auto faz o eixo Y virar `auto` também
       (spec: `visible` vira `auto` quando o outro eixo recorta), então a tira
       decepava o card ativo — que sobe 4px no translateY e ainda carrega o anel
       de 1px do box-shadow, que É a borda acesa. a margem negativa devolve os
       12px, pra folga não empurrar a tira dentro da coluna do sticky. */
    padding: 12px calc((100vw - min(78vw, 360px)) / 2) 8px;
    margin-top: -12px;
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0, #000 13%, #000 87%, transparent 100%);
    mask-image: linear-gradient(90deg,
      transparent 0, #000 13%, #000 87%, transparent 100%);
  }
  .how.js-theater .steps::-webkit-scrollbar { display: none; }
  .how.js-theater .step {
    flex: 0 0 min(78vw, 360px);
    width: min(78vw, 360px);
    scroll-snap-align: center;
    padding: 1rem 1.1rem 1.1rem;
    /* o vizinho é lembrete, não card: recua e apaga */
    opacity: .34;
    transform: scale(.93);
  }
  .how.js-theater .step.on { transform: translateY(-4px) scale(1); }
  .how.js-theater .step h3 { font-size: 1.45rem; margin: .25rem 0 .3rem; }
  .how.js-theater .step p { font-size: .95rem; line-height: 1.4; }
  .how.js-theater .step .step-ic { width: 24px; height: 24px; }
  .how.js-theater .how-note { font-size: .78rem; margin: .5rem 0 0; }
  .stage-cap { font-size: .68rem; }
}

/* a mariposa que ficou: pousada no campo vermelho do CTA */
.cta-moth {
  position: absolute;
  top: clamp(80px, 10.5vh, 132px);
  right: 3.5%;
  width: clamp(76px, 9.5vw, 126px);
  height: auto;
  transform: rotate(-11deg);
  z-index: 4;
  overflow: visible;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.28));
}
@media (max-width: 760px) { .cta-moth { right: 3%; top: 74px; width: 64px; } }

/* ── cta (vermelho rasgado) ──────────────────────────────
   uma coluna só. a escala do display é geométrica: razão 2,2 constante
   entre os três degraus (linha → deck → ápice). a fonte pixel NÃO entra
   na escala — é outra família, e por isso segura um valor só na seção. */
.cta {
  --col: 53rem;                     /* = a largura do painel de provas */
  --hair: rgba(25, 25, 25, .55);    /* a ÚNICA transparência da seção */
  --t-apex: clamp(2.5rem, min(8.3vw, 4.4vw + 2.2rem), 6rem);   /* 96px @1440 */
  --t-deck: calc(var(--t-apex) / 2.2);                         /* 43,6px */
  --t-line: clamp(1rem, calc(var(--t-deck) / 2.2), 1.25rem);   /* 19,8px */
  --t-tag:  clamp(.8125rem, 1.1vw, .875rem);                   /* 14px pixel */

  /* o fecho pousa na luz: o único chão claro do espaço é a própria lua.
     depois da viagem inteira de noite, a oferta acontece de dia — poeira
     de lua quente, tinta ink, e o lime de marca-texto nas ênfases.
     o vermelho volta a ser tinta de detalhe, não fundo. */
  --tornc: #ece8de;
  background: #ece8de;
  color: var(--ink);
  min-height: 92svh;
  display: block;
  text-align: left;
  padding: clamp(4rem, 9vh, 6.5rem) 1.4rem clamp(5rem, 11vh, 7.5rem);
}
/* o grito é o ÚNICO que passa da coluna: o display corre mais largo que
   a medida de leitura, mas ainda começa no trilho. o min() de 3 termos
   garante zero rolagem horizontal em qualquer largura — o teto absoluto,
   a borda direita útil a partir do trilho, e a tela inteira. */
.cta-title {
  width: min(66rem, calc(50vw + var(--col) / 2 - 1.4rem), calc(100vw - 2.8rem));
  margin: 0;
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: var(--t-apex);
  line-height: .9;
  letter-spacing: -.028em;
}
.cta-title em {
  color: var(--ink);
  background: var(--laser);
  padding: .02em .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.cta-sub {
  margin: clamp(1.2rem, 2.6vh, 1.7rem) 0 0;
  font-variation-settings: "wdth" 100;
  font-weight: 500;
  font-size: var(--t-line);
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--ink);
}
/* ── o formulário ──
   quatro campos de papel carimbados no vermelho. mesma caneta ink de
   2,5px e a mesma física de sombra dura do botão — o campo é um objeto
   pousado na página, não uma caixa de sistema. */
.cta-form { margin: 0; }
.cta-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.2vw, 1.5rem) clamp(1rem, 2.4vw, 1.7rem);
  margin-top: clamp(1.8rem, 4.5vh, 2.6rem);
}
.ff { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.ff-lab {
  font-size: var(--t-tag);
  color: var(--ink);
  line-height: 1;
}
.ff-in {
  font-family: var(--disp);
  font-variation-settings: "wdth" 100;
  font-weight: 600;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  color: var(--ink);
  background: #fff;              /* um degrau acima da poeira-de-lua */
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  padding: .62em .8em;
  width: 100%;
  box-shadow: .18rem .18rem 0 rgba(0,0,0,.9);
  transition: box-shadow .18s, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.ff-in::placeholder { color: rgba(25,25,25,.42); }
.ff-in:focus-visible {
  outline: none;
  transform: translate(-2px,-2px);
  box-shadow: .34rem .34rem 0 rgba(0,0,0,.9), inset 0 0 0 2.5px var(--laser);
}
/* erro sem cor nova: o campo ganha um sublinhado ink por dentro e a
   linha de recado aparece embaixo. vermelho sobre vermelho não existe. */
.ff.is-bad .ff-in { box-shadow: .18rem .18rem 0 rgba(0,0,0,.9), inset 0 -5px 0 var(--ink); }
/* a linha de recado é reservada mesmo vazia: sem isso o formulário
   inteiro pula pra baixo na primeira validação */
.ff-err {
  font-size: var(--t-tag);
  line-height: 1.2;
  color: var(--ink);
  min-height: 1.2em;
}
.ff.is-bad .ff-err::before { content: "↳ "; }
/* a armadilha de robô */
.ff-pot {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}
.ff-status {
  margin: .9rem 0 0;
  font-size: var(--t-tag);
  color: var(--ink);
  min-height: 1.2em;
}
.cta-form.is-sending .btn-big { opacity: .6; pointer-events: none; }

/* o recibo, no lugar do formulário */
.cta-done {
  margin-top: clamp(1.8rem, 4.5vh, 2.6rem);
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: clamp(1.4rem, 3.4vw, 2.2rem);
}
.cta-done-h {
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: var(--t-deck);
  line-height: .95;
  color: var(--ink);
}
.cta-done-p {
  margin: .55rem 0 .9rem;
  font-variation-settings: "wdth" 100;
  font-weight: 500;
  font-size: var(--t-line);
  line-height: 1.35;
  color: var(--ink);
}
.cta-done-p em { color: var(--red); }
.cta-done .cta-note a { text-decoration: underline; text-underline-offset: .18em; }

/* ação e letra miúda na mesma base: o bloco termina numa horizontal */
.cta-act {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(2rem, 5vh, 2.8rem);
  flex-wrap: wrap;
}
.cta .btn-big { background: var(--laser); }
.cta-note {
  margin: 0;
  font-size: var(--t-tag);
  line-height: 1.4;
  color: var(--ink);       /* era papel a 2,88:1 — reprovava AA */
}

/* ── o fecho no celular ──
   razão 1,5 em vez de 2,2 (o ápice é travado pela medida da tela), mas
   constante DENTRO do regime — é isso que faz o ritmo fechar.
   precisa vir DEPOIS do bloco .cta acima: as custom properties têm a
   mesma especificidade e quem ganha é a última na ordem do arquivo. */
@media (max-width: 760px) {
  .cta {
    /* 9,2vw e não 9,9: a 9,9 a linha "O personagem" estourava a caixa por
       um fio e o "O" caía sozinho no topo — a órfã que aparecia na tela */
    --t-apex: clamp(1.7rem, 9.2vw, 3.6rem);
    --t-deck: calc(var(--t-apex) / 1.5);
    --t-line: clamp(1rem, calc(var(--t-deck) / 1.5), 1.25rem);
    /* chão extra: a doca do tubo mora no canto inferior esquerdo */
    padding: clamp(3.2rem, 8vh, 4.5rem) 1.4rem clamp(7rem, 16vh, 10rem);
  }
  .brk-m { display: inline; }
  /* wdth 110 dá ~9% de caractere a mais por linha: é o que segura as
     quatro linhas do título dentro dos 345px úteis de uma tela de 390 */
  .cta-title { font-variation-settings: "wdth" 110; line-height: .93; }
  .cta .btn-big { font-size: 1.35rem; padding: .72em 1.4em; }
  /* uma coluna: dois campos lado a lado num celular viram dois campos
     estreitos demais pra qualquer nome de empresa */
  .cta-fields { grid-template-columns: 1fr; }
  .ff-in { font-size: 1rem; }          /* < 16px o iOS dá zoom no foco */
  .cta-form .cta-act { margin-top: clamp(1.5rem, 4vh, 2.2rem); }
}
@media (max-width: 380px) {
  .cta .btn-big { font-size: 1.2rem; padding: .72em 1.15em; }
}

/* ── footer ────────────────────────────────────────────── */
.foot {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding: 0 1.4rem 3rem;
}
.foot-marquee {
  overflow: hidden;
  border-block: 2px solid rgba(240,240,240,.2);
  margin-bottom: clamp(3rem, 7vh, 4.5rem);
}
.foot-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: ticker-run 22s linear infinite;
  padding: .7rem 0;
  opacity: .7;
}
.logo-big {
  font-size: clamp(3rem, 10vw, 7rem);
  justify-content: center;
  display: inline-flex;
  max-width: 92vw;
}
.foot-line { margin-top: 1.6rem; opacity: .6; }
.foot-joke { margin-top: .5rem; opacity: .45; }
.foot-joke span { color: var(--yellow); }

/* ── reveals on scroll ─────────────────────────────────── */
.io {
  opacity: 0;
  transform: translateY(34px) rotate(var(--tilt, 0deg));
  transition: opacity .7s ease var(--d, 0s), transform .8s cubic-bezier(.22,1,.36,1) var(--d, 0s);
}
.io.in { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); }

/* ── movimento reduzido ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .io { opacity: 1; transform: none; }
  .beat { position: relative; opacity: 1; transform: none; }
  .story { height: auto; padding: 4rem 0; }
  .hero { height: auto; }
  .hero-sticky { position: relative; height: 100svh; }
  .moon-far { display: none !important; }
  .how.js-theater { height: auto; padding: clamp(5rem, 12vh, 8rem) 1.4rem clamp(4.5rem, 10vh, 7rem); }
  .how.js-theater .how-sticky { position: static; height: auto; overflow: visible; }
  /* sem movimento não existe carrossel — e antes disso só a 1ª das três provas
     era alcançável. as três viram uma lista, separadas por um fio. */
  .proof-screen { display: block; }
  .proof-slide {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .proof-slide + .proof-slide { border-top: 1.5px solid rgba(240,240,240,.14); }
  .proof-theater { height: auto !important; }
  .proof-stage { position: static !important; min-height: 0 !important; padding: 0 !important; }
}

/* ── big bang: não aperte ──────────────────────────────── */
/* a doca do rodapé esquerdo: o tubo, o mostrador e o botão são UM
   instrumento — o tubo enche de poeira estelar com a rolagem e a trava
   do botão só cai quando ele transborda (tube.js) */
.bang-dock {
  position: fixed;
  left: 1.05rem;
  bottom: calc(1.05rem + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
  pointer-events: none;
  /* só aparece a partir do 3º capítulo (JS põe .bb-show) */
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.bang-dock.bb-show {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease;
}

/* o tubo: um cilindro de vidro em pé. o 3D é feito de luz —
   brilho na aresta esquerda, sombra no bojo, contraluz na direita,
   e a boca elíptica no topo que entrega a profundidade */
#bang-tube {
  --tw: 54px;
  --th: 150px;
  position: relative;
  width: var(--tw);
  height: var(--th);
  margin-left: .55rem;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(4,6,15,.9) 26%, rgba(2,3,9,.96) 100%);
  box-shadow:
    var(--shadow),
    inset 0 0 22px rgba(0,0,0,.85),
    0 0 0 rgba(214,255,0,0);
  overflow: hidden;
  transition: box-shadow .5s ease, transform .3s ease;
}
/* o raio aqui é cinto-e-suspensório: quem corta de verdade é o clip
   dentro do próprio canvas (tube.js), porque camada composta escapa do
   `overflow:hidden` do pai e vazava um retângulo de luz pelos cantos */
.tube-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
}
/* o vidro por cima de tudo: as duas arestas acesas + o verniz do topo */
.tube-glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.34) 0%, rgba(255,255,255,.10) 9%,
      rgba(255,255,255,0) 26%, rgba(0,0,0,.30) 62%,
      rgba(255,255,255,.06) 84%, rgba(255,255,255,.26) 100%),
    radial-gradient(58% 16% at 50% 5%, rgba(255,255,255,.30), transparent 72%);
  mix-blend-mode: screen;
}
/* a boca do tubo: a elipse que diz "isto é um cilindro, não uma pílula" */
.tube-mouth {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 6px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid rgba(240,240,240,.26);
  border-bottom-color: rgba(240,240,240,.10);
  background: linear-gradient(180deg, rgba(3,4,12,.9), rgba(255,255,255,.05));
  pointer-events: none;
}
/* ── a pressão ──
   o tubo trepida MAIS conforme junta poeira: amplitude em --quake (0→1) e
   ritmo em --qdur, os dois escritos pelo tube.js junto com o preenchimento.
   keyframes com var() são reavaliados a cada quadro, então a escalada é
   contínua — não em degraus — e um único conjunto de quadros serve do
   repouso ao "vai estourar". em --quake:0 todo transform zera e o tubo fica
   absolutamente parado, sem custo de composição perceptível. */
#bang-tube {
  --quake: 0;
  --qdur: 1.7s;
  animation: tube-tremor var(--qdur) ease-in-out infinite;
}
@keyframes tube-tremor {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  17% { transform: translate(calc(var(--quake) * 1.9px), calc(var(--quake) * -1.5px))
                   rotate(calc(var(--quake) * 1.35deg)) scale(calc(1 + var(--quake) * .015)); }
  33% { transform: translate(calc(var(--quake) * -1.7px), calc(var(--quake) * 1.1px))
                   rotate(calc(var(--quake) * -1.15deg)) scale(calc(1 - var(--quake) * .006)); }
  52% { transform: translate(calc(var(--quake) * 1.35px), calc(var(--quake) * 1.6px))
                   rotate(calc(var(--quake) * .9deg)) scale(calc(1 + var(--quake) * .011)); }
  71% { transform: translate(calc(var(--quake) * -1.05px), calc(var(--quake) * -1.25px))
                   rotate(calc(var(--quake) * -.68deg)) scale(1); }
  87% { transform: translate(calc(var(--quake) * .7px), calc(var(--quake) * .6px))
                   rotate(calc(var(--quake) * .4deg)) scale(calc(1 + var(--quake) * .005)); }
}
/* transbordou: o vidro esquenta e pulsa — a trepidação já vem no máximo pelo
   --quake, aqui só entra o calor. as duas animações convivem porque mexem em
   propriedades diferentes (transform × box-shadow). */
#bang-tube.is-full {
  animation: tube-tremor var(--qdur) ease-in-out infinite,
             tube-heat .95s ease-in-out infinite;
}
@keyframes tube-heat {
  0%, 100% { box-shadow: var(--shadow), inset 0 0 22px rgba(0,0,0,.72), 0 0 16px rgba(214,255,0,.34); }
  50%      { box-shadow: var(--shadow), inset 0 0 27px rgba(0,0,0,.6),  0 0 42px rgba(214,255,0,.78); }
}
/* apertou o lacre antes da hora: o tubo responde, o botão não */
#bang-tube.is-nudge { animation: tube-nudge .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes tube-nudge {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-3px) rotate(-2deg); }
  35% { transform: translateX(3px) rotate(2deg); }
  55% { transform: translateX(-2px) rotate(-1.2deg); }
  78% { transform: translateX(1px) rotate(.6deg); }
}
.tube-cap {
  margin-left: .55rem;
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--paper);
  opacity: .45;
  text-shadow: 0 1px 10px rgba(0,0,0,.9);
  transition: color .4s ease, opacity .4s ease;
}
.bang-dock.is-armed .tube-cap { color: var(--laser); opacity: .95; }

#bang-btn {
  pointer-events: auto;
  display: grid;
  place-items: center;
  font: inherit;
  background: var(--red);
  color: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: .52em 1.1em;
  cursor: pointer;
  box-shadow: var(--shadow);
  animation: bang-idle 4.2s ease-in-out infinite;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .5s ease, color .4s ease, opacity .3s ease;
}
#bang-btn > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity .15s; }
.bang-btn-b, .bang-btn-c, .bang-btn-d, .bang-btn-e { opacity: 0; }
#bang-btn:hover { animation-play-state: paused; transform: scale(1.08) rotate(-2deg); }
#bang-btn:hover .bang-btn-a { opacity: 0; }
#bang-btn:hover .bang-btn-b { opacity: 1; }
#bang-btn.is-fail .bang-btn-a, #bang-btn.is-fail .bang-btn-b { opacity: 0 !important; }
#bang-btn.is-fail .bang-btn-c { opacity: 1 !important; }
#bang-btn:active { transform: scale(.94); }

/* lacrado: enquanto o tubo não enche o botão é só um lacre apagado */
#bang-btn:not(.is-armed) {
  background: rgba(10, 12, 20, .82);
  color: rgba(240, 240, 240, .5);
  border-color: rgba(240, 240, 240, .22);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
  cursor: default;
  animation: none;
  transform: none;
}
#bang-btn:not(.is-armed) .bang-btn-a,
#bang-btn:not(.is-armed) .bang-btn-b { opacity: 0; }
#bang-btn:not(.is-armed) .bang-btn-d { opacity: 1; }
#bang-btn:not(.is-armed):hover { transform: none; }
#bang-btn:not(.is-armed):hover .bang-btn-d { opacity: 0; }
#bang-btn:not(.is-armed):hover .bang-btn-e { opacity: 1; }
/* a trava caindo: um estalo de luz laser e o botão volta a ser vermelho */
#bang-btn.just-armed { animation: bang-unlock .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes bang-unlock {
  0% { transform: scale(.9); box-shadow: 0 0 0 0 rgba(214,255,0,.9); background: var(--laser); color: var(--ink); }
  40% { transform: scale(1.14) rotate(-3deg); }
  100% { transform: scale(1) rotate(-2deg); box-shadow: var(--shadow), 0 0 0 22px rgba(214,255,0,0); }
}
@keyframes bang-idle {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2.5deg) translateY(-2px); }
}

/* ── pane: o recipiente encheu e o fecho do site treme ──
   é um SUSTO, não um estado: dispara na chegada da última seção e morre
   em 1,6s. tremor permanente em cima de texto é ilegível — e ninguém
   consegue clicar num painel que não para quieto. */
html.is-pane #bang-btn { animation: bang-pressure 1.6s linear both; }
@keyframes bang-pressure {
  0% { transform: translate(1.4px, -1px) rotate(-2deg); }
  8% { transform: translate(-1.4px, 1px) rotate(-1deg); }
  16% { transform: translate(1.2px, .8px) rotate(-2.4deg); }
  40% { transform: translate(-.7px, -.5px) rotate(-1.6deg); }
  70% { transform: translate(.4px, .3px) rotate(-2.1deg); }
  100% { transform: rotate(-2deg); }
}
html.is-pane .proof,
html.is-pane .cta-title { animation: pane-tremor 1.6s linear both; }
@keyframes pane-tremor {
  0% { transform: translate(1.1px, -.8px); }
  7% { transform: translate(-1.1px, .8px); }
  14% { transform: translate(.9px, .7px); }
  30% { transform: translate(-.6px, -.4px); }
  55% { transform: translate(.35px, .3px); }
  80% { transform: translate(-.15px, .1px); }
  100% { transform: none; }
}
/* a mariposa já vinha inclinada: o tremor não pode endireitá-la */
html.is-pane .cta-moth {
  transform-origin: 50% 50%;
  rotate: -11deg;
  animation: pane-tremor 1.6s linear both;
}

/* o colapso: cada pedaço do site voa pro centro, girando, e some */
.bang-suck {
  transition:
    transform .72s cubic-bezier(.55,-.15,.85,.35) var(--bd, 0s),
    opacity .72s cubic-bezier(.55,0,.85,.35) var(--bd, 0s) !important;
  transform: translate(var(--bx, 0px), var(--by, 0px)) rotate(var(--br, 0deg)) scale(.001) !important;
  opacity: 0 !important;
}
/* a volta: mesmo caminho, easing de mola */
.bang-return {
  transition:
    transform .95s cubic-bezier(.16,1,.3,1) var(--bd2, 0s),
    opacity .6s ease var(--bd2, 0s) !important;
}
main.bang-shake { animation: bang-shake .11s linear infinite; }
@keyframes bang-shake {
  0% { transform: translate(2px, -1px) rotate(.12deg); }
  25% { transform: translate(-2px, 2px) rotate(-.1deg); }
  50% { transform: translate(1px, 1px) rotate(.1deg); }
  75% { transform: translate(-1px, -2px) rotate(-.12deg); }
  100% { transform: translate(2px, -1px) rotate(.12deg); }
}

html.bang-lock { overflow: hidden; }
body.bang-off :is(.site-head, main, .foot, #universe, .orbit-hud, .bang-dock) { visibility: hidden !important; }
#bang-stage[hidden], #bang-ui[hidden] { display: none !important; }

#bang-stage { position: fixed; inset: 0; z-index: 500; background: #000; }
#bang-stage canvas { display: block; width: 100%; height: 100%; }
#bang-flash { position: fixed; inset: 0; z-index: 600; background: #fff; opacity: 0; pointer-events: none; }

/* a placa de título do universo */
#bang-ui {
  position: fixed; inset: 0; z-index: 550;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.05rem; padding: 2rem; text-align: center;
  color: var(--paper);
  pointer-events: none;
}
#bang-ui > * { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1); }
#bang-ui.show > * { opacity: 1; transform: none; }
#bang-ui.show > :nth-child(2) { transition-delay: .1s; }
#bang-ui.show > :nth-child(3) { transition-delay: .22s; }
#bang-ui.show > :nth-child(4) { transition-delay: .34s; }
#bang-ui.show > :nth-child(5) { transition-delay: .6s; }
#bang-ui.show .bang-kicker { opacity: .7; }
.bang-kicker { letter-spacing: .04em; }
.bang-title {
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: clamp(2.6rem, 7.4vw, 5.4rem);
  line-height: .93;
  letter-spacing: -.02em;
  text-shadow: 0 6px 60px rgba(0, 0, 0, .85);
}
#bang-ui.show .bang-note { opacity: .8; }
.bang-restore { pointer-events: auto; margin-top: .4rem; }
#bang-ui .bang-drag {
  position: absolute;
  bottom: calc(1.15rem + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(10px);
}
#bang-ui.show .bang-drag { opacity: .55; transform: translateX(-50%); }

@media (max-width: 760px) {
  /* no celular a doca DEITA: empilhada ela ocupava ~157px de altura fixa
     no canto e atropelava número, card e rodapé em quase toda rolagem.
     em fileira são ~72px, e o tubo vira o mostrador ao lado do botão —
     o % sai, porque o próprio vidro já é o indicador. */
  .bang-dock {
    left: .8rem;
    bottom: calc(.8rem + env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    align-items: flex-end;
    gap: .5rem;
  }
  #bang-tube { --tw: 30px; --th: 72px; margin-left: 0; border-width: 2px; }
  .tube-mouth { top: 3px; height: 7px; left: 17%; right: 17%; }
  .tube-cap { display: none; }
  #bang-btn { padding: .46em .82em; font-size: .84rem; }
  #bang-ui .bang-drag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #bang-btn, main.bang-shake, #bang-tube.is-full { animation: none !important; }
  html.is-pane :is(#bang-btn, .proof, .cta-title, .cta-moth) { animation: none !important; }
  .bang-suck, .bang-return, #bang-ui > * { transition: none !important; }
}

/* ── hero v7: a marca primeiro ─────────────────────────── */
.hero-brand {
  display: block;
  margin-inline: auto;
  font-size: clamp(2.5rem, 6.5vw, 5.2rem);  /* escala do em abaixo */
  height: .78em;
  width: auto;
  /* as letras fogem do cursor até ~52px: sem isso o SVG cortaria no viewBox */
  overflow: visible;
}
.hero-desc {
  margin-top: 1.15rem;
  margin-inline: auto;
  font-size: clamp(1.12rem, 2.1vw, 1.55rem);
  font-weight: 600;
  line-height: 1.3;
  max-width: 26em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}
.hero-desc2 {
  margin-top: .55rem;
  margin-inline: auto;
  max-width: 36em;
  color: rgba(240,240,240,.72);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}
@media (max-width: 760px) {
  .hero-brand { font-size: clamp(2.1rem, 9.5vw, 2.9rem); }
  .hero-desc { font-size: 1rem; max-width: 21em; }
  .hero-desc2 { max-width: 24em; }
  .btn-head { white-space: nowrap; }
}


/* ═══════════════════════════════════════════════════════════
   A ÓRBITA — capítulos 00–02 (a tese · o sapo · o elenco)
   Depois do pouso o site sai da lua: o fundo vira um corredor
   de poeira em three.js e o conteúdo passa a flutuar dentro
   dele como instrumentação de bordo — vidro, hairline e neon.
   ═══════════════════════════════════════════════════════════ */

#universe {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .85s ease;
  /* o canvas agora é transparente (alpha), então este gradiente é o
     fundo de verdade — e é o mesmo do .cosmos e do jardim */
  background: var(--sky);
}
#universe.on { opacity: 1; }
/* penumbra no miolo: o texto mora aqui, então a poeira abaixa a voz
   no centro e continua solta nas bordas */
#universe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(62% 50% at 50% 46%, rgba(1,2,8,.42) 0%, rgba(1,2,8,.18) 58%, transparent 80%);
  pointer-events: none;
}
#universe canvas { display: block; width: 100% !important; height: 100% !important; }

/* sem WebGL (ou movimento reduzido): o corredor vira um céu de CSS,
   escuro do mesmo jeito — o conteúdo nunca fica sem chão */
.no-universe .cosmos {
  background:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(240,240,240,.6) 48%, transparent 52%),
    radial-gradient(1.3px 1.3px at 31% 64%, rgba(240,240,240,.4) 48%, transparent 52%),
    radial-gradient(1.8px 1.8px at 47% 28%, rgba(240,240,240,.5) 48%, transparent 52%),
    radial-gradient(1.2px 1.2px at 63% 71%, rgba(240,240,240,.35) 48%, transparent 52%),
    radial-gradient(1.7px 1.7px at 78% 12%, rgba(240,240,240,.55) 48%, transparent 52%),
    radial-gradient(1.4px 1.4px at 88% 49%, rgba(240,240,240,.4) 48%, transparent 52%),
    radial-gradient(70% 42% at 22% 32%, rgba(109,69,255,.14), transparent 70%),
    radial-gradient(60% 38% at 80% 66%, rgba(5,193,240,.11), transparent 70%),
    linear-gradient(180deg, #0a0b16 0%, #05060e 50%, #070810 100%);
  background-attachment: fixed;
}

/* ── a zona ────────────────────────────────────────────── */
.cosmos {
  position: relative;
  z-index: 1;
  color: var(--paper);
  --glass: linear-gradient(155deg, rgba(255,255,255,.085), rgba(255,255,255,.014) 46%, rgba(255,255,255,.05));
  --hair: rgba(240,240,240,.16);
}
/* a entrada e a saída da órbita: o preto do hero derrete no espaço,
   e o espaço derrete na noite da metamorfose */
.cosmos::before,
.cosmos::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 42vh;
  pointer-events: none;
  /* atrás do conteúdo: é uma emenda com o fundo, não um véu por cima
     dos cards — em z-index 2 isso apagava o fim do elenco */
  z-index: -1;
}
.cosmos::before { top: 0; background: linear-gradient(180deg, #02030a 0%, rgba(2,3,10,.45) 30%, transparent 100%); }
/* o corte da keyart lunar não pode virar uma linha reta no meio da tela:
   a superfície se dissolve no vácuo — mas só na saída (--exit vem do
   app.js), senão o chão da lua ficaria escurecido a viagem toda */
.hero-sticky::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34vh;
  z-index: 6;
  pointer-events: none;
  opacity: var(--exit, 0);
  background: linear-gradient(180deg, transparent 0%, rgba(3,4,12,.4) 40%, rgba(2,3,10,.88) 76%, #02030a 100%);
}
.cosmos::after  { bottom: 0; background: linear-gradient(0deg, #0d0e19 0%, rgba(13,14,25,.55) 38%, transparent 100%); }

.cosmos section { background: transparent; color: var(--paper); }
.cosmos .torn-top::before { display: none; }
/* tudo que é texto ganha um caroço de sombra pra não sumir na poeira */
.cosmos .h2,
.cosmos .beat-title,
.cosmos .lead,
.cosmos .cast-note { text-shadow: 0 2px 30px rgba(3,4,10,.92), 0 1px 4px rgba(3,4,10,.7); }
.cosmos .chapter {
  color: var(--laser);
  border-color: rgba(214,255,0,.42);
  background: rgba(214,255,0,.05);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  text-shadow: 0 0 22px rgba(214,255,0,.4);
}

/* ── o painel de vidro (a peça que se repete na órbita) ── */
.holo {
  position: relative;
  border-radius: 14px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(11px) saturate(1.18);
          backdrop-filter: blur(11px) saturate(1.18);
  box-shadow:
    0 26px 70px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.14);
}
/* a borda que acende: gradiente de verdade, recortado por máscara */
.holo::before,
.cosmos .polaroid::before,
.cosmos .uni-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg,
    var(--edge-a, rgba(214,255,0,.55)) 0%,
    rgba(255,255,255,.07) 42%,
    var(--edge-b, rgba(5,193,240,.45)) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* ── cap. 00 · a tese ──────────────────────────────────── */
.cosmos .story { color: var(--paper); }
.cosmos .beat-title { letter-spacing: -.03em; }
.cosmos .beat[data-beat="2"] .beat-title em {
  color: var(--ink);
  background: var(--laser);
  box-shadow: 0 0 46px rgba(214,255,0,.45);
}
.cosmos .beat-sub { opacity: .62; }

/* o disco do beat vira instrumento: aro fino, halo e um anel que gira */
.cosmos .beat-pop {
  background: rgba(8,10,20,.5);
  border: 1px solid rgba(240,240,240,.28);
  box-shadow:
    0 0 0 6px rgba(3,4,10,.35),
    0 24px 70px rgba(0,0,0,.6),
    0 0 70px rgba(109,69,255,.22);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.cosmos .beat.on .beat-pop { transform: scale(1) rotate(0deg); }
.cosmos .beat-pop img { opacity: .92; }
.cosmos .beat-pop::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px dashed rgba(214,255,0,.3);
  animation: orbit-ring 26s linear infinite;
  pointer-events: none;
}
.cosmos .beat-pop { position: relative; overflow: visible; }
.cosmos .beat-pop img { border-radius: 50%; }
@keyframes orbit-ring { to { transform: rotate(360deg) } }

/* a fase da lua vira mostrador de bordo */
.cosmos .moonphase {
  background: rgba(6,8,16,.55);
  border: 1px solid rgba(240,240,240,.32);
  box-shadow: 0 0 30px rgba(214,255,0,.18);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.cosmos .moonphase-disc { background: rgba(214,255,0,.85); }

/* ── cap. 01 · o sapo (as telas suspensas) ─────────────── */
/* a perspectiva mora na seção pra que a própria mesa possa inclinar
   junto com o mouse — e as telas continuem dentro do mesmo espaço 3D */
.cosmos .case {
  perspective: 1600px;
  perspective-origin: 50% 42%;
}
.cosmos .case-board {
  transform-style: preserve-3d;
  transform: rotateY(var(--bx, 0deg)) rotateX(var(--by, 0deg));
  transition: transform .5s cubic-bezier(.22,1,.36,1);
  gap: clamp(.4rem, 2vw, 2.4rem);
}
.cosmos .case-board.is-live { transition: none; }
/* as telas suspensas: grandes, de vidro tingido, com a imagem vista
   ATRAVÉS do vidro — é o traço mais forte da referência */
.cosmos .polaroid {
  position: relative;
  background: var(--glass);
  color: var(--paper);
  border-radius: 20px;
  padding: .55rem .55rem .75rem;
  -webkit-backdrop-filter: blur(13px) saturate(1.2);
          backdrop-filter: blur(13px) saturate(1.2);
  box-shadow: 0 34px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
  transform-style: preserve-3d;
  overflow: hidden;
}
.cosmos .polaroid img { border-radius: 14px; opacity: .88; }
/* a lavagem de cor da placa passando por cima do conteúdo */
.cosmos .polaroid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(152deg,
    color-mix(in srgb, var(--wash, #6d45ff) 26%, transparent) 0%,
    transparent 46%,
    color-mix(in srgb, var(--wash, #6d45ff) 15%, transparent) 100%);
  mix-blend-mode: screen;
}
.cosmos .polaroid figcaption { opacity: .62; letter-spacing: .01em; position: relative; z-index: 2; }

/* maiores: na referência uma placa sozinha come metade da tela */
.cosmos .p-main { width: min(430px, 32vw); }
.cosmos .p-ad   { width: min(392px, 29vw); }
.cosmos .p-ig   { width: min(316px, 24vw); }
/* o teto em vh existe porque o capítulo do sapo tem que caber numa tela:
   as telas são retrato, então cada vw de largura vira ~1,4vh de altura */
/* o teto em vh existe porque o capítulo do sapo tem que caber numa tela:
   as telas são retrato, então cada vw de largura vira ~1,4vh de altura */
@media (min-width: 1000px) {
  .cosmos .case { padding: clamp(2.2rem, 5vh, 4rem) 1.4rem clamp(1.4rem, 3.2vh, 2.8rem); }
  .cosmos .case-board { margin-top: clamp(.9rem, 2.2vh, 2rem); }
  .cosmos .p-main { width: min(430px, 32vw, 26.5vh); }
  .cosmos .p-ad   { width: min(392px, 29vw, 23.5vh); }
  .cosmos .p-ig   { width: min(316px, 24vw, 20.5vh); }
}
/* as três telas em ângulos diferentes — você olha de dentro da cena */
/* translateZ aumenta o tamanho aparente sob perspectiva — daí os valores
   modestos e o scale compensando: a mesa inteira precisa caber numa tela */
.cosmos .p-main {
  --edge-a: rgba(214,255,0,.6); --edge-b: rgba(109,69,255,.4); --wash: #d6ff00;
  transform: rotateY(17deg) rotateX(-4deg) rotate(-1.6deg) translateZ(26px) scale(.965);
}
.cosmos .p-ad {
  --edge-a: rgba(5,193,240,.5); --edge-b: rgba(255,255,255,.1); --wash: #05c1f0;
  transform: rotateY(-3deg) rotateX(5deg) translateY(-18px) translateZ(-16px) scale(1.01);
}
.cosmos .p-ig {
  --edge-a: rgba(109,69,255,.55); --edge-b: rgba(214,255,0,.3); --wash: #6d45ff;
  transform: rotateY(-19deg) rotateX(-3deg) rotate(2.4deg) translateZ(12px) scale(.985);
}
.cosmos .polaroid:hover {
  transform: rotateY(0deg) rotateX(0deg) translateY(-12px) translateZ(48px) scale(1);
  box-shadow: 0 44px 100px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.2);
  z-index: 5;
}
.cosmos .burst {
  box-shadow: 0 0 60px rgba(255,78,51,.5);
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.5));
}

/* os números viram leitura de painel */
.cosmos .stats { gap: 0; }
.cosmos .stat {
  position: relative;
  padding-inline: clamp(1.1rem, 4vw, 3.2rem);
}
.cosmos .stat + .stat::before {
  content: "";
  position: absolute;
  left: 0; top: 8%; bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(240,240,240,.3), transparent);
}
.cosmos .stat strong {
  text-shadow: 0 0 40px rgba(214,255,0,.45), 0 2px 22px rgba(2,3,8,.9);
}
.cosmos .stat .px {
  opacity: .72;
  letter-spacing: .03em;
  text-shadow: 0 1px 16px rgba(2,3,8,.95), 0 0 6px rgba(2,3,8,.9);
}
/* legendas pequenas passam por cima da parte mais viva do reator —
   sem um caroço de sombra elas somem dentro da purpurina */
.cosmos .polaroid figcaption,
.cosmos .beat-sub,
.cosmos .uni-tags,
.cosmos .uni-desc { text-shadow: 0 1px 14px rgba(2,3,8,.9); }

/* ── o letreiro entre os capítulos ─────────────────────── */
.cosmos .ticker {
  background: transparent;
  border-block: 1px solid rgba(214,255,0,.24);
  transform: none;
  margin-block: clamp(2.4rem, 7vh, 4.5rem) 0;
  box-shadow: 0 0 60px rgba(214,255,0,.06) inset;
}
/* rev. 07/08 (dono: "não precisa ficar transparente"): o outline vazado
   sumia contra a poeira — letra CHEIA em laser, leitura de bate-olho */
.cosmos .ticker-track {
  font-size: clamp(1.05rem, 2.4vw, 1.7rem);
  padding: .62rem 0;
  color: var(--laser);
  -webkit-text-stroke: 0;
}

/* ── cap. 02 · o elenco ────────────────────────────────── */
.cosmos .cast { background: transparent; }

/* ── o poço da coluna (cap. 02 em 3D) ─────────────────────
   só existe no desktop com WebGL de pé: um trecho alto de scroll
   em que a câmera desce pela espinha do estúdio enquanto os
   universos flutuam como placas 3D. */
.cast-stage { display: none; }
.cast-stage-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  pointer-events: none;
}
/* vinheta do poço: os cantos afundam no preto, como na referência */
.cast-stage-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 46%, transparent 48%, rgba(1,2,8,.62) 100%);
}
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  html.has-universe:not(.no-universe) .cast-stage {
    display: block;
    position: relative;
    /* rev 09/08 (auditoria de proporção): eram 720vh = 7,2 telas pra 10
       cards — 30% da página inteira num carrossel, enquanto TRABALHOS +
       SAPO (a prova que fecha negócio) somavam 1,9 tela. 480vh dá ~0,48
       tela por card (ritmo de carrossel de verdade) e devolve 2,4 telas
       ao site. O snap e a coreografia derivam de pRaw, então escalam
       junto — nada mais precisou mudar. */
    height: 480vh;
    margin-top: clamp(1.6rem, 4vh, 3rem);
  }
  /* o grid segue no DOM pra leitores de tela, mas sai da vista */
  html.has-universe:not(.no-universe) .uni-grid {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    margin: -1px;
    padding: 0;
    gap: 0;
  }
}
.stage-hint {
  position: absolute;
  /* abaixo da ilha do header (que é fixed, ~40px + respiro): no topo
     ele ficava ATRÁS do menu e lia como texto quebrado */
  top: clamp(5.4rem, 11vh, 7rem);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  letter-spacing: .08em;
  transition: opacity .6s ease;
}
.cast-stage.is-live .stage-hint { opacity: .5; }
.cast-stage.is-deep .stage-hint { opacity: 0; }
.stage-hud {
  position: absolute;
  left: 50%;
  /* acima da pílula de navegação (ela é fixed, bottom 14-30px, ~46px de
     altura): sem esse piso as tags do universo ficavam por baixo dela */
  bottom: clamp(5.2rem, 11vh, 7rem);
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  transition: opacity .5s ease;
}
.cast-stage.is-live .stage-hud { opacity: 1; }
.stage-name {
  font-variation-settings: var(--wide);
  font-weight: 900;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  line-height: 1;
  letter-spacing: -.015em;
  text-shadow: 0 2px 30px rgba(0,0,10,.85);
}
.stage-name::after {
  content: "";
  display: block;
  width: 2.2em;
  height: 3px;
  margin: .32em auto 0;
  background: var(--matc, var(--laser));
  box-shadow: 0 0 16px var(--matc, var(--laser));
}
.stage-hud.pop .stage-name { animation: stage-pop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes stage-pop {
  0% { transform: translateY(.35em); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.stage-tags { margin-top: .5rem; opacity: .62; }

/* cap. 03 com o jardim 3D atrás: o céu da seção vira véu translúcido
   e a floresta de partículas do universe.js aparece por trás da
   metamorfose (musgo, cipós, vagalumes, águas-vivas) */
/* `garden-3d` e não `stage-3d`: o poço é só desktop, mas o jardim agora
   acende no celular também — a seção precisa abrir o céu nos dois */
html.garden-3d .how { background: transparent; }
/* nenhuma emenda entre capítulos pode revelar o cinza do body: durante a
   viagem 3D o chão de trás é o mesmo navy do céu */
html.has-universe body { background: #01020a; }
html.garden-3d .how-sticky {
  background: linear-gradient(180deg,
    rgba(4,5,10,0) 0%, rgba(5,6,11,.3) 34%, rgba(7,8,13,.52) 100%);
}
/* SEM divisória entre a órbita e o jardim: o canvas é um céu contínuo —
   a emenda de gradiente e o rasgo de papel somem no modo 3D */
html.stage-3d .cosmos::after { display: none; }
/* a borda rasgada do cap.4 só faz sentido quando a seção tem papel
   PRÓPRIO. com o universo ligado ela é transparente (o céu é o mesmo do
   site inteiro), e o rasgo virava uma FAIXA DURA atravessando a tela — no
   celular era a emenda elenco→como. o gate era `stage-3d`, que no celular
   não existe; o certo é "tem universo". */
html.has-universe:not(.no-universe) .how.torn-top::before { display: none; }

/* os cards viram placas de vidro à deriva */
.cosmos .uni-grid { perspective: 1800px; perspective-origin: 50% 40%; }
.cosmos .uni-card {
  background: var(--glass);
  color: var(--paper);
  border-radius: 14px;
  padding: .5rem .5rem .8rem;
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
          backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: 0 22px 58px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.12);
  transform: rotateY(var(--ry, 0deg)) rotate(var(--tilt, 0deg));
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, opacity .4s ease, filter .4s ease;
}
.cosmos .uni-card { --edge-a: color-mix(in srgb, var(--mat, #d6ff00) 55%, transparent); --edge-b: rgba(255,255,255,.08); }
.cosmos .uni-card:nth-child(4n+1) { --ry: 4deg; }
.cosmos .uni-card:nth-child(4n+2) { --ry: 2deg; }
.cosmos .uni-card:nth-child(4n+3) { --ry: -2deg; }
.cosmos .uni-card:nth-child(4n)   { --ry: -4deg; }
.cosmos .uni-feat { --ry: 0deg; }
.cosmos .uni-card:hover {
  transform: rotateY(0deg) translateY(-9px) translateZ(40px);
  box-shadow: 0 34px 80px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.2);
}
.cosmos .uni-fig { border-radius: 10px; background: #05060e; }
/* varredura de tela: o vidro é uma tela ligada, não uma moldura */
.cosmos .uni-fig::after,
.cosmos .polaroid > img::after { content: none; }
.cosmos .uni-fig::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(196deg, rgba(255,255,255,.13) 0%, transparent 24%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  opacity: .5;
  transition: opacity .35s ease;
}
.cosmos .uni-card:hover .uni-fig::before { opacity: .18; }
.cosmos .uni-fig :is(img, video) { opacity: .97; }
.cosmos .uni-card:hover .uni-fig :is(img, video) { opacity: 1; }

.cosmos .uni-flag {
  background: rgba(214,255,0,.12);
  color: var(--laser);
  border: 1px solid rgba(214,255,0,.5);
  border-radius: 999px;
  box-shadow: 0 0 30px rgba(214,255,0,.25);
  transform: none;
  left: 10px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  letter-spacing: .02em;
}
.cosmos .uni-line {
  background: rgba(8,10,20,.72);
  color: var(--paper);
  border: 1px solid rgba(240,240,240,.2);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  transform: translateY(10px);
}
.cosmos .uni-card:hover .uni-line { transform: translateY(0); }
.cosmos .uni-mat {
  border: 0;
  border-radius: 2px;
  transform: none;
  box-shadow: 0 0 14px var(--mat, var(--laser));
}
.cosmos .uni-info h3 { letter-spacing: -.02em; }
.cosmos .uni-tags { opacity: .5; letter-spacing: .02em; }
.cosmos .uni-desc { opacity: .82; }
.cosmos .uni-ghost {
  background: rgba(255,255,255,.02);
  border: 1px dashed rgba(240,240,240,.3);
  --edge-a: transparent; --edge-b: transparent;
}
.cosmos .uni-ghost::before { display: none; }
.cosmos .uni-ghost:hover {
  transform: translateY(-5px);
  border-color: rgba(214,255,0,.6);
  background: rgba(214,255,0,.05);
}

/* ── hud de bordo ──────────────────────────────────────── */
.orbit-hud {
  position: fixed;
  top: 4.5rem;
  right: clamp(.9rem, 1.9vw, 1.4rem);
  z-index: 55;
  text-align: right;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.orbit-hud.on { opacity: 1; transform: none; }
.hud-row {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  padding: .3rem .35rem;
  border-radius: 10px;
  border: 1px solid rgba(240,240,240,.14);
  background: rgba(8,10,18,.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
  pointer-events: auto;
}
.hud-arrow {
  background: none;
  border: 0;
  color: rgba(240,240,240,.45);
  cursor: pointer;
  padding: .1em .5em .15em;
  border-radius: 6px;
  font-size: .95rem;
  line-height: 1;
  transition: color .18s, background-color .18s;
}
.hud-arrow:hover { color: var(--laser); background: rgba(214,255,0,.1); }
.hud-arrow[disabled] { opacity: .22; cursor: default; }
.hud-arrow[disabled]:hover { color: rgba(240,240,240,.45); background: none; }
.hud-label {
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(240,240,240,.72);
  padding: 0 .5em;
  white-space: nowrap;
}
.hud-label b { color: var(--laser); font-weight: 400; }
.hud-rail {
  margin: .42rem 0 .3rem auto;
  width: 100%;
  height: 1px;
  background: rgba(240,240,240,.14);
  overflow: hidden;
}
.hud-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--laser);
  box-shadow: 0 0 12px rgba(214,255,0,.8);
  transition: width .12s linear;
}
.hud-tel {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(240,240,240,.34);
}
.hud-tel .hud-km { color: rgba(214,255,0,.6); }

@media (max-width: 860px) {
  .orbit-hud { display: none; }
}

/* ── ajustes de tela pequena ───────────────────────────── */
@media (max-width: 760px) {
  .cosmos .case-board { perspective: none; }
  .cosmos .p-main, .cosmos .p-ad, .cosmos .p-ig { transform: none; }
  .cosmos .uni-grid { perspective: none; }
  .cosmos .uni-card { --ry: 0deg; }
  /* blur em cascata custa caro no celular: fica só a placa */
  .cosmos .uni-card,
  .cosmos .polaroid {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background: rgba(12,14,26,.72);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cosmos .beat-pop::after { animation: none; }
  .cosmos .p-main, .cosmos .p-ad, .cosmos .p-ig { transform: none; }
  .orbit-hud { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   alvos de toque — fica no FIM de propósito
   num aparelho sem cursor tudo que se aperta precisa de ~44px de
   altura. o desenho não muda: a área cresce por padding, o traço
   fica igual. mora no fim do arquivo porque cada uma destas regras
   tem uma versão mais específica (ou mais tardia) lá em cima.
   ═══════════════════════════════════════════════════════════ */
@media (hover: none) {
  .head-island .logo { padding-block: .5rem; }
  .site-head .btn-head { padding: 1em 1.05em; }
  .proof .proof-tick { height: 36px; }
  .cta-rule .cta-rule-mail { padding-block: 1em .75em; }
  .orbit-hud .hud-arrow { min-width: 40px; min-height: 40px; }
}

/* ── acabamentos de celular ── (fim do arquivo: estas perdem a briga de
   ordem se ficarem lá em cima, junto das regras originais) */
@media (max-width: 760px) {
  /* a legenda da batida ia de borda a borda, encostando nos dois lados */
  .beat-sub { max-width: 21em; margin-inline: auto; }
  /* o letreiro colava no placar */
  .cosmos .ticker { margin-block: clamp(1.4rem, 4vh, 2.4rem) 0; }

  /* ── o placar do sapo ──
     a 41,6px os três números encostavam um no outro ("100M1,4MTV") e as
     legendas quebravam em número diferente de linhas, cada coluna com uma
     altura. agora o número cabe na coluna e as três legendas reservam a
     mesma altura, então o trio assenta numa linha de base só. */
  .stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
    margin-top: clamp(1.8rem, 4vh, 2.6rem);
    align-items: start;
  }
  .stat strong { font-size: clamp(1.35rem, 6.6vw, 2rem); letter-spacing: -.02em; }
  .stat .px {
    display: block;
    font-size: .58rem;
    line-height: 1.3;
    min-height: 2.6em;      /* reserva o dobro: as três colunas assentam juntas */
    margin-top: .25rem;
  }

  /* ── o quadro do sapo ──
     as duas polaroides dividem a largura em vez de flutuar pequenas no
     meio, e o selo passa a morder só a QUINA — antes cobria a cara do
     sapo e a guitarra inteira. */
  /* `.cosmos .p-main` (0,2,0) manda aqui: sem o `.cosmos` na frente a
     regra perde e as polaroides ficam nos 32vw do desktop */
  .cosmos .case-board { gap: .6rem; }
  .cosmos .p-main { width: 52%; }
  .cosmos .p-ad { width: 44%; }
  .burst {
    top: -20px;
    left: -12px;
    width: clamp(78px, 22vw, 96px);
    font-size: .64rem;
    line-height: 1.1;
  }
}

/* ══════════════ o foguete de bordo ══════════════
   canvas fixo sobre o conteúdo, sob o header (60) e o grão (999).
   nunca captura clique — o hit do arrasto é feito na mão, no js. */
#rocket-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 55;
  pointer-events: none;
}

/* ══════════════ o sistema solar do hero ══════════════
   o primeiro ato: a lua gigante sai, o sistema inteiro entra.
   a lua segue existindo onde importa — no pouso e no rodapé. */
.moon-far, .moon-far-hint { display: none !important; }
.solar-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* ══════════════ o dock de jogo (☄ · ⌖) ══════════════
   os brinquedos do hero, na coluna direita — some junto com o hero */
.arcade-dock {
  position: fixed;
  right: clamp(12px, 2vw, 26px);
  top: 46%;
  transform: translateY(-50%) translateX(18px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  z-index: 56;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
.arcade-dock.on {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}
.ark-btn {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2.5px solid rgba(240, 240, 240, .85);
  background: rgba(16, 17, 26, .78);
  color: #f0f0f0;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.ark-btn .ark-ic { font-size: 20px; line-height: 1; }
.ark-btn .ark-lab {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: .08em;
  color: rgba(240, 240, 240, .65);
  white-space: nowrap;
  pointer-events: none;
}
.ark-btn:hover { transform: translateY(-2px); border-color: #d6ff00; }
.ark-btn:active { transform: translateY(0) scale(.94); }
.ark-btn.is-on {
  background: #d6ff00;
  border-color: #d6ff00;
  color: #16161c;
}
.ark-btn.is-on .ark-lab { color: #d6ff00; }
html.laser-on, html.laser-on body { cursor: crosshair; }
#arcade-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 54;
  pointer-events: none;
}
@media (max-width: 760px) {
  /* no toque o laser não tem mira nem graça — e o canto é do foguete */
  .arcade-dock { display: none; }
}

/* ══════════════ a pílula de bordo ══════════════
   cápsula fixa embaixo no centro (pegada shopify editions):
   diz o capítulo, corre o progresso por baixo, abre o mapa. */
.sec-pill-wrap {
  position: fixed;
  left: 50%;
  bottom: clamp(14px, 3vh, 30px);
  transform: translateX(-50%) translateY(18px);
  z-index: 57;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.sec-pill-wrap.on {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* no celular o dock do big bang deita e ocupa a faixa de baixo inteira
   (~72px de altura, saindo da esquerda), enquanto esta pílula é fixa,
   centralizada, a 14-30px do fundo — as duas se sobrepunham. a Press
   Start 2P, mais larga que a Pixelify, só deixou o encontro óbvio.
   a pílula sobe pra ACIMA do dock em vez de disputar a mesma linha.
   ⚠ esta regra precisa vir DEPOIS do bloco .sec-pill-wrap acima: mesma
   especificidade, quem manda é a ordem — dentro do @media lá de cima
   (linha ~2356) ela era simplesmente ignorada. */
@media (max-width: 760px) {
  .sec-pill-wrap { bottom: calc(.8rem + 72px + 12px + env(safe-area-inset-bottom, 0px)); }
}
.sec-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 13px;
  border-radius: 999px;
  border: 2px solid rgba(240, 240, 240, .28);
  background: rgba(13, 14, 22, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #f0f0f0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.sec-pill:hover { border-color: rgba(214, 255, 0, .6); transform: translateY(-1px); }
.sec-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d6ff00;
  box-shadow: 0 0 10px rgba(214, 255, 0, .8);
}
.sec-pill-name { font-size: 12px; letter-spacing: .06em; white-space: nowrap; }
.sec-pill-burger { font-size: 15px; opacity: .6; line-height: 1; }
.sec-pill-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #d6ff00;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.sec-pill-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 8px;
  border-radius: 18px;
  border: 2px solid rgba(240, 240, 240, .28);
  background: rgba(13, 14, 22, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(8px) scale(.97);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.sec-pill-wrap.is-open .sec-pill-menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.sec-pill-item {
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(240, 240, 240, .78);
  text-decoration: none;
  white-space: nowrap;
}
.sec-pill-item:hover { background: rgba(240, 240, 240, .08); color: #f0f0f0; }
.sec-pill-item.is-here { color: #d6ff00; }
.sec-pill-item.is-here::before { content: "☾ "; }
@media (max-width: 760px) {
  .sec-pill-name { font-size: 11px; }
  .sec-pill { padding: 9px 14px 11px; }
}

/* ══════════════ display = Instrument Serif 400 ══════════════
   A Instrument Serif tem UM peso e NENHUM eixo de largura. Se as
   manchetes seguissem com font-weight 900 e "wdth" 122, o browser ia
   SINTETIZAR bold e largura — engorda o traço na horizontal e destrói o
   contraste do serif. Então todo o display volta pra 400/normal, e o
   letter-spacing negativo (que era da Archivo condensada) sai junto. */
.h2, .hero-title, .hero-desc, .dive-statement, .dw-line, .beat-title,
.stat strong, .ticker-track, .proof-lede, .proof-fig,
.uni-track, .uni-info h3, .uni-ghost .uni-q, .uni-ghost h3,
.step h3, .cta-done-h, .bang-title, .stage-name {
  font-family: var(--disp);
  font-weight: 400;
  font-variation-settings: normal;
  letter-spacing: normal;
}
/* botão, campo e a fila de marcas são UI, não display: seguem na Geist
   (a fila de marcas em 700 porque ali o texto faz papel de logotipo) */
.btn, .btn-head, .ff-in { font-family: var(--ui); font-variation-settings: normal; }
.folio-brand-row li { font-family: var(--ui); font-weight: 700; font-variation-settings: normal; }

/* ══════════════ o capítulo 4 estava com céu próprio ══════════════
   `.how` e `.how-sticky` pintavam um gradiente OPACO por cima do canvas —
   ou seja, o "como funciona" nunca mostrou o cosmos do site, e sim um céu
   de CSS mais claro que o resto. Era por isso que nenhum ajuste na poeira
   3D mudava o brilho dali. Com o universo ligado, os dois ficam
   transparentes e a atmosfera passa a ser a mesma do poço — a régua.
   Sem WebGL (.no-universe) o gradiente volta, senão a seção fica sem céu. */
html.has-universe:not(.no-universe) :is(.how, .how-sticky) { background: transparent; }

/* o lead dos trabalhos é uma frase só e cabia numa linha — a medida de
   34em (feita pra parágrafo) quebrava ela no meio do complemento. */
.folio .lead {
  max-width: min(96vw, 1120px);
  font-size: clamp(.92rem, 1.55vw, 1.12rem);
  text-wrap: nowrap;
}
@media (max-width: 900px) { .folio .lead { text-wrap: balance; max-width: 34em; } }

/* ══════════════ MOBILE: o conteúdo manda ══════════════
   No celular a tela é a metade de um cartão-postal: qualquer peça
   flutuante come uma linha de texto. A auditoria (390×844, varredura do
   documento inteiro) achou a UI fixa por cima de copy em ~10 posições —
   provas, rótulos do formulário, rodapé. Num desktop essas peças moram na
   margem; num celular não existe margem. Então elas saem. */
@media (max-width: 760px) {
  /* o gatilho do big bang FICA no celular (é a melhor parte do site). O
     que estava errado era o TAMANHO: deitado, tubo + botão ocupavam uma
     faixa de ~236px no rodapé e cobriam campo de formulário e rodapé.
     Agora ele volta a ser vertical e mínimo, agarrado ao canto — cruza
     texto num naco estreito, não numa faixa. */
  .bang-dock {
    flex-direction: column !important;
    align-items: flex-start !important;
    left: .55rem !important;
    bottom: calc(.55rem + env(safe-area-inset-bottom, 0px)) !important;
    gap: .32rem !important;
  }
  #bang-tube { --tw: 20px !important; --th: 50px !important; }
  #bang-btn { padding: .38em .62em !important; font-size: .68rem !important; }
  /* a pílula de capítulo é útil, mas é fixa e centrada — no celular ela
     cruzava o texto o tempo todo (títulos de prova, labels do form).
     A história aqui é linear e curta: o scroll já diz onde você está. */
  .sec-pill-wrap { display: none !important; }

  /* o hero eram 3,2 telas de céu quase vazio antes do pouso (cobertura
     medida: 3,2%). uma tela e meia entrega a mesma viagem sem a espera. */
  .hero { height: 165vh; }

  /* a metamorfose custava 4,6 telas de rolagem pra uma cena que, num
     celular, cabe num quadro só. 2,8 telas = 0,7 por ato, que é o ritmo
     de um carrossel — e a criatura chega antes de o dedo cansar. */
  .how.js-theater { height: 280vh; }
}

/* ══════════════ MOBILE · a tese ══════════════
   Num celular o bloco de texto centrado deixava a tela do filme lá
   embaixo, fora do quadro — meia tela de nada entre uma coisa e outra.
   Cartaz de celular se lê de cima pra baixo: título no terço de cima,
   a tela chegando logo abaixo. E ela precisa ser MAIOR: 88vw num 16:9
   dá 193px de altura, um selo perdido no meio do preto. */
@media (max-width: 760px) {
  .dive-intro {
    justify-content: flex-start;
    padding: 17svh 1.2rem 0;
  }
  .dive-statement { font-size: clamp(1.55rem, 6.6vw, 2.4rem); }
  .dive-side { font-size: clamp(.9rem, 3.7vw, 1.05rem); max-width: 26em; }
  /* a moldura do celular é um CELULAR: o filme mobile é o reframe 9:16
     do mesmo take (assets/dive-9x16.mp4, trocado no dive.js) */
  .dive-frame { width: min(64vw, 320px); aspect-ratio: 9 / 16; }
  .dive-words { width: 88vw; }
}

/* ══════════════ MOBILE · afinações finais ══════════════ */
@media (max-width: 760px) {
  /* a linha de categoria é a única frase do hero: no celular ela vinha
     menor que o corpo do site e sumia debaixo do wordmark */
  .hero-desc { font-size: clamp(1.05rem, 4.6vw, 1.35rem); }

  /* o reel era uma esteira horizontal com barra de rolagem à mostra e o
     quadro seguinte espiando pela borda — dois eixos de rolagem na mesma
     tela é sempre confuso. no celular os três filmes empilham, cada um
     com a largura toda: um assunto por vez, no eixo que o dedo já usa. */
  /* mosaico: o comercial de TV (16:9) ocupa a linha inteira — é a peça
     que prova "rede nacional" — e os dois verticais dividem a linha de
     baixo, o que os deixa pequenos, que era o pedido. Não pus o 16:9 numa
     COLUNA à esquerda de propósito: a célula ficaria 236×847 e o cover
     cortaria o comercial num retrato espremido (o mesmo defeito que já
     tinha aparecido aqui antes). */
  .folio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible;
    scroll-snap-type: none;
    gap: .7rem;
    width: min(94vw, 470px);
    margin-inline: auto;
    padding-bottom: 0;
  }
  .folio-wide { grid-column: 1 / -1; width: auto; height: auto; aspect-ratio: 16 / 9; }
  .folio-tall { width: auto; height: auto; aspect-ratio: 9 / 16; }
  .folio-card figcaption { font-size: .5rem; padding: .26rem .34rem; }
}

/* o fecho é a única tela do celular em que o conteúdo desce até o rodapé
   (form + assinatura): reserva a faixa do gatilho pra ele não sentar em
   cima do botão de enviar. */
@media (max-width: 760px) {
  /* o dock do gatilho (tubo 50px + botão) mora no canto inf-esq até o
     fim da página: o rodapé reserva a altura dele pra assinatura e o
     letreiro não ficarem por baixo. */
  .foot { padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px)); }
}