/* Paleta do projeto Satori no Stitch, que por sua vez é a do app (ui/base.css). */
:root {
  --fundo: #131315;
  --fundo-baixo: #0e0e10;
  --painel: #1b1b1d;
  --painel-alto: #1f1f21;
  --borda: #353437;
  --texto: #e4e2e4;
  --texto-fraco: #c1c6d7;
  --texto-mudo: #8b90a0;
  --primaria: #adc6ff;
  --acento: #007aff;
  --secundaria: #e8b3ff;
  --terciaria: #c2c1ff;
  --raio: 8px;
  --largura: 1180px;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.6 Inter, system-ui, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
video { cursor: pointer; }
a { color: var(--primaria); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--primaria); outline-offset: 3px; border-radius: 4px; }
code, kbd { font-family: var(--mono); font-size: .88em; background: var(--painel-alto); border: 1px solid var(--borda); border-radius: 4px; padding: 1px 5px; }

.conteudo { max-width: var(--largura); margin: 0 auto; padding: 0 24px; }
.secao { padding-top: 112px; }
.estreita { max-width: 820px; }

h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(40px, 6vw, 68px); font-weight: 800; }
h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; }
h3 { font-size: 18px; font-weight: 600; }

.degrade {
  background: linear-gradient(90deg, var(--primaria), var(--terciaria) 50%, var(--secundaria));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.rotulo {
  font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em;
  color: var(--primaria); margin: 0 0 16px;
}
.sub { color: var(--texto-fraco); max-width: 680px; margin: 16px 0 0; font-size: 17px; }

/* Topo */
.topo {
  position: sticky; top: 0; z-index: 10;
  background: rgb(19 19 21 / .8); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda);
}
.topo-linha { display: flex; align-items: center; gap: 32px; height: 64px; }
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--texto); }
.marca:hover { text-decoration: none; }
.selo {
  font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--primaria); border: 1px solid var(--borda); border-radius: 999px; padding: 4px 8px;
}
.topo nav { display: flex; gap: 24px; margin-left: auto; }
.topo nav a { color: var(--texto-fraco); font-size: 14px; }
.topo nav a:hover { color: var(--texto); text-decoration: none; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 24px; border-radius: var(--raio);
  background: var(--acento); color: #fff; font-weight: 600;
  box-shadow: 0 8px 24px rgb(0 122 255 / .25);
  transition: background .15s, transform .15s;
}
.botao:hover { background: #1a88ff; text-decoration: none; transform: translateY(-1px); }
.botao-pequeno { padding: 8px 16px; font-size: 14px; box-shadow: none; }
.botao-secundario { background: var(--painel-alto); border: 1px solid var(--borda); color: var(--texto); box-shadow: none; }
.botao-secundario:hover { background: #2a2a2c; }

/* Hero */
.hero { padding-top: 96px; text-align: center; }
.hero .lead { font-size: 19px; color: var(--texto-fraco); max-width: 720px; margin: 24px auto 0; }
.acoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.fatos {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: flex; gap: 8px 24px; justify-content: center; flex-wrap: wrap;
  font: 13px var(--mono); color: var(--texto-mudo);
}
.fatos li::before { content: "✓ "; color: var(--primaria); }

.janela {
  margin: 0; border: 1px solid var(--borda); border-radius: 12px; overflow: hidden;
  background: var(--fundo-baixo); box-shadow: 0 30px 80px rgb(0 0 0 / .5);
}
.hero .janela { margin-top: 64px; box-shadow: 0 30px 120px rgb(0 122 255 / .15), 0 30px 80px rgb(0 0 0 / .5); }

/* Matriz de compatibilidade */
.tabela-rolagem { overflow-x: auto; margin-top: 32px; border: 1px solid var(--borda); border-radius: var(--raio); }
.matriz { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--painel); }
.matriz th, .matriz td { padding: 14px 18px; border-bottom: 1px solid var(--borda); text-align: center; white-space: nowrap; }
.matriz tr:last-child > * { border-bottom: 0; }
.matriz thead th { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--texto-mudo); background: var(--painel-alto); }
.matriz tbody th { text-align: left; font-weight: 600; }
.matriz thead th:first-child { text-align: left; }
.matriz small { font-weight: 400; color: var(--texto-mudo); margin-left: 6px; }
.sim { color: var(--primaria); }
.nao { color: var(--texto-mudo); }

