/* ART MACHINE · style.css · só estiliza; os números de movimento vêm dos tokens do kits.css (RECEITAS §E) */
:root {
  --noite: #0A0B0D; --sup: #13151A; --marfim: #ECE8DF;
  --mudo-noite: color-mix(in oklab, #ECE8DF 62%, #0A0B0D);
  --linha: rgba(236,232,223,.12); --claro: #E6EAEE; --tinta: #0D0F12;
  --acento: #B39062; --luz: #CFE0EC;
  /* o ato claro (A OFERTA) usa --bg/--fg: AM.amanhecer anoitece estas duas */
  --bg: #E6EAEE; --fg: #0D0F12; --mudo: color-mix(in oklab, var(--fg) 62%, var(--bg));
  --f-disp: "Cormorant Garamond", "Times New Roman", serif;
  --f-txt: "Space Grotesk", system-ui, sans-serif;
  --m: 6vw; --pad: clamp(64px, 10vw, 140px);
}
body { background: var(--noite); color: var(--marfim); font-family: var(--f-txt); font-size: 1rem; line-height: 1.55; letter-spacing: .005em; }
a { color: inherit; }
.am-linha { padding-bottom: .12em; margin-bottom: -.12em; }   /* a máscara do kit não corta as descendentes da serifa */
em { font-style: italic; font-weight: 300; color: var(--acento); }
::selection { background: var(--acento); color: var(--tinta); }

.rotulo { font: 500 .72rem/1.3 var(--f-txt); letter-spacing: .22em; text-transform: uppercase; color: var(--acento); margin: 0 0 20px; }
.titulo { font: 400 clamp(2.2rem, 4.2vw, 4.4rem)/1.02 var(--f-disp); letter-spacing: -.02em; margin: 0 0 16px; }
.corpo { max-width: 46ch; color: var(--mudo-noite); margin: 0; }

/* --- botão (pílula, o mesmo raio do seletor) --- */
.botao { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 999px; background: var(--acento); color: var(--tinta);
  font: 500 .78rem/1 var(--f-txt); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 6px 12px 28px rgba(0,0,0,.28); transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.botao:hover, .botao:focus-visible { background: var(--marfim); color: var(--tinta); }
.botao svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* --- nav: placa própria, cores próprias (nunca herda o :root do amanhecer) --- */
.nav { --nbg: #0A0B0D; position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; gap: 28px;
  padding: 14px var(--m); background: var(--nbg); color: var(--marfim); border-bottom: 1px solid var(--linha);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.logo { display: inline-flex; flex-direction: column; gap: 5px; text-decoration: none; line-height: 1; }
.logo__nome { position: relative; font: 500 1.15rem/1 var(--f-disp); letter-spacing: .16em; padding-left: .16em; }
.logo__nome::after { content: ""; position: absolute; left: -3%; right: -3%; top: 54%; height: 1.5px; background: var(--corte, #0A0B0D); }
.logo__sub { font: 500 .5rem/1 var(--f-txt); letter-spacing: .34em; color: var(--mudo-noite); }
.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a { font: 500 .74rem/1 var(--f-txt); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--mudo-noite); transition: color var(--dur-micro) var(--ease-out); }
.nav__links a:hover { color: var(--marfim); }
.idioma { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--acento); background: rgba(179,144,98,.08); }
.idioma button { appearance: none; border: 0; cursor: pointer; min-width: 44px; height: 34px; border-radius: 999px; background: transparent; color: var(--marfim);
  font: 500 .78rem/1 var(--f-txt); letter-spacing: .12em; transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.idioma button[aria-pressed="true"] { background: var(--acento); color: var(--tinta); }
.nav .botao { padding: 12px 18px; }

/* --- pill de estação (D6): cores próprias --- */
.am-pill { background: rgba(10,11,13,.88); color: var(--marfim); border: 1px solid rgba(179,144,98,.45); font-family: var(--f-txt); }
.am-pill b { color: var(--acento); opacity: 1; }

/* --- cenas: palco sticky do kit, encadeadas --- */
.cena { position: relative; }
.cena .palco { background: transparent; }
.cena canvas { position: absolute; inset: 0; opacity: 0; }
.cena--1 { z-index: 1; } .cena--2 { z-index: 2; } .cena--3 { z-index: 3; } .oferta { z-index: 4; } .cena--4 { z-index: 5; } .rodape { z-index: 6; }
.cena--sobe { margin-top: -100vh; }
.cena--longa { height: 400vh; }
.cena--4 { margin-top: -200vh; }   /* P06: a cena 4 já está pinada quando o anoitecer termina; acende só por opacity */
/* LEI DA TELA CHEIA: o pôster (f0001, mesmo cover e centro do canvas) segura a cena acesa enquanto o canvas não pinta */
.cena--2 .palco--acesa { background: var(--noite) url(assets/frames/cena-2/f0001.jpg) center / cover no-repeat; }
.cena--3 .palco--acesa { background: var(--noite) url(assets/frames/cena-3/f0001.jpg) center / cover no-repeat; }
.cena--4 .palco--acesa { background: var(--noite) url(assets/frames/cena-4/f0001.jpg) center / cover no-repeat; }
/* hero: a máquina começa deslocada à direita (a folha fica livre do título) e volta ao centro enquanto o título sai (main.js) */
#topo { --desloca: 0px; }
.cena--1 .poster, .cena--1 canvas { transform: translate3d(var(--desloca), 0, 0); }
@media (min-width: 821px) { #topo { --desloca: 16vw; } }
.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.veu { position: absolute; inset: 0; pointer-events: none; }
.veu--hero { background: linear-gradient(90deg, rgba(10,11,13,.86) 0%, rgba(10,11,13,.62) 30%, rgba(10,11,13,0) 58%), linear-gradient(0deg, rgba(10,11,13,.55) 0%, rgba(10,11,13,0) 30%); }
.veu--esq { background: linear-gradient(90deg, rgba(10,11,13,.82) 0%, rgba(10,11,13,.5) 34%, rgba(10,11,13,0) 60%); }
.holofote { position: absolute; inset: -50%; z-index: 4; pointer-events: none; background: radial-gradient(circle at calc(50% + var(--desloca)) 50%, rgba(10,11,13,0) 0 9%, #0A0B0D 26%); }

.hero__texto { position: absolute; left: var(--m); bottom: 13vh; z-index: 3; max-width: min(40rem, 46vw); }
.hero__texto h1 { font: 400 clamp(2.6rem, 5vw, 5.4rem)/1 var(--f-disp); letter-spacing: -.025em; margin: 0 0 22px; }
.hero__sub { font-size: 1.08rem; color: var(--mudo-noite); max-width: 36ch; margin: 0 0 32px; }
.hero__acoes { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.pista { font: 500 .7rem/1 var(--f-txt); letter-spacing: .2em; text-transform: uppercase; color: var(--mudo-noite); }

.manifesto { position: absolute; left: var(--m); bottom: 12vh; z-index: 3; max-width: 40rem; opacity: 0; padding: 32px 36px 34px;
  background: rgba(10,11,13,.82); border: 1px solid var(--linha); border-top-color: rgba(179,144,98,.55); border-radius: 4px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 14px 26px 60px rgba(0,0,0,.42); }
.manifesto p { font: 400 clamp(1.7rem, 2.7vw, 2.9rem)/1.16 var(--f-disp); letter-spacing: -.015em; margin: 0; }

/* placa de leitura sobre a mídia (lei do contraste) */
.placa { position: absolute; left: var(--m); bottom: 12vh; z-index: 3; width: min(34rem, 42vw); padding: 32px 36px 34px; opacity: 0; visibility: hidden;
  background: rgba(10,11,13,.8); border: 1px solid var(--linha); border-top-color: rgba(179,144,98,.55); border-radius: 4px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 14px 26px 60px rgba(0,0,0,.42); }
.placa .titulo { font-size: clamp(2rem, 3.4vw, 3.6rem); }
.placa .corpo { max-width: 42ch; }
.placa--dir { left: auto; right: var(--m); }
.manchete { display: block; font: 300 clamp(2rem, 4vw, 4rem)/1 var(--f-disp); letter-spacing: -.01em; color: var(--marfim); text-decoration: none; margin: 8px 0 26px; font-variant-numeric: tabular-nums; }
.manchete:hover { color: var(--acento); }
.convite { font: 400 clamp(2.2rem, 4.2vw, 4.4rem)/1.02 var(--f-disp); letter-spacing: -.02em; margin: 0; }
.convite em { display: inline-block; clip-path: inset(0 100% 0 0); }

/* P10 etiquetas das estações (o kit dá a chapa; aqui só a cor) */
.am-dado { background: rgba(10,11,13,.86); color: var(--marfim); border-color: rgba(179,144,98,.5); font-family: var(--f-txt); letter-spacing: .14em; }
.am-dados path { stroke: var(--acento); stroke-width: 1.2; }

/* P09 a tela que cresce */
.tela { position: absolute; z-index: 2; background: var(--claro); border-radius: 2px; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity; pointer-events: none;
  box-shadow: 0 0 80px rgba(207,224,236,.35); }

/* --- A OFERTA: o ato claro --- */
.oferta { position: relative; height: 400vh; background: var(--bg); color: var(--fg); }
/* P09 → oferta: o palco da oferta mora embaixo da ponte; vazado (transparente) até a tela cobrir o viewport, e o conteúdo acende por --chega (main.js) */
@media (prefers-reduced-motion: no-preference) { .oferta { margin-top: -100vh; } }
.oferta--vazia { background: transparent; }
.oferta__palco > * { opacity: var(--chega, 1); }
.oferta__palco { position: sticky; top: 0; height: 100dvh; overflow: clip; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4vw; padding: 96px var(--m) 72px; box-sizing: border-box; }
.oferta .rotulo { color: color-mix(in oklab, var(--acento) 70%, var(--fg)); }
.oferta .titulo { max-width: 14ch; }
.oferta .corpo { color: var(--mudo); margin-bottom: 40px; }
.oferta__linha { font: 400 clamp(1.3rem, 1.8vw, 1.9rem)/1.2 var(--f-disp); letter-spacing: -.01em; max-width: 30ch; margin: 0 0 32px; }
.mecanismo { position: absolute; left: calc(50% - 150px); top: calc(50% - 60px); width: 120px; height: 120px; z-index: 1; pointer-events: none; }
/* anel de latão escovado: luz fria por cima, linhas de usinagem concêntricas, cônico de latão; cubo de vidro escuro no centro (::after) */
.anel { inset: 0; border-radius: 50%; border: 0;
  background: radial-gradient(circle at 32% 26%, rgba(207,224,236,.5), rgba(207,224,236,0) 36%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,240,214,.10) 0 .6px, rgba(40,28,12,.12) .6px 2.2px),
    conic-gradient(from 200deg, #5e4a2f, #d9c19a 10%, #8a6c44 22%, #caa977 36%, #5a462c 50%, #e4cfa4 63%, #7d6440 77%, #b39062 89%, #5e4a2f);
  box-shadow: 8px 16px 28px rgba(13,15,18,.3), inset 0 0 0 1px rgba(60,44,22,.65), inset 0 1px 0 rgba(255,255,255,.55); }
.anel::after { content: ""; position: absolute; inset: 31%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #3a414c, #0D0F12 72%);
  box-shadow: 0 0 0 2px rgba(10,11,13,.8), inset 0 0 0 1px rgba(207,224,236,.45), inset 0 5px 9px rgba(207,224,236,.2); }
.anel::before { content: ""; position: absolute; inset: 6%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(13,15,18,.55) 0 1.2deg, rgba(13,15,18,0) 1.2deg 7.5deg);
  -webkit-mask: radial-gradient(circle, transparent 0 80%, #000 81%); mask: radial-gradient(circle, transparent 0 80%, #000 81%); }
.anel--3 { background: radial-gradient(circle at 32% 26%, rgba(207,224,236,.42), rgba(207,224,236,0) 34%),
    repeating-radial-gradient(circle at 50% 50%, rgba(207,224,236,.06) 0 .6px, rgba(0,0,0,.18) .6px 2.6px),
    conic-gradient(from 200deg, #0D0F12, #2a2e36 14%, #0D0F12 34%, #3a414c 58%, #0D0F12 80%, #22262d 92%, #0D0F12);
  box-shadow: 8px 16px 28px rgba(13,15,18,.32), inset 0 0 0 2px rgba(207,224,236,.35), inset 0 1px 0 rgba(255,255,255,.4); }
.anel--5::after { background: radial-gradient(circle at 38% 32%, #e4cfa4, #B39062 55%, #6f5636); box-shadow: 0 0 0 2px rgba(60,44,22,.7), inset 0 1px 0 rgba(255,255,255,.5); }
.compromissos { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 2.6vh, 28px); position: relative; z-index: 2; }
/* espera legível (.7); a chegada do anel acende o numeral em latão e sobe o texto 8 px */
.compromissos li { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 18px; opacity: .7; transition: opacity var(--dur-reveal) var(--ease-out); }
.compromissos li.chegou { opacity: 1; }
.compromissos .alvo { width: 48px; height: 48px; }
.compromissos .num { display: block; font: 500 .7rem/1 var(--f-txt); letter-spacing: .2em; color: var(--mudo); margin-bottom: 6px; transition: color var(--dur-reveal) var(--ease-out); }
.compromissos .txt { display: block; font: 400 clamp(1.4rem, 2.1vw, 2.2rem)/1.08 var(--f-disp); letter-spacing: -.01em; transform: translate3d(0, 8px, 0); transition: transform var(--dur-reveal) var(--ease-out); }
.compromissos li.chegou .num { color: color-mix(in oklab, var(--acento) 70%, var(--fg)); }
.compromissos li.chegou .txt { transform: none; }

/* --- footer, a cena final (P12: sobe por cima da cena 4) --- */
.rodape { position: relative; margin-top: -100vh; background: var(--noite); color: var(--marfim); padding: var(--pad) var(--m) 120px; border-top: 1px solid rgba(179,144,98,.4);
  box-shadow: 0 -40px 80px rgba(0,0,0,.5); }
.marca { --corte: var(--noite); display: inline-flex; flex-direction: column; gap: 14px; margin: 0 0 clamp(64px, 9vw, 128px); color: var(--acento); }
.marca .logo__nome { font-size: clamp(3rem, 9.6vw, 10rem); letter-spacing: .1em; padding-left: .1em; font-weight: 400; }
.marca .logo__nome::after { height: max(2px, .03em); }
.marca .logo__sub { font-size: clamp(.62rem, 1.3vw, 1.2rem); color: var(--acento); letter-spacing: .5em; }
.rodape__grade { display: grid; grid-template-columns: 1fr 1.2fr; gap: 6vw; align-items: start; }
.rodape .titulo { font-size: clamp(2rem, 3.2vw, 3.4rem); }
.local { color: var(--mudo-noite); margin: 0; font-variant-numeric: tabular-nums; }
.faq details { border-top: 1px solid var(--linha); padding: 22px 0; }
.faq details:last-child { border-bottom: 1px solid var(--linha); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; font: 400 clamp(1.25rem, 1.7vw, 1.6rem)/1.2 var(--f-disp); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-txt); color: var(--acento); transition: transform var(--dur-micro) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--mudo-noite); max-width: 56ch; margin: 14px 0 0; }
.rodape__pe { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 96px; padding-top: 28px; border-top: 1px solid var(--linha); color: var(--mudo-noite); font-size: .8rem; letter-spacing: .06em; }

a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* --- celular --- */
@media (max-width: 900px) { .nav__links { display: none; } .idioma { margin-left: auto; } }
@media (max-width: 820px) {
  :root { --trilho-cena: 200vh; --m: 20px; }
  .cena--longa { height: 300vh; }
  .nav { gap: 12px; padding: 12px var(--m); }
  .logo__nome { font-size: 1rem; letter-spacing: .12em; }
  .logo__sub { font-size: .44rem; letter-spacing: .24em; }
  .idioma button { min-width: 40px; height: 32px; }
  .nav .botao { padding: 0; width: 40px; height: 40px; justify-content: center; }
  .nav .botao span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .veu--hero, .veu--esq { background: linear-gradient(0deg, rgba(10,11,13,.94) 0%, rgba(10,11,13,.78) 38%, rgba(10,11,13,0) 66%); }
  .hero__texto, .manifesto { left: var(--m); right: var(--m); bottom: 84px; max-width: none; }
  .hero__texto h1 { font-size: clamp(2.3rem, 10vw, 3rem); }
  .hero__sub { font-size: 1rem; margin-bottom: 24px; }
  .placa, .placa--dir { left: var(--m); right: var(--m); bottom: 76px; width: auto; padding: 24px 22px 26px; }
  .placa .titulo { font-size: 2rem; }
  .oferta { height: auto; }
  .oferta__palco { position: static; height: auto; display: block; padding: 84px var(--m) 75vh; }   /* o último trecho é do anoitecer: nenhum texto em cena quando fundo e tinta se cruzam */
  .mecanismo { display: none; }
  .compromissos { margin-top: 48px; }
  .compromissos .alvo { border-radius: 50%; border: 1.5px solid var(--acento); box-shadow: inset 0 0 0 9px rgba(179,144,98,.15); width: 40px; height: 40px; }
  .cena--4 { margin-top: -40vh; }   /* LEI DA TELA CHEIA: a cena 4 sobe sobre o fim vazio da oferta (75vh de anoitecer) e a máquina entra antes de o último compromisso sair */
  /* cena 4 no celular: cover parcial (64dvh de altura, 16:9) com o ponto focal seguindo a máquina (main.js), bordas fundidas no escuro */
  .cena--4 .palco { background: linear-gradient(var(--noite), transparent 14%, transparent 86%, var(--noite)) center / calc(64dvh * 16 / 9) 64dvh no-repeat,
    url(assets/frames/cena-4/f0001.jpg) center / calc(64dvh * 16 / 9) 64dvh no-repeat, var(--noite); }   /* pôster na mesma faixa do canvas */
  .cena--4 canvas { inset: auto; top: 50%; left: 50%; height: 64dvh; width: calc(64dvh * 16 / 9); max-width: none; margin: -32dvh 0 0 calc(-32dvh * 16 / 9);
    -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
  .rodape__grade { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .holofote { display: none; }
  .compromissos li { opacity: 1; }
}