/* BASE — identidade, palco 16:9, tipografia, transições, HUD e sobreposições */
:root {
  --night: #010B1F; --navy: #031F4A; --royal: #0B3975; --silver: #D4D0CF;
  --champ: #D8C49B; --ivory: #F5F4F0; --alert: #C98A8A; --beam: #6E93DE;
  --serif-d: 'Cinzel Decorative', 'Cinzel', 'Trajan Pro', Georgia, serif;
  --serif: 'Libre Baskerville', 'Baskerville', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', 'Segoe UI', Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; cursor: default; }
body { -webkit-font-smoothing: antialiased; user-select: none; }
#stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  transform-origin: center; overflow: hidden; background: var(--night); color: var(--ivory);
  font-family: var(--sans); font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- tipografia ---------- */
.kicker { font: 500 18px/1.2 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--champ); margin: 0; }
.titulo { font-family: var(--serif-d); font-weight: 700; font-size: 76px; line-height: 1.06; margin: 18px 0 0; color: var(--ivory); letter-spacing: .01em; }
.lead { font-family: var(--serif); font-size: 27px; line-height: 1.6; color: rgba(245, 244, 240, .84); margin: 26px 0 0; }
.lead b { color: var(--champ); font-family: var(--sans); font-weight: 600; }

/* ---------- cenas e etapas ---------- */
.scene { position: absolute; inset: 0; overflow: hidden; visibility: hidden; opacity: 0; transform: scale(.94);
  transition: opacity 1.05s ease, transform 1.3s var(--ease), filter 1.05s ease; }
.scene.active { visibility: visible; opacity: 1; transform: none; z-index: 2; }
.scene.leaving { visibility: visible; opacity: 0; transform: scale(1.1); filter: blur(5px); z-index: 1; }
[data-trans="volta"] .scene, [data-trans="simples"] .scene { transition: opacity .55s ease !important; transform: none !important; filter: none !important; }
[data-trans="portas"] .scene.leaving, [data-trans="cortina"] .scene.leaving { transition: opacity .7s ease .1s; transform: none; filter: none; }

[data-step] { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform 1s var(--ease); }
[data-step].on { opacity: 1; transform: none; }
.snap, .snap *, .instant, .instant * { transition: none !important; animation-play-state: paused; }
.instant #fx * { animation: none !important; opacity: 0 !important; }