/* Cartões */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 40px; }
.cartoes-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cartao {
  background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 24px; transition: border-color .15s;
}
.cartao:hover { border-color: #414755; }
.cartao p { color: var(--texto-fraco); font-size: 15px; margin: 10px 0 0; }

/* Passos */
.passos { list-style: none; padding: 0; margin: 40px 0 0; counter-reset: passo; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.passos li { counter-increment: passo; background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px; }
.passos li::before {
  content: counter(passo); display: grid; place-items: center;
  width: 32px; height: 32px; margin-bottom: 16px; border-radius: 50%;
  background: var(--acento); color: #fff; font-weight: 700;
}
.passos p { color: var(--texto-fraco); font-size: 15px; margin: 10px 0 0; }

/* Download */
.download {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  padding: 40px; border-radius: 12px; border: 1px solid var(--borda);
  background: radial-gradient(circle at top left, rgb(0 122 255 / .15), transparent 60%), var(--painel);
}
.download p { color: var(--texto-fraco); max-width: 560px; margin: 12px 0 0; }
.download .nota { font: 13px var(--mono); color: var(--texto-mudo); }

/* Perguntas */
details { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--painel); margin-top: 12px; }
details:first-of-type { margin-top: 32px; }
summary { cursor: pointer; padding: 18px 20px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--texto-mudo); font-family: var(--mono); }
details p { margin: 0; padding: 0 20px 18px; color: var(--texto-fraco); }

/* Chamada final e rodapé */
.final { text-align: center; padding-bottom: 32px; }
.final h2 { margin-bottom: 36px; }
.rodape { margin-top: 112px; border-top: 1px solid var(--borda); padding: 32px 0; font-size: 14px; color: var(--texto-mudo); }
.rodape-linha { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.rodape .marca { font-size: 15px; }
.rodape a { margin-left: auto; }

@media (max-width: 860px) {
  .topo nav { display: none; }
  .topo-linha { justify-content: space-between; }
  .secao { padding-top: 80px; }
  .download { padding: 28px; }
}



/* Manual */
.topo nav a[aria-current="page"] { color: var(--texto); }

.manual {
  display: grid; grid-template-columns: 240px minmax(0, 760px);
  gap: 64px; justify-content: center; align-items: start; padding-top: 56px;
}
.manual-indice {
  position: sticky; top: 88px; max-height: calc(100vh - 112px); overflow-y: auto;
  padding-right: 8px; font-size: 14px;
}
.manual-indice .rotulo { margin-bottom: 12px; }
.manual-indice ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--borda); }
.manual-indice a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--texto-mudo); line-height: 1.35; }
.manual-indice a:hover { color: var(--texto); border-left-color: var(--primaria); text-decoration: none; }

.manual-cabecalho h1 { font-size: clamp(34px, 4.4vw, 48px); }
.manual-texto { min-width: 0; color: var(--texto-fraco); }
.manual-texto h2 {
  color: var(--texto); font-size: clamp(24px, 2.6vw, 30px);
  margin: 72px 0 20px; padding-top: 32px; border-top: 1px solid var(--borda);
}
.manual-texto h3 { color: var(--texto); margin: 36px 0 12px; }
.manual-texto p, .manual-texto ul, .manual-texto ol { margin: 0 0 16px; }
.manual-texto ul, .manual-texto ol { padding-left: 22px; }
.manual-texto li + li { margin-top: 6px; }
.manual-texto strong { color: var(--texto); font-weight: 600; }
.manual-texto a { text-decoration: underline; text-decoration-color: rgb(173 198 255 / .35); text-underline-offset: 3px; }

