/* Filme de rolagem · modelo. Troque os tokens de :root pela marca e mexa o mínimo no resto. */

:root {
  --fundo: #0d0b09;           /* cor do estúdio dos quadros: o site e o filme não podem ter emenda */
  --fundo-2: #17130f;
  --texto: #f5efe6;
  --apagado: #a59a8c;
  --acento: #d9a35b;          /* tirar do próprio produto */
  --linha: rgba(255, 255, 255, .12);
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --corpo: "Inter", system-ui, -apple-system, sans-serif;
  --margem: clamp(16px, 4vw, 64px);
  --trecho: 110svh;           /* rolagem gasta por capítulo; menos que 90 fica corrido */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --grao: .07;                /* grão de película sobre o filme (0 desliga): tira o liso de render */
  --vinheta: .55;             /* escurece os cantos como lente de verdade (0 desliga) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 16px/1.55 var(--corpo);
  overflow-x: clip;           /* clip, não hidden: hidden quebra o sticky do palco */
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* topo fixo, discreto: quem brilha é o filme */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  padding: 18px var(--margem);
  padding-top: max(18px, env(safe-area-inset-top));
}
.marca { font: 800 20px/1 var(--display); letter-spacing: .02em; text-decoration: none; }
.menu { display: flex; gap: 28px; margin-left: auto; font-size: 14px; }
.menu a { text-decoration: none; opacity: .75; transition: opacity .3s; }
.menu a:hover { opacity: 1; }
.botao {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px;
  background: var(--acento); color: var(--fundo);
  font: 600 14px/1 var(--corpo); text-decoration: none;
  transition: transform .4s var(--ease), background .3s;
}
.botao:hover { transform: translateY(-2px); }
.botao--linha { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha); }

/* menu legível quando o produto do filme sobe até o topo */
.topo { background: linear-gradient(180deg, color-mix(in srgb, var(--fundo) 72%, transparent), transparent); }

/* ---------- o filme ---------- */
.filme { position: relative; height: calc(var(--trechos, 3) * var(--trecho) + 100svh); }
.filme__palco {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  background: var(--fundo) center / cover no-repeat;   /* o poster entra inline, antes do JS */
}
.filme__tela { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* grão de película: ruído fixo (css/grao.png) que pula de lugar 8 vezes por segundo, por cima de tudo */
.filme__palco::after {
  content: ""; position: absolute; inset: -50%; z-index: 6; pointer-events: none;
  background: url(grao.png); opacity: var(--grao); mix-blend-mode: overlay;
  animation: grao .9s steps(8) infinite;
}
@keyframes grao {
  0% { transform: translate(0, 0); } 25% { transform: translate(-7%, 4%); } 50% { transform: translate(5%, -6%); }
  75% { transform: translate(-3%, -8%); } 100% { transform: translate(6%, 3%); }
}
.filme__veu {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 95% at 50% 45%, transparent 55%, rgb(0 0 0 / var(--vinheta)) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--fundo) 78%, transparent) 0%, transparent 58%),
    linear-gradient(0deg, color-mix(in srgb, var(--fundo) 60%, transparent) 0%, transparent 32%);
}

.capitulo {
  position: absolute; inset: 0;   /* sem z-index: o título e o resto precisam ficar em camadas diferentes */
  display: grid; align-content: center; justify-items: start; gap: 22px;
  padding: 96px var(--margem) 80px;
}
/* antes do JS só o 1º capítulo aparece: empilhados, os outros piscavam juntos e o último virava o LCP */
.capitulo ~ .capitulo { visibility: hidden; }
.cap-rotulo {
  margin: 0; font: 600 12px/1 var(--corpo); letter-spacing: .22em; text-transform: uppercase;
  color: var(--acento);
}
.cap-titulo {
  position: relative; z-index: 2;
  margin: 0; max-width: 11ch;
  font: 800 clamp(56px, 10.5vw, 196px)/.86 var(--display);
  font-stretch: 75%; letter-spacing: -.02em; text-transform: uppercase;
  text-wrap: balance;
}
.cap-texto { margin: 0; max-width: 34ch; color: var(--apagado); font-size: clamp(15px, 1.2vw, 18px); }
.cap-acao { margin-top: 6px; }

