/* topo.css · #topo. A telinha é a tela do quarto escuro: a "luz de monitor" sai dela,
   acende a figura de baixo para cima e é a luz que o vidro da telinha refrata.
   Camadas (de trás para a frente): luz ambiente → figura (img) → #topo-canvas → corpo (telinha, texto).
   Quando topo3d.js assume, topo.js põe .topo--3d e a figura estática some (o canvas desenha). */

.topo {
  --cena-alto: clamp(270px, 41svh, 380px);
  --sobreposicao: .21;                       /* quanto da cena fica atrás da telinha */
  --telinha-largura: 640px;
  position: relative;
  min-height: 100svh;
  padding: calc(var(--seguro-topo) + 10px) var(--margem) calc(var(--reserva-baixo) + 40px);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  overflow: clip;
}

/* ---------- Cena: luz + figura ---------- */
.topo__cena {
  position: relative;
  width: 100%;
  height: var(--cena-alto);
  margin-bottom: calc(var(--cena-alto) * var(--sobreposicao) * -1);
  display: grid; justify-items: center;
  pointer-events: none;
}
/* luz ambiente do monitor: nasce atrás da telinha e sobe pela figura */
.topo__cena::before {
  content: "";
  position: absolute;
  left: 50%; bottom: calc(var(--cena-alto) * -.12);
  width: min(150vw, 1500px); height: calc(var(--cena-alto) * 1.25);
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgb(var(--luz-monitor-rgb) / .30), rgb(var(--luz-monitor-rgb) / .12) 45%, rgb(var(--luz-monitor-rgb) / .03) 72%, transparent);
  filter: blur(8px);
}
/* reflexo frio no "chão", abaixo da telinha, onde fica o título */
.topo::before {
  content: "";
  position: absolute; z-index: 0;
  left: 50%; top: calc(var(--seguro-topo) + var(--cena-alto) * .7);
  width: min(130vw, 1400px); height: calc(var(--cena-alto) * 1.5);
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(var(--luz-monitor-rgb) / .075), transparent);
  pointer-events: none;
}

.topo__figura {
  position: relative;
  width: min(var(--cena-alto), 100%);
  height: var(--cena-alto);
  min-width: 0;
  isolation: isolate;
}
.topo__avatar {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: brightness(.95) contrast(1.05);
}
/* a luz da tela pinta só os caracteres (máscara = o próprio avatar):
   embaixo, perto da tela, azul frio e forte; em cima, sombra */
.topo__luz-figura {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 72% 80% at 50% 100%, #e6f2ff 0%, var(--luz-monitor) 30%, #4f6f96 62%, #1d2738 92%);
  mix-blend-mode: multiply;
  -webkit-mask: url("../../assets/avatar/fakedev.webp") center / contain no-repeat;
  mask: url("../../assets/avatar/fakedev.webp") center / contain no-repeat;
}

.topo__canvas {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}
.topo--3d .topo__figura { visibility: hidden; }

/* ---------- Corpo ---------- */
.topo__corpo {
  position: relative; z-index: 2;
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
}

/* Telinha: painel de vidro com o pedido (mono = texto de terminal de verdade) */
.telinha {
  --vidro-fundo: rgb(var(--luz-monitor-rgb) / .045);
  --vidro-brilho-cor: rgb(225 240 255 / .17);
  --vidro-sombra: 0 40px 80px -40px rgb(0 0 0 / .9), 0 0 60px -10px rgb(var(--luz-monitor-rgb) / .16);
  width: min(100%, var(--telinha-largura));
  margin: 0;
  padding: 18px 20px 20px;
  text-align: left;
  font-family: var(--fonte-mono);
  font-size: .875rem;
  line-height: 1.62;
  letter-spacing: -.01em;
}
.telinha__pedido {
  color: var(--gelo);
  padding-left: 1.35em; text-indent: -1.35em;   /* linhas quebradas alinham depois do ">" */
  min-height: calc(1.62em * 3);
}
.telinha__prompt { color: var(--luz-monitor); margin-right: .6em; font-weight: 500; }
.telinha__cursor {
  display: inline-block;
  width: .58em; height: 1.18em;
  margin-left: .12em;
  vertical-align: -.22em;
  background: var(--cursor);
  box-shadow: 0 0 14px rgb(var(--cursor-rgb) / .7);
  animation: telinha-piscar 1.06s steps(1, end) infinite;
}
.telinha[data-estado="digitando"] .telinha__cursor { animation: none; }
@keyframes telinha-piscar { 50% { opacity: 0; } }