.manual-texto pre {
  margin: 0 0 20px; padding: 16px 18px; overflow-x: auto;
  background: var(--fundo-baixo); border: 1px solid var(--borda); border-radius: var(--raio);
  font: 13px/1.6 var(--mono); color: var(--texto);
}
.manual-texto pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.manual-texto kbd { border-bottom-width: 2px; color: var(--texto); white-space: nowrap; }

.manual-tabela { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--borda); border-radius: var(--raio); }
.manual-tabela table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--painel); }
.manual-tabela th, .manual-tabela td { padding: 10px 14px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; }
.manual-tabela tr:last-child > td { border-bottom: 0; }
.manual-tabela th { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-mudo); background: var(--painel-alto); }
.manual-tabela td[align="center"], .manual-tabela th[align="center"] { text-align: center; }

.manual-texto blockquote {
  margin: 0 0 20px; padding: 14px 18px; border-left: 3px solid var(--primaria);
  background: var(--painel); border-radius: 0 var(--raio) var(--raio) 0;
}
.manual-texto blockquote p:last-child { margin-bottom: 0; }
.manual-texto .aviso {
  padding: 14px 18px 14px 44px; position: relative;
  background: rgb(255 184 0 / .07); border: 1px solid rgb(255 184 0 / .28); border-radius: var(--raio);
}
.manual-texto .aviso::before { content: "⚠️"; position: absolute; left: 16px; top: 14px; }

.manual-figura { margin: 8px 0 28px; box-shadow: 0 20px 50px rgb(0 0 0 / .4); }

@media (max-width: 860px) {
  .manual { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 32px; }
  .manual-indice {
    position: static; max-height: none; overflow: visible; padding: 20px;
    background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio);
  }
  .manual-indice ol { columns: 2; column-gap: 16px; border-left: 0; }
  .manual-indice a { padding-left: 0; border-left: 0; break-inside: avoid; }
  .manual-texto h2 { margin-top: 56px; }
}
@media (max-width: 480px) {
  .manual-indice ol { columns: 1; }
}

/* rodapé com dois links: só o primeiro empurra para a direita */
.rodape a + a { margin-left: 0; }

/* Botão de tela cheia sobre cada vídeo: no celular é o único jeito de ler */
.janela { position: relative; }
.tela-cheia {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  font: 500 13px Inter, system-ui, sans-serif; color: #fff; cursor: pointer;
  background: rgb(19 19 21 / .75); backdrop-filter: blur(6px);
  border: 1px solid var(--borda); border-radius: 999px; padding: 6px 14px;
  opacity: .85; transition: opacity .15s;
}
.tela-cheia:hover, .tela-cheia:focus-visible { opacity: 1; }

/* Tour: um vídeo grande e as abas trocam o recurso. O vídeo passa da coluna
   de 1180px (até 1312px) para a tela do app aparecer perto do tamanho real;
   o texto continua alinhado ao resto da página. */
.hero .janela, .tour-painel .janela { width: min(1312px, calc(100vw - 48px)); left: 50%; translate: -50% 0; }
/* Seletor do tour: um painel de vidro com dez blocos (ícone + nome). O ativo
   sobe de nível, o ícone acende e uma barra fina embaixo enche com o vídeo. */