/* produto recortado: na frente do título, atrás do resto; não pega clique */
.filme__produto {
  position: absolute; z-index: 3; pointer-events: none;
  left: 66%; top: 52%; height: min(78svh, 940px); width: auto;
  opacity: 0;   /* o filme.js centraliza (xPercent/yPercent -50) e mostra; o 3D aparece com .pronto */
  filter: brightness(var(--brilho, 1)) drop-shadow(0 40px 60px rgba(0, 0, 0, .45));
}
/* produto em 3D: mesma camada e mesmo lugar; a tela do canvas tem a proporção do produto em pé */
.filme__produto--3d { aspect-ratio: 3 / 5; opacity: 0; transition: opacity .8s var(--ease); }
.filme__produto--3d.pronto { opacity: 1; }
.capitulo .cap-rotulo, .capitulo .cap-texto, .capitulo .cap-acao { position: relative; z-index: 4; }

.filme__hud { position: absolute; inset: auto var(--margem) 28px; z-index: 5; display: flex; align-items: center; gap: 18px; pointer-events: none; }
.filme__contador { font: 600 12px/1 var(--corpo); letter-spacing: .12em; color: var(--apagado); }
.filme__contador b { color: var(--texto); font-weight: 600; }
.filme__pontos { display: flex; gap: 6px; }
.filme__pontos i { width: 6px; height: 6px; border-radius: 50%; background: var(--linha); transition: background .4s, transform .4s var(--ease); }
.filme__pontos i.ativo { background: var(--acento); transform: scale(1.3); }
.filme__barra { flex: 1; height: 1px; background: var(--linha); }
.filme__barra i { display: block; height: 100%; background: var(--acento); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- depois do filme: página normal ---------- */
.depois { position: relative; z-index: 1; padding: 120px var(--margem); background: var(--fundo); }
.depois h2 { margin: 0 0 40px; font: 800 clamp(40px, 6vw, 96px)/.9 var(--display); font-stretch: 75%; text-transform: uppercase; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.cartao { padding: 28px; border-radius: 22px; background: var(--fundo-2); box-shadow: inset 0 0 0 1px var(--linha); }
.cartao b { display: block; font: 800 44px/1 var(--display); color: var(--acento); }
.cartao p { margin: 10px 0 0; color: var(--apagado); }
.rodape { padding: 40px var(--margem) calc(40px + env(safe-area-inset-bottom)); color: var(--apagado); font-size: 13px; border-top: 1px solid var(--linha); }

/* ---------- celular (tela em pé; o JS usa a mesma regra para pedir os quadros "m") ---------- */
@media (max-aspect-ratio: 4/5) {
  .menu { display: none; }
  .topo .botao { margin-left: auto; padding: 11px 18px; }
  .filme__veu {
    background:
      radial-gradient(130% 85% at 50% 50%, transparent 55%, rgb(0 0 0 / var(--vinheta)) 100%),
      linear-gradient(180deg, color-mix(in srgb, var(--fundo) 80%, transparent) 0%, transparent 46%),
      linear-gradient(0deg, color-mix(in srgb, var(--fundo) 92%, transparent) 0%, color-mix(in srgb, var(--fundo) 55%, transparent) 26%, transparent 44%);
  }
  /* rótulo e título no alto, frase e botão no pé, produto no vão do meio */
  .capitulo { display: flex; flex-direction: column; align-items: flex-start; padding: 88px 16px calc(64px + env(safe-area-inset-bottom)); gap: 12px; }
  .cap-titulo { font-size: calc((100vw - 32px) / 5.6); max-width: none; }
  .cap-texto { margin-top: auto; }
  .filme__produto { left: 50%; top: 60%; height: 44svh; }
  .filme__hud { bottom: calc(20px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .botao { transition: none; }
  .filme__palco::after { animation: none; }
}