.bg { position: absolute; inset: -30px; background-size: cover; background-position: center; }
.veu { position: absolute; inset: 0; }
.particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- efeitos de transição entre ambientes ---------- */
#fx { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
#fx > div { position: absolute; inset: 0; opacity: 0; }
.portas { perspective: 2400px; }
.porta { position: absolute; top: 0; bottom: 0; width: 50%;
  background: linear-gradient(90deg, #021433, #05285c 50%, #021433);
  box-shadow: inset 0 0 0 26px #031F4A, inset 0 0 0 27px rgba(212, 208, 207, .35), inset 0 0 0 70px #031F4A, inset 0 0 0 71px rgba(212, 208, 207, .18); }
.porta.e { left: 0; transform-origin: left center; }
.porta.d { right: 0; transform-origin: right center; }
.porta::after { content: ''; position: absolute; top: 46%; width: 6px; height: 110px; border-radius: 3px; background: linear-gradient(180deg, #f2f0ee, #9c9896); box-shadow: 0 0 18px rgba(212, 208, 207, .5); }
.porta.e::after { right: 34px; } .porta.d::after { left: 34px; }
.porta-luz { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(235, 240, 255, .95) 0%, rgba(110, 147, 222, .55) 22%, transparent 60%); opacity: 0; }
[data-trans="portas"] #fx .portas { animation: fxPortas 2.3s ease forwards; }
[data-trans="portas"] #fx .porta.e { animation: portaE 2.3s cubic-bezier(.55, 0, .25, 1) forwards; }
[data-trans="portas"] #fx .porta.d { animation: portaD 2.3s cubic-bezier(.55, 0, .25, 1) forwards; }
[data-trans="portas"] #fx .porta-luz { animation: portaLuz 2.3s ease forwards; }
@keyframes fxPortas { 0% { opacity: 0; } 22% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes portaE { 0%, 38% { transform: rotateY(0); } 100% { transform: rotateY(-96deg); } }
@keyframes portaD { 0%, 38% { transform: rotateY(0); } 100% { transform: rotateY(96deg); } }
@keyframes portaLuz { 0%, 36% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: 0; } }

.cortina { background: repeating-linear-gradient(90deg, #020d24 0 60px, #04173a 60px 95px, #020d24 95px 150px); box-shadow: -40px 0 80px rgba(0,0,0,.6); }
[data-trans="cortina"] #fx .cortina { animation: cortina 1.7s cubic-bezier(.6, 0, .3, 1) forwards; }
@keyframes cortina { 0% { opacity: 1; transform: translateX(100%); } 40%, 55% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; transform: translateX(-102%); } }

.flash { background: radial-gradient(ellipse at 50% 45%, rgba(255, 252, 240, .9), rgba(216, 196, 155, .35) 35%, transparent 70%); }
[data-trans="salao"] #fx .flash { animation: flash 1.5s ease forwards; }
@keyframes flash { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }

/* painel: varredura de luz azul (entrada na Central Estratégica) */
.scan { background: linear-gradient(180deg, transparent 0%, rgba(110, 147, 222, .0) 40%, rgba(150, 185, 255, .55) 50%, rgba(110, 147, 222, .0) 60%, transparent 100%); background-size: 100% 300%; }
[data-trans="painel"] #fx .scan { animation: scan 1.4s ease-in-out forwards; }
@keyframes scan { 0% { opacity: 1; background-position: 0 100%; } 100% { opacity: 1; background-position: 0 0%; } }
/* sala: persianas que se fecham e reabrem (entrada na Sala Financeira) */
.sala-fx { background: repeating-linear-gradient(0deg, #010B1F 0 54px, transparent 54px 108px); }
[data-trans="sala"] #fx .sala-fx { animation: sala 1.4s ease-in-out forwards; }
@keyframes sala { 0% { opacity: 0; transform: scaleY(1.6); } 45% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1.6); } }

/* ---------- componentes reutilizáveis ---------- */
.cab { position: absolute; left: 120px; top: 84px; max-width: 1500px; z-index: 3; }
.cab .titulo { font-size: 60px; }
.cab .lead { font-size: 23px; margin-top: 14px; max-width: 980px; }
.hb { display: grid; gap: 14px; }
.hb-l { display: grid; grid-template-columns: 340px 1fr 190px; align-items: center; gap: 18px; }
.hb-n { font: 400 20px/1.3 var(--serif); color: var(--ivory); }
.hb-n small { display: block; font: 400 14px var(--sans); color: rgba(212, 208, 207, .65); letter-spacing: .03em; }
.hb-t { height: 22px; background: rgba(212, 208, 207, .07); border-radius: 3px; overflow: hidden; }
.hb-t i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #3A5DA6, #7E9FE6); transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease) var(--d, 0s); }
.on .hb-t i, .on.hb .hb-t i { transform: scaleX(1); }
.hb-l.ouro .hb-t i { background: linear-gradient(90deg, #b99f6b, #ead9b4); }
.hb-l.ouro .hb-n { color: var(--champ); }
.hb-l.neg .hb-t i { background: linear-gradient(90deg, #8f5f66, var(--alert)); }
.hb-l b { font: 600 22px var(--sans); text-align: right; }
.ring { position: relative; width: 200px; text-align: center; }
.ring svg { width: 200px; height: 200px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring .bgc { stroke: rgba(212, 208, 207, .1); }
.ring .val { stroke: var(--beam); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.4s var(--ease) .2s; }
.on .ring .val, .ring.on .val { stroke-dasharray: var(--v) 100; }
.ring.ouro .val { stroke: var(--champ); }
.ring b { position: absolute; left: 0; right: 0; top: 70px; font: 300 46px/1 var(--sans); color: var(--ivory); }
.ring span { display: block; margin-top: 12px; font: 400 18px/1.4 var(--serif); color: rgba(245, 244, 240, .85); }
.painel { background: linear-gradient(180deg, rgba(5, 40, 92, .66), rgba(3, 31, 74, .5)); border: 1px solid rgba(212, 208, 207, .2); border-radius: 6px; backdrop-filter: blur(10px); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }
.rot { font: 500 14px var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--champ); margin: 0 0 12px; }
.num-g { font: 300 84px/1 var(--sans); color: var(--ivory); letter-spacing: -.01em; }
.num-m { font: 600 40px/1.15 var(--sans); color: var(--ivory); }
.ouro-t { color: var(--champ) !important; }
.nota-i { font: italic 19px/1.55 var(--serif); color: rgba(245, 244, 240, .8); }
.foto { position: absolute; background-size: cover; background-position: center; border: 1px solid rgba(212, 208, 207, .3); border-radius: 4px; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
.stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .8s var(--ease); }
.on.stagger > *, .on .stagger > * { opacity: 1; transform: none; }
.stagger > *:nth-child(2) { transition-delay: .08s; } .stagger > *:nth-child(3) { transition-delay: .16s; } .stagger > *:nth-child(4) { transition-delay: .24s; }
.stagger > *:nth-child(5) { transition-delay: .32s; } .stagger > *:nth-child(6) { transition-delay: .40s; } .stagger > *:nth-child(7) { transition-delay: .48s; } .stagger > *:nth-child(8) { transition-delay: .56s; }

/* ---------- rodapé, HUD e progresso ---------- */
.rodape { position: absolute; right: 48px; bottom: 24px; display: flex; gap: 16px; align-items: center; z-index: 5;
  font: 400 14px var(--sans); color: rgba(212, 208, 207, .55); letter-spacing: .04em; }
.rodape .selo { border: 1px solid rgba(212, 208, 207, .35); padding: 5px 12px; border-radius: 30px; text-transform: uppercase; letter-spacing: .16em; font-size: 11px; }
.hud { position: absolute; left: 48px; bottom: 24px; z-index: 15; display: flex; gap: 18px; font: 500 13px var(--sans);
  letter-spacing: .2em; text-transform: uppercase; color: rgba(212, 208, 207, .5); pointer-events: none; }
.hud .hud-cena { letter-spacing: .08em; text-transform: none; color: rgba(212, 208, 207, .38); }
#progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(212, 208, 207, .07); z-index: 15; }
#progress-bar { height: 100%; transform-origin: left; transform: scaleX(0); transition: transform .8s var(--ease);
  background: linear-gradient(90deg, var(--royal), var(--beam), var(--champ)); }
.sem-hud .hud, .sem-hud #progress { opacity: 0; }

/* ---------- sobreposições ---------- */
.overlay { position: absolute; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center;
  background: rgba(1, 11, 31, .82); backdrop-filter: blur(8px); }
.overlay.show { display: flex; }
.ov-box { width: 980px; max-height: 920px; overflow: hidden; padding: 48px 56px; background: linear-gradient(180deg, #05285c, #031F4A);
  border: 1px solid rgba(212, 208, 207, .3); border-radius: 10px; box-shadow: 0 30px 90px rgba(0,0,0,.6); font-family: var(--sans); color: var(--ivory); }
.ov-box h3 { font: 700 40px var(--serif-d); margin: 0 0 24px; color: var(--champ); }
.ov-box p { font-size: 21px; line-height: 1.5; color: rgba(245,244,240,.85); }
.ov-box .dica { font-size: 16px; color: rgba(212,208,207,.6); margin-top: 26px; letter-spacing: .04em; }
.ov-box.menu { width: 1500px; max-height: 1000px; padding: 36px 48px; }
.menu ol { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 30px; }
.menu li { font-size: 17px; padding: 5px 12px; border-radius: 6px; break-inside: avoid; }
.menu li.amb { font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--champ); padding: 14px 12px 4px; }
.menu li.it { cursor: pointer; } .menu li.it b { display: inline-block; width: 36px; color: var(--beam); }
.menu li.sel { background: rgba(110, 147, 222, .25); outline: 1px solid rgba(212,208,207,.4); }
.menu li.cur::after { content: '  · atual'; color: var(--champ); font-size: 16px; }
.goto .num { font: 200 140px var(--sans); text-align: center; color: var(--ivory); }
.teste .tst { display: flex; gap: 30px; margin: 28px 0; }
.teste .c { flex: 1; border: 1px solid rgba(212,208,207,.3); border-radius: 8px; padding: 26px; text-align: center; transition: background .2s; }
.teste .c span { display: block; font-size: 16px; letter-spacing: .25em; text-transform: uppercase; color: var(--champ); }
.teste .c b { font: 200 90px var(--sans); }
.teste .c.pisca { background: rgba(110, 147, 222, .35); }
.teste .ult b { color: var(--champ); } .teste .map { font-size: 17px; color: rgba(212,208,207,.75); }
.teste .modo { font-size: 24px; color: var(--champ); border: 1px dashed var(--champ); padding: 16px; border-radius: 6px; }
.ajuda dl { display: grid; grid-template-columns: 340px 1fr; gap: 12px 24px; font-size: 21px; margin: 0; }
.ajuda dt { color: var(--champ); font-weight: 600; } .ajuda dd { margin: 0; }
#toast { position: absolute; top: 36px; left: 50%; transform: translate(-50%, -20px); z-index: 40; opacity: 0; transition: .4s;
  padding: 14px 28px; border-radius: 40px; background: rgba(3,31,74,.92); border: 1px solid rgba(212,208,207,.35);
  font: 500 18px var(--sans); color: var(--ivory); letter-spacing: .03em; pointer-events: none; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- modo seguro (A) ---------- */
.calm .scene { transition: opacity .5s ease !important; transform: none !important; filter: none !important; }
.calm .particles, .calm .luzes { display: none; }
.calm [data-step] { transition-duration: .35s !important; }
.calm #fx { display: none; }

/* ---------- celular e telas de toque ---------- */
html, body { touch-action: none; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body { -webkit-touch-callout: none; }
#toque { position: fixed; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); z-index: 50;
  display: none; gap: 8px; }
#toque button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(212, 208, 207, .35); background: rgba(1, 11, 31, .55);
  color: #D4D0CF; font: 400 20px/1 system-ui, sans-serif; display: grid; place-items: center; padding: 0; opacity: .55;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#toque button:active { opacity: 1; background: rgba(11, 57, 117, .85); }
@media (hover: none), (pointer: coarse) { #toque { display: flex; } }
/* celular em pé com o slide girado: botões centralizados na faixa de baixo, fora do slide */
.girado #toque { left: 50%; right: auto; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom)); gap: 14px; }
.mirror #toque { display: none !important; }
/* a página nunca fica maior que a tela (o palco de 1920 px é só escalado) */
html, body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; }