.tour-abas {
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px;
  margin-top: 36px; padding: 6px; border-radius: 16px;
  background: rgb(27 27 29 / .6); border: 1px solid var(--borda);
  backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .04);
}
.tour-abas [role="tab"] {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 6px 16px; border: 0; border-radius: 11px; background: transparent; cursor: pointer;
  font: 500 12.5px/1.2 Inter, system-ui, sans-serif; color: var(--texto-mudo); text-align: center;
  transition: color .25s, background .3s var(--suave);
}
.tour-abas svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: color .25s, transform .35s var(--suave), filter .3s;
}
.tour-abas [role="tab"]:hover { color: var(--texto); background: rgb(255 255 255 / .03); }
.tour-abas [role="tab"]:hover svg { transform: translateY(-2px); }
.tour-abas [role="tab"][aria-selected="true"] {
  color: var(--texto);
  background: linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), 0 8px 24px rgb(0 0 0 / .3);
}
.tour-abas [role="tab"][aria-selected="true"] svg { color: var(--primaria); filter: drop-shadow(0 0 8px rgb(0 122 255 / .6)); }
/* trilho e progresso, dentro do bloco ativo */
.tour-abas [role="tab"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px;
  border-radius: 2px; background: rgb(255 255 255 / .08); opacity: 0; transition: opacity .3s;
}
.tour-abas [role="tab"][aria-selected="true"]::after {
  opacity: 1;
  background: linear-gradient(90deg, var(--acento), var(--primaria)) 0 0 / var(--progresso, 0%) 100% no-repeat, rgb(255 255 255 / .08);
}
@media (max-width: 1000px) {
  .tour-abas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tour-abas { display: flex; overflow-x: auto; scrollbar-width: none; }
  .tour-abas [role="tab"] { flex: 0 0 92px; }
}
.tour-texto { display: flex; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; margin: 28px 0 20px; }
.tour-texto h3 { font-size: 22px; flex: none; }
.tour-texto p { margin: 0; color: var(--texto-fraco); max-width: 720px; }

/* ==========================================================================
   Movimento. Curva única para tudo que entra ou reage: rápida no começo e
   assentando devagar, que é o que faz parecer físico e não "piscando".
   ========================================================================== */
:root { --suave: cubic-bezier(.2, .7, .2, 1); interpolate-size: allow-keywords; }
body { overflow-x: clip; }

/* Topo: transparente no alto, ganha vidro e sombra quando a página rola */
.topo { border-bottom-color: transparent; background: rgb(19 19 21 / .4); transition: background .3s, border-color .3s, box-shadow .3s; }
.topo.rolou { background: rgb(19 19 21 / .85); border-bottom-color: var(--borda); box-shadow: 0 8px 30px rgb(0 0 0 / .35); }
.topo nav a { position: relative; transition: color .2s; }
.topo nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--primaria); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--suave);
}
.topo nav a:hover::after { transform: scaleX(1); }

/* Hero: brilho que respira atrás do título e uma grade de pontos esmaecida */
.hero { position: relative; isolation: isolate; perspective: 1400px; }
.hero::before {
  content: ""; position: absolute; z-index: -1; inset: -120px -20vw auto; height: 760px;
  background:
    radial-gradient(40% 50% at 30% 35%, rgb(0 122 255 / .28), transparent 70%),
    radial-gradient(35% 45% at 72% 30%, rgb(232 179 255 / .20), transparent 70%),
    radial-gradient(30% 40% at 50% 70%, rgb(194 193 255 / .14), transparent 70%);
  filter: blur(30px);
  animation: respirar 14s ease-in-out infinite alternate;
}
.hero::after {
  content: ""; position: absolute; z-index: -1; inset: -64px -20vw auto; height: 720px;
  background-image: radial-gradient(rgb(255 255 255 / .09) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(60% 60% at 50% 30%, #000, transparent 75%);
}
@keyframes respirar {
  from { transform: translate3d(-3%, 0, 0) scale(1); opacity: .8; }
  to   { transform: translate3d(3%, 4%, 0) scale(1.08); opacity: 1; }
}

/* Entrada do hero em cascata. Com a abertura na tela, tudo espera ela sair
   (--atraso). A janela do app só aparece aqui: o ângulo dela é da rolagem. */
:root { --atraso: 0s; }
.com-abertura { --atraso: 1.75s; }
.hero > :not(.janela) { animation: subir .9s var(--suave) both; animation-delay: var(--atraso); }
.hero > :nth-child(2) { animation-delay: calc(var(--atraso) + .08s); }
.hero > :nth-child(3) { animation-delay: calc(var(--atraso) + .16s); }
.hero > :nth-child(4) { animation-delay: calc(var(--atraso) + .24s); }
.hero > :nth-child(5) { animation-delay: calc(var(--atraso) + .32s); }
.hero > .janela { animation: surgir 1s var(--suave) both; animation-delay: calc(var(--atraso) + .35s); }
@keyframes subir { from { opacity: 0; transform: translateY(18px); } }
@keyframes surgir { from { opacity: 0; } }

/* Degradê do título correndo devagar */
.degrade { background-size: 220% 100%; animation: correr 7s linear infinite; }
@keyframes correr { to { background-position: -220% 0; } }

/* Botões: sobem, brilham e têm um reflexo que atravessa no hover */
.botao { position: relative; overflow: hidden; transition: background .2s, transform .25s var(--suave), box-shadow .25s; }
.botao:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgb(0 122 255 / .4); }
.botao:active { transform: translateY(0) scale(.98); }
.botao::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .28), transparent);
}
.botao:hover::after { transform: translateX(120%) skewX(-20deg); transition: transform .7s var(--suave); }
.botao-secundario:hover { box-shadow: 0 10px 26px rgb(0 0 0 / .35); }

