/* A página sem popup — seções no fluxo
 *
 * # O que mudou, e por quê
 *
 * Até 01/09/2026 as oito seções eram `<template>` que `room-panel.js` clonava
 * dentro de um overlay. Isso trazia três problemas que nenhuma quantidade de
 * ajuste no painel resolvia:
 *
 *   · o conteúdo não tinha URL — voltar a uma seção exigia refazer o gesto;
 *   · a largura era decidida por uma tabela em JS (`full: true`), e quem
 *     esquecesse a linha ganhava um painel de 760 px com texto espremido —
 *     foi exatamente o que aconteceu com `opensource`;
 *   · a simulação SLAM continuava rodando atrás enquanto se lia, gastando
 *     bateria por uma cena que ninguém estava olhando.
 *
 * Agora as seções são documento: rolam, têm âncora, e o CSS decide a largura.
 *
 * # O hero
 *
 * A simulação não foi descartada — ela vira a abertura, ocupando a primeira
 * tela. Quem quer brincar com o robô fica; quem quer ler, rola. Antes as duas
 * coisas disputavam o mesmo espaço, e a leitura sempre perdia.
 *
 * O padrão visual é o de `skills.bassi.engineer` e `bassi.engineer/agent-harness/`,
 * que são páginas de conteúdo deste mesmo site — divergir faria o visitante
 * achar que trocou de lugar. */

/* ── 🛑 O documento precisa ROLAR — e não rolava ──────────────────────────────
 *
 * `lab-stage.css:14` trava `html, body{height:100%; overflow:hidden}` e
 * `lab-stage.css:31` faz do body um flex em coluna. Isso era correto enquanto a
 * 2026.6 era uma cena de tela cheia: o chrome em cima, o canvas tomando o resto
 * com `flex:1`, e rolagem nenhuma — o próprio comentário de lá diz que rolagem
 * "só apareceria por engano".
 *
 * Com as seções virando documento, esse travamento passa a ser o defeito. E ele
 * falha de um jeito que não parece layout: o `.hero-wrap` pede `100svh`, mas
 * como item de flex herda `flex-shrink:1` e o body tem altura FIXA de viewport
 * para dividir entre oito itens — o hero foi esmagado para **0px** e as seções
 * subiram por cima da cena. Medido em 01/09/2026: `getComputedStyle` devolvia
 * `height:0px` para uma regra `height:100svh` que casava.
 *
 * O body continua flex em coluna de propósito: é assim que o chrome mede a
 * própria altura sem número cravado, que é a razão escrita em `lab-stage.css`.
 * Com altura automática, flex em coluna empilha igual a `block` — só o
 * encolhimento precisa ser desligado no hero. */
html, body{
  height:auto;
  min-height:100svh;
  overflow:visible;
  /* Solto junto: `overscroll-behavior:none` existia para matar o arrasto
     elástico sobre a cena. Numa página que rola, ele mataria também o gesto
     legítimo de chegar ao fim. */
  overscroll-behavior:auto;
}

/* O chrome acompanha a leitura, como nas outras páginas de conteúdo do site
   (`skills`, `agent-harness`). `sticky` e não `fixed`: sticky continua ocupando
   espaço no fluxo, então nenhuma seção precisa compensar a altura dele — que é
   exatamente a compensação cravada que `lab-stage.css` recusou. */
body > header{position:sticky; top:0}

/* ── O hero: a simulação ocupa a primeira tela, e só ela ─────────────────── */
#stage {
  height: 100svh;      /* `svh` e não `vh`: no iOS a barra do navegador some e
                          volta, e `vh` deixa a cena saltando a cada gesto. */
  display: block;
}
.slam-hud,
.slam-hint {
  /* O HUD acompanha o hero em vez de flutuar sobre a página inteira: ele
     comanda a simulação, e comandar algo que saiu da tela não faz sentido. */
  position: absolute;
}

.hero-wrap {
  position: relative;
  height: 100svh;
  overflow: hidden;
  /* 🛑 Sem isto o hero vira 0px — ver o bloco acima. `flex-shrink` é 1 por
     padrão, e item de flex encolhe abaixo do próprio `height` sem avisar. */
  flex: none;
}

/* Convite para rolar: sem ele, uma cena que ocupa a tela inteira parece a
   página inteira — e o conteúdo abaixo deixa de existir para quem chegou. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #5b6b80;
  pointer-events: none;
  z-index: 3;
}
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, rgba(111, 214, 255, .55), transparent);
  animation: cue-drop 2.1s ease-in-out infinite;
}
@keyframes cue-drop {
  0%, 100% { opacity: .25; transform: translateY(-4px); }
  50%      { opacity: 1;   transform: translateY(2px); }
}

/* ── As seções ───────────────────────────────────────────────────────────── */
.sec {
  position: relative;
  z-index: 1;
  padding: 84px 0;
  border-top: 1px solid #1b2431;
  background: #07090d;
}
.sec .wrap { width: min(1180px, 92vw); margin-inline: auto; }

.sec-num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .24em;
  color: #5b6b80;
  margin: 0 0 6px;
}
.sec-h {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  letter-spacing: -.03em;
  font-weight: 750;
  margin: 0 0 8px;
  color: #e6edf6;
  text-wrap: balance;
}
.sec-lede {
  color: #8b9bb0;
  font-size: 1.02rem;
  max-width: 62ch;
  margin: 14px 0 0;
}

/* O conteúdo herdado dos painéis vinha com `margin-top` do próprio painel; no
   fluxo isso soma ao padding da seção e abre um buraco. */
.sec-body > :first-child { margin-top: 0; }
.sec-body .p-title { margin-top: 0; }

/* ── Revelação ao rolar ──────────────────────────────────────────────────────
   Só `opacity` e `transform`. Quem chega por âncora recebe tudo visível — o
   navegador salta antes de o observador rodar, e a seção alvo ficaria em branco.
   Foi o defeito medido na landing do agent-computer no mesmo dia. */
.sec.rise { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.sec.rise.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sec.rise, .sec.rise.on { opacity: 1; transform: none; transition: none; }
  .scroll-cue::after { animation: none; }
}

@media (max-width: 640px) {
  .sec { padding: 56px 0; }
}

/* ── Um idioma por vez ──────────────────────────────────────────────────────
 * As seções trazem os pares PT/EN que os `<template>` já tinham. Sem esta
 * regra os DOIS aparecem empilhados — medido na primeira renderização: "sobre"
 * e "Sobre", cada um com o parágrafo abaixo.
 *
 * Esconder por padrão e revelar o ativo (em vez do contrário) garante que uma
 * falha do JS deixe a página em UM idioma, e não em dois. */
.sec [data-lang] { display: none; }
.sec [data-lang="pt"] { display: revert; }
:root[lang="en"] .sec [data-lang="pt"] { display: none; }
:root[lang="en"] .sec [data-lang="en"] { display: revert; }