/* O palco inteiro é a janela da câmera; não há perspectiva CSS ancestral.
   Altura dinâmica (dvh): no iPhone a barra do Safari recolhe ao rolar e a
   área visível cresce; com 100svh o hero preso ao topo parava antes do
   fim da tela, deixando uma faixa vazia embaixo com o console cortado, e
   a câmera enquadrava para uma janela mais baixa que a real (relato do
   proprietário em 19/09, no aparelho). Com dvh o palco acompanha a barra
   e o ResizeObserver reenquadra. svh fica como reserva. */
:root { --console-scene-h: 100svh; }
@supports (height: 100dvh) { :root { --console-scene-h: 100dvh; } }
.hero { height:var(--console-scene-h); min-height:520px; overflow:clip; }
.hero__grid { display:block; width:100%; max-width:none; height:100%; padding:0; margin:0; }
.hero__grid .stage {
  position:absolute; inset:0; width:100%; height:100%; max-width:none; margin:0;
  perspective:none; aspect-ratio:auto; cursor:grab; touch-action:manipulation;
}
.stage.arrastando { cursor:grabbing; }
.console-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.console-ui { position:absolute; inset:0; pointer-events:none; }
.stage .tela { left:0;top:0;transform-origin:0 0;border-radius:4.6% / 5%;cursor:pointer; } /* raio de 2,8 mm da abertura do bezel */
.stage .hit { transform:none;z-index:4;cursor:pointer; }
.stage .hit[hidden],.stage .tela[hidden] { display:none; }
body[data-intro="ativa"] .stage .hit { pointer-events:auto; }
body[data-intro="ativa"] .stage .tela { pointer-events:none; }
body.ampliado--forte .stage .hit { transform:none !important; }
/* Anel de foco só para o teclado, e em cobre: no clique o foco vai por
   script ao botão e o Chromium desenhava o anel verde da tela em volta. */