/* Janelas do app: brilho de borda ao passar o mouse */
.janela { transition: box-shadow .4s, border-color .4s; }
.janela:hover { border-color: #414755; box-shadow: 0 30px 90px rgb(0 122 255 / .18), 0 30px 80px rgb(0 0 0 / .5); }

/* Cartões e passos: holofote que segue o mouse (--x/--y vêm do site.js) */
.cartao, .passos li {
  position: relative;
  background: radial-gradient(360px circle at var(--x, 50%) var(--y, -40%), rgb(0 122 255 / .12), transparent 60%), var(--painel);
  transition: border-color .3s, transform .35s var(--suave), box-shadow .35s;
}
.cartao:hover, .passos li:hover { transform: translateY(-4px); border-color: #4a5470; box-shadow: 0 18px 40px rgb(0 0 0 / .35); }
.passos li::before { transition: box-shadow .4s; }
.passos li:hover::before { box-shadow: 0 0 0 6px rgb(0 122 255 / .2); }

/* Entrada ao rolar: o site.js marca .revelar e depois .visivel */
.revelar { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--suave), transform .8s var(--suave); transition-delay: calc(var(--i, 0) * 80ms); }
.revelar.visivel { opacity: 1; transform: none; }
/* cartões reagem ao hover na hora, sem herdar o atraso da entrada */
.cartao.visivel, .passos li.visivel { transition-delay: 0s; }

/* Tour: abas suaves e troca de vídeo em fade em vez de pulo */
.tour-texto, .tour-painel .janela { transition: opacity .22s ease, transform .22s var(--suave), filter .22s; }
.tour-painel.trocando .tour-texto { opacity: 0; transform: translateY(6px); }
.tour-painel.trocando .janela { opacity: 0; transform: scale(.985); filter: blur(4px); }

/* Download: o degradê do fundo gira devagar */
.download {
  background:
    radial-gradient(circle at var(--gx, 0%) var(--gy, 0%), rgb(0 122 255 / .18), transparent 55%),
    var(--painel);
  animation: orbita 12s linear infinite;
}
@property --gx { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --gy { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes orbita {
  0% { --gx: 0%; --gy: 0%; } 25% { --gx: 100%; --gy: 0%; }
  50% { --gx: 100%; --gy: 100%; } 75% { --gx: 0%; --gy: 100%; } 100% { --gx: 0%; --gy: 0%; }
}

/* Perguntas abrem deslizando, e o "+" gira para virar "×" */
details { transition: border-color .25s, background .25s; }
details:hover { border-color: #4a5470; }
details::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--suave), content-visibility .35s allow-discrete; }
details[open]::details-content { block-size: auto; }
summary::after { transition: transform .3s var(--suave); }
details[open] summary::after { transform: rotate(45deg); }

/* ==========================================================================
   Rolagem que dirige a animação (o site.js escreve --p de 0 a 1 em cada
   [data-scrub]). É o que separa "animou uma vez" de "anda com o dedo".
   ========================================================================== */

/* Abertura: o ensō se desenha, SATORI sobe letra a letra, a cortina abre */
.abertura { display: none; }
.com-abertura .abertura {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px; background: #0b0b0c;
  clip-path: inset(0 0 0 0); animation: abrir-cortina .9s cubic-bezier(.7, 0, .2, 1) 1.45s forwards;
}
.abertura .enso { width: 92px; height: 92px; }
.abertura .enso path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tracar 1.1s var(--suave) .1s forwards; }
.abertura .enso circle { transform-origin: 256px 256px; transform: scale(0); animation: brotar .5s var(--suave) .75s forwards; }
.abertura-nome {
  margin: 0; display: flex; overflow: hidden;
  font: 800 clamp(64px, 15vw, 230px)/.9 Inter, system-ui, sans-serif; letter-spacing: .04em;
}
.abertura-nome span { display: inline-block; transform: translateY(110%); animation: letra .9s var(--suave) calc(.3s + var(--i) * .06s) forwards; }
@keyframes tracar { to { stroke-dashoffset: 0; } }
@keyframes brotar { to { transform: scale(1); } }
@keyframes letra { to { transform: none; } }
@keyframes abrir-cortina { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }

/* Hero: a janela do app começa deitada e endireita/cresce com a rolagem */
.hero > .janela[data-scrub] {
  transform-origin: 50% 0;
  transform: perspective(1600px) rotateX(calc((1 - var(--p, 1)) * 26deg)) scale(calc(.86 + var(--p, 1) * .14));
}

/* Manifesto: a seção é alta e o palco fica preso; cada palavra acende com a
   rolagem (--p do pai, --i da palavra, --n do total) */
.manifesto { position: relative; height: 260vh; margin-top: 80px; }
.manifesto-palco { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; padding: 0 24px; }
.manifesto-texto {
  max-width: 1120px; margin: 0;
  font: 700 clamp(30px, 4.6vw, 68px)/1.12 Inter, system-ui, sans-serif; letter-spacing: -.03em;
}
.manifesto-texto span { opacity: clamp(.12, calc(var(--p) * (var(--n) + 6) - var(--i)), 1); transition: opacity .12s linear; }

/* Faixa gigante: letras vazadas que deslizam em sentidos opostos */
.faixa-gigante { overflow: hidden; padding: 24px 0 8px; }
.faixa-linha {
  margin: 0; white-space: nowrap; color: transparent;
  font: 800 clamp(64px, 11vw, 180px)/1.02 Inter, system-ui, sans-serif; letter-spacing: -.04em;
  -webkit-text-stroke: 1.5px rgb(173 198 255 / .32);
  transform: translateX(calc(var(--p, .5) * -38%));
}
.faixa-linha.contra { -webkit-text-stroke-color: rgb(232 179 255 / .26); transform: translateX(calc(-38% + var(--p, .5) * 38%)); }

/* Download: título enorme e o ensō girando em 3D conforme a seção passa */
.baixar-palco { display: flex; align-items: center; gap: 4vw; margin-bottom: 48px; perspective: 1200px; }
.baixar-palco .enso {
  flex: none; width: clamp(110px, 17vw, 250px); height: auto;
  filter: drop-shadow(0 24px 60px rgb(0 122 255 / .35));
  transform: rotateY(calc((var(--p, .5) - .5) * 300deg)) rotateZ(calc(var(--p, .5) * 120deg));
}
.baixar-titulo {
  margin: 0; font: 800 clamp(56px, 11vw, 168px)/.92 Inter, system-ui, sans-serif; letter-spacing: -.05em;
  transform: translateX(calc((.5 - var(--p, .5)) * 14%));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .manifesto { height: auto; padding: 120px 0; }
  .manifesto-palco { position: static; height: auto; }
}