.telinha__status {
  list-style: none; padding: 0;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgb(255 255 255 / .08);
  display: grid; gap: 2px;
  color: var(--vidro-texto-2);
}
.telinha__status li {
  display: flex; align-items: center; gap: .7em;
  transition: opacity .25s var(--suave), color .25s;
}
.telinha__sinal { position: relative; width: 1em; height: 1em; flex: none; display: grid; place-items: center; }
.telinha__ok { width: 1em; height: 1em; color: var(--gelo); }
.telinha__gira {
  display: none;
  width: .78em; height: .78em; border-radius: 50%;
  border: 1.5px solid rgb(255 255 255 / .18);
  border-top-color: var(--gelo);
  animation: telinha-girar .7s linear infinite;
}
@keyframes telinha-girar { to { transform: rotate(1turn); } }
.telinha__status li[data-status="espera"] { opacity: 0; transition: none; }
.telinha__status li[data-status="rodando"] .telinha__gira { display: block; }
.telinha__status li[data-status="rodando"] .telinha__ok { display: none; }
.telinha__status li[data-status="feito"] .telinha__ok { animation: telinha-ok .45s var(--expo); }
@keyframes telinha-ok { from { transform: scale(.4); opacity: 0; } }

/* Título e apoio */
.topo__titulo {
  margin-top: clamp(28px, 4.2svh, 44px);
  font-size: min(var(--t-display), 15svh);
  line-height: .95;
  letter-spacing: -.045em;
  font-weight: 600;
  text-wrap: initial;
}
.topo__linha {
  display: block;
  overflow: clip;
  padding-bottom: .12em; margin-bottom: -.12em;   /* deixa a cedilha passar pela máscara */
}
.topo__linha > span { display: inline-block; transition: transform 1.05s var(--expo); }
.topo__linha + .topo__linha > span { transition-delay: .08s; }

.topo__apoio {
  margin-top: clamp(18px, 2.4svh, 26px);
  max-width: 36em;
  font-size: var(--t-lead); line-height: 1.45; letter-spacing: -.01em;
  color: var(--nevoa);
  transition: opacity .9s var(--suave) .22s;
}
.topo__acoes {
  margin-top: 28px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  width: 100%;
  transition: opacity .9s var(--suave) .32s;
}
.topo__nota {
  margin-top: 20px;
  font-size: var(--t-pequeno);
  color: var(--nevoa);
  transition: opacity .9s var(--suave) .42s;
}

@media (max-width: 559px) {
  .topo__acoes .botao { flex: 1 1 0; padding-inline: 18px; }
}

@media (min-width: 768px) {
  .topo { --cena-alto: clamp(320px, 44svh, 440px); --sobreposicao: .24; }
  .telinha { padding: 24px 30px 26px; font-size: 1rem; }
  .telinha__pedido { min-height: calc(1.62em * 2); }
}
@media (min-width: 980px) {
  .topo {
    --cena-alto: clamp(300px, 38svh, 430px);
    --sobreposicao: .26;
    padding-top: calc(var(--nav-alto) + 4px); padding-bottom: 72px;
  }
  .topo__titulo { font-size: min(var(--t-display), 13.6svh); }
}
/* computador de tela baixa (1366×768, 1440×700): figura menor, para o título caber inteiro
   na primeira tela (sem isto a segunda linha do h1 ficava cortada na dobra) */
@media (min-width: 980px) and (max-height: 800px) {
  .topo { --cena-alto: clamp(200px, 31svh, 300px); }
}

/* ---------- Sequência de abertura (classe .abertura no <html>, posta antes da pintura) ---------- */
.abertura .topo__linha > span { transform: translateY(112%); }
.abertura .topo__apoio,
.abertura .topo__acoes,
.abertura .topo__nota { opacity: 0; }
/* antes do JS assumir: só "> ▍" (como o 1º quadro de "Dentro da telinha") */
.abertura .telinha:not([data-estado]) .telinha__texto { display: none; }
.abertura .telinha:not([data-estado]) .telinha__status li { visibility: hidden; }

/* pulou (rolou no meio): estado final sem transição */
.pulou .topo__linha > span,
.pulou .topo__apoio, .pulou .topo__acoes, .pulou .topo__nota { transition: none !important; }

/* ---------- Topo 3D (topo3d.js) ----------
   Na abertura quem monta a figura é o canvas, então a figura estática espera escondida.
   Se o 3D não vier (sem WebGL, CDN fora), ela aparece junto com o título (quando .abertura sai)
   ou na hora, se a pessoa pulou. Quando o canvas assume (.topo--3d), ela sai em fusão enquanto
   a figura em WebGL entra; se o contexto se perder, topo3d.js tira .topo--3d e ela volta. */
.topo__figura { transition: opacity .7s var(--suave); }
.movimento.abertura .topo__figura { opacity: 0; }
.pulou .topo__figura { transition: none; }
.topo--3d .topo__figura { opacity: 0; transition: opacity .7s var(--suave), visibility 0s linear .7s; }