.stage .hit:focus-visible { outline:2px solid var(--cobre-claro);outline-offset:2px;border-radius:50%; }
.stage.foco-ponteiro .hit:focus-visible { outline:none; }
.hero-wordmark {
  position:absolute;left:0;right:0;top:calc(var(--topo-h) - 8px);margin:0;z-index:0;text-align:center;
  font:800 clamp(72px,23vw,430px)/.88 var(--font-interface);letter-spacing:-.05em;
  /* A largura já está no limite da tela, então a altura extra vem de uma
     escala só no eixo Y; intro3d.js repete a escala no transform da rolagem. */
  --wordmark-alto:1.25;transform:scaleY(var(--wordmark-alto));transform-origin:50% 50%;
  color:var(--pergaminho);opacity:.9;white-space:nowrap;pointer-events:none;
  /* Pergaminho manchado, como papel ou concreto sujo (referência do
     proprietário, 19/09): por cima do gradiente e do grão entram três
     camadas de manchas geradas por ruído fractal no SVG (blotches largos,
     salpicos finos e estrias verticais), esticadas ao tamanho da linha. */
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='480' viewBox='0 0 1600 480' preserveAspectRatio='none'%3E%3Cfilter id='m' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0024 0.0042' numOctaves='4' seed='7' result='a'/%3E%3CfeColorMatrix in='a' type='matrix' values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .09 2.1 0 0 0 -.85' result='blotch'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09' numOctaves='2' seed='3' result='b'/%3E%3CfeColorMatrix in='b' type='matrix' values='0 0 0 0 .12 0 0 0 0 .09 0 0 0 0 .06 0 1.5 0 0 -1.05' result='speck'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03 0.0012' numOctaves='3' seed='11' result='c'/%3E%3CfeColorMatrix in='c' type='matrix' values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .1 0 0 1 0 -.55' result='streak'/%3E%3CfeMerge%3E%3CfeMergeNode in='streak'/%3E%3CfeMergeNode in='blotch'/%3E%3CfeMergeNode in='speck'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23m)'/%3E%3C/svg%3E") center / 100% 100% no-repeat,linear-gradient(rgba(233,219,179,.9),rgba(190,164,115,.92)),url('../assets/textures/grain.webp') repeat;
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
/* Dentro do fundo fixo, .fundo > div { inset:0 } venceria o top de cima.
   O console começa a 28% da altura (span .34 em motion.js: 44% de altura,
   centrado) e cobre a parte de baixo das letras: o centro da linha do
   wordmark fica um pouco acima, em 25%, descontada meia linha da caixa
   (23vw * .88 / 2; a escala em Y não muda a caixa nem o centro). */
.fundo > .hero-wordmark { inset:auto;left:0;right:0;top:calc(25vh - 10.1vw);top:calc(var(--console-scene-h) * .25 - 10.1vw); }
.hero__grid .legenda { position:absolute;right:5vw;bottom:12%;z-index:5;pointer-events:none; }
/* Boas-vindas: texto solto à esquerda, abaixo do wordmark, no vão que o
   console pequeno deixa. Sem caixa: não é um cartão da história. */
.intro {
  left:5vw;right:auto;top:58%;bottom:auto;width:min(34vw,460px);transform:translateY(-50%);text-align:left;z-index:6;transition:none;
}
.intro__passo { position:static;font-size:16px; }
.intro__titulo { font-size:clamp(24px,2.5vw,36px); }
.intro__kicker { font-size:11px; }
.intro__linha { font-size:14px; }
.intro__passo--vazio { font-size:12px;max-width:25ch;opacity:.65;color:var(--areia); }
.intro__pular {
  position:absolute;left:auto;right:4vw;bottom:24px;transform:none;width:auto;z-index:9;
  padding:0;background:transparent;border:0;backdrop-filter:none;border-radius:0;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(190,164,115,.45);
}
/* Cantos de baixo, à direita: primeiro "continue rolando", depois a dica do
   arraste no mesmo lugar, e o "pular intro" abaixo dos dois. */
.scene-hint { position:absolute;right:4vw;bottom:54px;z-index:5;margin:0;pointer-events:none;text-align:right; font:500 11px/1.4 var(--font-interface);letter-spacing:.2em;text-transform:uppercase;color:var(--areia); }
body[data-intro="ativa"] .scene-hint { opacity:0; }
.scene-scroll { position:absolute;right:4vw;bottom:54px;z-index:5;margin:0;pointer-events:none;text-align:right; font:500 11px/1.4 var(--font-interface);letter-spacing:.2em;text-transform:uppercase;color:var(--areia); }
.scene-scroll span { display:inline-block;margin-left:6px;animation:scene-scroll-seta 1.6s ease-in-out infinite; }
@keyframes scene-scroll-seta { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }
body.console-estatico .scene-hint,body.console-estatico .legenda div:last-child,
body.intro-estatica .scene-hint,body.intro-estatica .legenda div:last-child { display:none; }
.scene-loading { position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font:500 12px/1.5 var(--font-interface);letter-spacing:.16em;color:var(--cobre); }
.stage[data-console="ready"] .scene-loading,.stage[data-console="fallback"] .scene-loading { display:none; }
.stage[data-console="loading"] .console-ui { visibility:hidden; }
.intro-esperando .stage { visibility:visible; }
/* A tela escura do próprio GLB aparece durante a apresentação. */
.console-fallback { display:none; }
.stage[data-console="fallback"] .console-canvas { display:none; }
.stage[data-console="fallback"] .console-fallback,
.stage[data-console="fallback"] .console-ui {
  display:block;position:absolute;inset:auto;left:50%;top:50%;width:min(98vw,calc(var(--console-scene-h) * .58));
  height:auto;aspect-ratio:840/1410;transform:translate(-50%,-50%);
}
.console-fallback .lyr { position:absolute;inset:0; }
.console-fallback .lyr img { position:absolute;width:100%;height:100%; }
.console-fallback .lyr img.peca { width:auto;height:auto; }
.stage[data-console="fallback"] .tela { left:16.43%;top:15.04%;width:67.26%;height:36.31%;transform:none; }
.stage[data-console="fallback"] #h-up {left:20.4%;top:60%;width:15.8%;height:5.6%}
.stage[data-console="fallback"] #h-down {left:20.4%;top:71.2%;width:15.8%;height:5.6%}
.stage[data-console="fallback"] #h-left {left:14.4%;top:65.6%;width:6%;height:5.6%}
.stage[data-console="fallback"] #h-right {left:36.2%;top:65.6%;width:6%;height:5.6%}
.stage[data-console="fallback"] #h-a {left:71.2%;top:60.2%;width:14%;height:8.3%}
.stage[data-console="fallback"] #h-b {left:56.7%;top:67.9%;width:14%;height:8.3%}
.stage[data-console="fallback"] #h-start {left:35.4%;top:80.9%;width:12.3%;height:4.3%}
.stage[data-console="fallback"] #h-menu {left:52.5%;top:80.9%;width:12.3%;height:4.3%}
body.intro-estatica .hero { height:auto;min-height:var(--console-scene-h); }
body.intro-estatica .hero__grid { height:var(--console-scene-h); }
body.intro-estatica .intro { position:relative;left:auto;bottom:auto;top:auto;width:min(90%,46ch);margin:0 auto 30px;transform:none; }
body.intro-estatica .intro__passo { position:static;font-size:15px; }
body.og .hero { height:var(--console-scene-h); }
body.og .scene-hint { display:none; }
@media(max-width:1023px){
  .hero { min-height:400px; }
  .hero__grid .legenda { display:none; }
  .intro { width:min(46vw,400px);top:60%; }
  .intro__titulo {font-size:24px;}
  .intro__linha {font-size:12px;}
  .scene-hint,.scene-scroll {bottom:44px;right:5vw;font-size:10px;}
}
@media(max-width:600px){
  .fundo > .hero-wordmark {top:calc(25vh - 10.3vw);top:calc(var(--console-scene-h) * .25 - 10.3vw);font-size:23.5vw;--wordmark-alto:1.5;}
  .intro {left:5vw;right:5vw;width:auto;top:auto;bottom:11%;transform:none;}
  .intro__titulo {font-size:21px;}
  .intro__kicker {font-size:10px;}
  .intro__linha {font-size:12px;line-height:1.3;}
  .intro__pular {right:5vw;bottom:16px;font-size:10px;}
  .intro__passo--vazio {font-size:10px;}
  body.ficha-aberta .stage {aspect-ratio:auto;}
}
@media(prefers-reduced-motion:reduce){.hero-wordmark,.scene-hint,.scene-scroll{display:none;}}

/* ---------- Cartões da história ----------
   Um cartão por close, no lado que o console deixa livre. Dois pesos, como
   na referência: os textos principais são tipografia solta, sem caixa, com
   índice, título, filete e um véu radial atrás que garante a leitura sem
   desenhar borda; as sidenotes são painéis escuros compactos, com rótulo,
   ponto de cobre e filete. A opacidade e o leve deslize vêm de intro3d.js;
   o lado, de INTRO.cartoes; o enquadramento que abre o lado, de motion.js. */
.cartoes { position:absolute;inset:0;z-index:6;pointer-events:none; }
.cartoes[hidden],.scene-scroll[hidden] { display:none; }
.cartao { position:absolute;inset:0;margin:0;opacity:0;will-change:opacity,transform; }
.cartao__bloco { position:absolute;top:50%;transform:translateY(-50%);margin:0;width:min(36vw,540px); }
.cartao__bloco::before {
  content:"";position:absolute;inset:-16% -20%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(11,9,8,.78),rgba(11,9,8,.5) 50%,transparent);
}
.cartao--direita .cartao__bloco { right:6vw; }
.cartao--esquerda .cartao__bloco { left:6vw; }
.cartao__indice { display:block;margin:0 0 16px;font:500 11px/1.4 var(--font-interface);letter-spacing:.32em;text-transform:uppercase;color:var(--cobre); }
.cartao__titulo {
  display:block;margin:0 0 22px;font:600 clamp(30px,3.3vw,54px)/.96 var(--font-interface);letter-spacing:.01em;
  text-transform:uppercase;color:var(--pergaminho);text-shadow:0 2px 14px rgba(0,0,0,.55);
}
.cartao__titulo::after { content:"";display:block;width:40px;height:1px;margin-top:20px;background:var(--cobre); }
.cartao__texto {
  display:block;font:400 clamp(16px,1.2vw,19px)/1.5 var(--font-body);color:var(--pergaminho);white-space:pre-line;
  text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 20px rgba(11,9,8,.75);
}
.cartao__texto--vazio { font-style:italic;color:var(--cobre);opacity:.7; }
/* Sidenote: painel escuro, quase opaco, mais baixo no lado livre. */
.cartao--nota .cartao__bloco {
  top:auto;bottom:14%;transform:none;width:min(30vw,400px);padding:18px 22px 22px;
  background:rgba(16,13,11,.94);border:1px solid rgba(190,164,115,.22);box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.cartao--nota .cartao__bloco::before { display:none; }
.cartao__rotulo {
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;padding-bottom:14px;
  border-bottom:1px solid rgba(190,164,115,.25);font:500 15px/1.3 var(--font-body);color:var(--pergaminho);
}
.cartao__rotulo::after { content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--cobre);box-shadow:0 0 10px rgba(232,211,154,.55); }
.cartao--nota .cartao__texto { font-size:clamp(15px,1.05vw,17px);line-height:1.5;color:var(--areia);text-shadow:none; }
/* Sem movimento: os cartões viram blocos comuns, abaixo das boas-vindas. */
body.intro-estatica .cartoes { position:relative;inset:auto;width:min(90%,60ch);margin:0 auto 30px; }
body.intro-estatica .cartao { position:static;margin:0 0 28px;opacity:1 !important;transform:none !important; }
body.intro-estatica .cartao__bloco,body.intro-estatica .cartao--nota .cartao__bloco { position:static;transform:none;width:auto; }
body.intro-estatica .cartao__bloco::before { display:none; }
@media(max-width:1023px){
  .cartao__bloco { width:min(44vw,420px); }
  .cartao__titulo { font-size:clamp(26px,4vw,34px); }
  .cartao__texto { font-size:15px;line-height:1.45; }
  .cartao--nota .cartao__bloco { width:min(40vw,360px);padding:16px 18px 18px; }
}
@media(max-width:700px){
  /* No celular não sobra lado, então as faixas alternam: os textos
     principais ocupam o alto, sobre o fundo que o console deixa livre
     (motion.js baixa o detalhe nesses closes); as sidenotes ficam embaixo,
     com o detalhe no alto. */
  .cartao__bloco,.cartao--direita .cartao__bloco,.cartao--esquerda .cartao__bloco {
    left:6vw;right:6vw;width:auto;top:calc(var(--topo-h) + var(--console-scene-h) * .03);bottom:auto;transform:none;
  }
  .cartao__bloco::before { inset:-12% -10%; }
  .cartao__indice { margin-bottom:12px; }
  .cartao__titulo { font-size:clamp(26px,8vw,34px);margin-bottom:16px; }
  .cartao__titulo::after { margin-top:14px;width:32px; }
  .cartao__texto { font-size:15px;line-height:1.45; }
  .cartao--nota .cartao__bloco { top:auto;bottom:11%;width:auto;padding:16px 18px 18px; }
  .cartao__rotulo { font-size:14px;margin-bottom:12px;padding-bottom:12px; }
  .cartao--nota .cartao__texto { font-size:14px;line-height:1.45; }
  .cartao__texto--vazio { font-size:11px; }
}