/* Telão de estande: monotema por decisão, vive no escuro de um painel de LED. */

:root{
  color-scheme: dark;

  --void:      #060D16;
  --void-2:    #0A1524;
  --line:      #16293D;
  --concrete:  #7C8FA3;
  --steel:     #5FD8FF;
  --exact:     #0B63C5;
  --paper:     #EAF2F8;
  --muted:     #6E8397;
  --oxide:     #C4562F;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --sans: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  background:
    radial-gradient(120% 80% at 45% 38%, #0E2138 0%, var(--void) 62%),
    var(--void);
  color:var(--paper);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  cursor:none;
}
body.mostrar-cursor{ cursor:default; }

/* grade de prancha */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0;
  background-image:
    linear-gradient(to right, rgba(95,216,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(95,216,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(90% 70% at 45% 45%, #000 20%, transparent 78%);
  pointer-events:none;
}

#cena{ position:fixed; inset:0; width:100%; height:100%; z-index:1; }

.hud{ position:fixed; inset:0; z-index:2; pointer-events:none; }
.hud > *{ position:absolute; }

/* ── marca ── */
.marca{ top:38px; left:44px; display:flex; align-items:center; gap:13px; }
.marca-txt{
  font-weight:800; font-size:21px; letter-spacing:-.03em;
  line-height:.98; text-transform:uppercase;
}
.marca-txt span{ display:block; }
.marca-txt span + span{ color:#9FC4E4; }

.parceria{
  top:38px; left:44px; transform:translateY(64px);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:#3F6180;
}

/* ── estado ── */
.estado{
  top:40px; right:44px;
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted);
}
.bolinha{ width:8px; height:8px; border-radius:50%; background:var(--muted); }
.estado[data-vivo="1"]{ color:var(--steel); }
.estado[data-vivo="1"] .bolinha{ background:var(--steel); animation:pulsar 1.6s ease-out infinite; }
@keyframes pulsar{
  0%{ box-shadow:0 0 0 0 rgba(95,216,255,.45); }
  70%{ box-shadow:0 0 0 10px rgba(95,216,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(95,216,255,0); }
}

/* ── cota ── */
.cota{
  left:44px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:11px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:#4E7492;
}
.cota-regua{
  width:1px; height:200px; position:relative;
  background:linear-gradient(transparent, #2A4A69 12%, #2A4A69 88%, transparent);
}
.cota-regua::before, .cota-regua::after{
  content:""; position:absolute; left:-4px; width:9px; height:1px; background:#2A4A69;
}
.cota-regua::before{ top:0; } .cota-regua::after{ bottom:0; }
.cota-val{ writing-mode:vertical-rl; }

/* ── atlas de camadas ──
   A régua do "corpo humano": mostra em que profundidade o raio-X está.
   Fica junto da cota, no flanco esquerdo — é instrumento, não decoração. */
.atlas{
  left:104px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:14px;
}
.atlas span{
  position:relative;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:#33556F;
  padding-left:18px;
  transition:color .5s ease;
}
.atlas span::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border:1px solid #2A4A69; border-radius:50%;
  transition:background .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.atlas span.ativa{ color:var(--steel); }
.atlas span.ativa::before{
  background:var(--steel); border-color:var(--steel);
  box-shadow:0 0 9px rgba(95,216,255,.7);
}
.atlas span.passada{ color:#5B7E9B; }
.atlas span.passada::before{ background:#2A4A69; border-color:#2A4A69; }

/* ── carimbo da camada ──
   O nome da camada estampa o telão no instante do corte do scanner e
   evapora — reforça a leitura de atlas sem virar poluição permanente. */
.carimbo{
  left:40%; top:34%; transform:translate(-50%,-50%);
  font-weight:800; font-size:clamp(40px, 5vw, 84px);
  letter-spacing:.06em; text-transform:uppercase;
  color:transparent; -webkit-text-stroke:1.5px rgba(140,228,255,.0);
  pointer-events:none; white-space:nowrap;
}
.carimbo.on{ animation:carimbar 1.5s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes carimbar{
  0%{ -webkit-text-stroke-color:rgba(140,228,255,0); opacity:0; transform:translate(-50%,-50%) scale(1.12); }
  22%{ -webkit-text-stroke-color:rgba(140,228,255,.85); opacity:1; }
  100%{ -webkit-text-stroke-color:rgba(140,228,255,0); opacity:0; transform:translate(-50%,-50%) scale(0.98); }
}
@media (prefers-reduced-motion: reduce){ .carimbo{ display:none; } }

/* ── painel de números ── */
.numeros{
  right:44px; top:122px;
  width:min(380px, 32vw);
  display:flex; flex-direction:column;
}
.num{
  padding:15px 0 16px;
  border-top:1px solid var(--line);
  opacity:0; transform:translateY(12px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.num:last-child{ border-bottom:1px solid var(--line); }
.num.on{ opacity:1; transform:none; }
.num-k{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.num-v{
  font-weight:800; font-size:clamp(32px, 3.6vw, 50px); line-height:.92;
  letter-spacing:-.045em; font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; gap:8px;
}
.num-v .u{ font-size:.40em; font-weight:600; letter-spacing:-.01em; color:#9FC4E4; }
.num-nota{ font-family:var(--mono); font-size:10.5px; color:#4E7492; margin-top:8px; }
.num.perda .num-v{ color:var(--oxide); }
.num.perda .num-v .u{ color:#A9714F; }

/* ── convite (repouso) ── */
.convite{
  left:40%; bottom:130px; transform:translateX(-50%);
  width:min(900px, 58vw); text-align:center;
  transition:opacity .5s ease;
}
.convite-h{
  font-weight:800; font-size:clamp(38px, 4.6vw, 70px); line-height:.9;
  letter-spacing:-.05em; text-transform:uppercase; text-wrap:balance;
}
.convite-h em{ font-style:normal; color:var(--steel); }
.convite-s{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-top:22px;
}
.oculto{ opacity:0 !important; }

/* ── etapas da conversa ──
   O visitante precisa saber que isso tem fim: sem a trilha, uma IA que faz
   perguntas em sequência parece um interrogatório sem fundo. */
.etapas{
  left:40%; bottom:412px; transform:translateX(-50%);
  display:flex; gap:10px; align-items:center;
  opacity:0; transition:opacity .4s ease;
}
.etapas.on{ opacity:1; }
.etapas span{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:#33556F;
  padding:7px 13px; border:1px solid var(--line);
  transition:color .35s ease, border-color .35s ease, background .35s ease;
  white-space:nowrap;
}
.etapas span.feita{ color:#5B7E9B; border-color:#22405C; }
.etapas span.feita::before{ content:"✓ "; color:var(--steel); }
.etapas span.ativa{
  color:var(--void); background:var(--steel); border-color:var(--steel);
  font-weight:700;
}

/* ── legenda da conversa ── */
.legenda{
  left:40%; bottom:120px; transform:translateX(-50%);
  width:min(880px, 62vw); text-align:center;
  opacity:0; transition:opacity .4s ease;
}
.legenda.on{ opacity:1; }
.legenda-k{
  font-family:var(--mono); font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--steel); margin-bottom:16px;
}
.legenda-t{
  font-size:clamp(20px, 2.3vw, 34px); line-height:1.4;
  font-weight:600; letter-spacing:-.02em; text-wrap:balance;
}
.legenda-eco{
  font-family:var(--mono); font-size:13px; color:#4E7492;
  margin-top:18px; min-height:1.2em;
}

/* medidor de voz */
.ondas{ display:flex; gap:4px; justify-content:center; align-items:flex-end; height:26px; margin-top:20px; opacity:0; transition:opacity .3s; }
.ondas.on{ opacity:1; }
.ondas i{ width:3px; height:5px; background:var(--steel); border-radius:2px; transition:height .09s ease; }

/* ── QR final ── */
/* ancorado no rodapé: os números crescem de cima para baixo e o QR sobe do
   pé da tela — foi assim que pararam de se sobrepor no quadro final */
.qr{
  right:44px; bottom:66px;
  width:190px; text-align:center;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
.qr.on{ opacity:1; transform:none; }
.qr img{ width:158px; height:158px; display:block; margin:0 auto 14px; background:#fff; padding:9px; }
.qr-t{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); line-height:1.7;
}

/* ── rodapé ── */
.rodape{
  left:0; right:0; bottom:0;
  padding:20px 44px 22px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:#3F6180;
  border-top:1px solid var(--line);
  background:linear-gradient(transparent, rgba(6,13,22,.9) 55%);
}

/* ── console do operador (tecla O) ── */
.operador{
  position:fixed; z-index:9; left:0; right:0; bottom:0;
  background:var(--void-2); border-top:1px solid var(--steel);
  padding:18px 44px; display:none; gap:18px; align-items:center;
  pointer-events:auto;
}
.operador.on{ display:flex; }
.operador label{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel);
}
.operador input{
  flex:1; background:#04101C; border:1px solid var(--line); color:var(--paper);
  font-family:var(--mono); font-size:15px; padding:12px 14px;
}
.operador input:focus{ outline:2px solid var(--steel); outline-offset:2px; }
.operador .dica{ font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.1em; }

/* ── diagnóstico (tecla D) ── */
.diag{
  position:fixed; z-index:9; top:0; right:0;
  background:var(--void-2); border-left:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:20px 26px; display:none; min-width:300px;
  font-family:var(--mono); font-size:11px; line-height:2; color:var(--muted);
}
.diag.on{ display:block; }
.diag b{ color:var(--paper); font-weight:600; }
.diag .ok{ color:var(--steel); }
.diag .falha{ color:var(--oxide); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ── o instante em que a obra vira a dele ──
   Um sopro de luz que atravessa o telão de baixo para cima, na direção em que
   o prédio cresce. Dura meio segundo e não se repete na mesma conversa. */
.pulso{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(to top, rgba(95,216,255,.42), rgba(95,216,255,.10) 40%, transparent 72%);
  animation:sopro .85s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes sopro{
  0%{ opacity:0; transform:translateY(22%); }
  28%{ opacity:1; }
  100%{ opacity:0; transform:translateY(-14%); }
}
@media (prefers-reduced-motion: reduce){ .pulso{ display:none; } }