/* Beta: o formulário numa bolha, no alto da noite do rodapé (pedido do dono, 25/09: juntar o "Entre no
   Beta" com o rodapé do final, "meio translúcido, como se fosse uma bolha").
   A bolha é vidro escuro: fundo semitransparente com desfoque (sem desfoque, um fundo mais fechado),
   cantos bem redondos, borda clara sutil. Sem JS (e na janela baixa), é o formulário de sempre sobre o
   rodapé escuro. Com a noite (html.rodape-js), #beta vira uma camada do tamanho do rodapé, que é do
   tamanho do hero (100cqw × 100cqh = a cena), e a bolha se põe no espaço que ele marcou: no alto, entre
   o abajur e a lua, acima da poltrona, um pouco à esquerda do meio. As contas são as do palco
   (estilo.css) e da lua (rodape.css); a altura da bolha (--bolha-h) vem do rodape.js, para centrá-la.

   A carta entra no envelope (protótipo "ideia 3", aprovado 24/09).
   O envio é o de rolagem.js (Formspree, o mesmo endereço); a cena está em beta.js.
     esperando  o formulário vira folha (o que ela digitou, no mesmo lugar) e o terço de baixo dobra;
     ok         só com a resposta ok: dobra o resto, a carta vira desenho e desce no envelope,
                a aba fecha em 3 quadros, o selo da folha carimba, "Recebido." aparece e o envelope vai embora;
     erro       a carta desdobra, o formulário volta com o que foi digitado e o erro aparece em .beta-estado.
   Parado (pausa global ou prefers-reduced-motion, espelhado pelo JS em .beta[data-parado]): sem folha
   e sem voo; o formulário dá lugar direto ao envelope fechado e ao "Recebido.".
   Tudo aqui é decorativo (aria-hidden), menos o bloco "Recebido.", que ganha o foco. */

/* ---------- A bolha ----------
   --k: o tamanho de tudo nela (1; em tela grande a cena cresce e a bolha acompanha, ver adiante). */
.beta {
  --k: 1; --beta-papel: #f6f1e6; --beta-verso: #ece4d4;
  padding: 0; margin: 4px 0 10px; color: var(--branco);
  scroll-margin-top: 76px; /* sem a noite, a barra fixa não cobre o título */
}
.beta-bolha {
  container: bolha / inline-size;
  position: relative; isolation: isolate;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 calc(26px * var(--k));
  max-width: 660px; margin: 0 auto; padding: calc(22px * var(--k)) calc(24px * var(--k)) calc(18px * var(--k));
  border-radius: calc(30px * var(--k)); border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(165deg, rgba(255,255,255,.08), rgba(255,255,255,0) 55%) rgba(22,28,33,.74);
  box-shadow: 0 26px 56px -18px rgba(4,8,12,.55), inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 24px rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
}
/* O brilho de bolha: um reflexo frio, de leve, no alto à esquerda. */
.beta-bolha::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 55% at 16% 0%, rgba(226,236,248,.12), rgba(226,236,248,0) 70%);
}
/* Sem desfoque (navegador antigo), o vidro fecha: o texto continua legível sobre qualquer fundo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .beta-bolha, .rodape[data-noite] .beta-bolha { background-color: rgba(22,28,33,.86); }
}
.beta-texto { flex: 1 1 0; min-width: 0; }
.beta-lado { flex: 0 0 min(calc(290px * var(--k)), 100cqi - 230px); min-width: 0; } /* cqi: da bolha; o texto fica com pelo menos 204 px */
.beta h2 { margin: 0 0 calc(8px * var(--k)); font-size: calc(30px * var(--k)); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.beta-texto p { margin: 0; font-size: calc(15px * var(--k)); line-height: 1.5; }
.beta-texto small { display: block; margin-top: calc(12px * var(--k)); font-size: calc(13px * var(--k)); line-height: 1.45; color: rgba(255,255,255,.84); }

/* ---------- O formulário ---------- */
.beta-mesa { position: relative; isolation: isolate; }
.beta-form { display: grid; gap: calc(8px * var(--k)); }
.beta-form[hidden] { display: none; }
.beta-form.beta-some { pointer-events: none; }
.beta-form label { display: grid; gap: calc(3px * var(--k)); font-size: calc(14px * var(--k)); }
.beta-rotulo { display: flex; align-items: center; gap: 8px; min-height: calc(20px * var(--k)); }
.beta-visto { width: calc(20px * var(--k)); height: calc(20px * var(--k)); color: var(--creme); }
.beta-form input {
  width: 100%; min-width: 0; font: inherit; font-size: calc(16px * var(--k)); padding: calc(9px * var(--k)) calc(14px * var(--k));
  border-radius: calc(12px * var(--k)); border: 1px solid transparent; background: rgba(255,255,255,.95); color: var(--tinta);
}
.beta-form input:focus-visible { outline: 2px solid var(--branco); outline-offset: 2px; }
.beta-form .botao {
  justify-content: center; min-height: calc(42px * var(--k)); margin-top: calc(2px * var(--k)); padding: 0 calc(18px * var(--k));
  border-radius: calc(10px * var(--k)); background: var(--creme-cartao); color: var(--tinta);
}
.beta-form .botao svg { width: calc(14px * var(--k)); height: calc(14px * var(--k)); }
/* <button> não herda a fonte nem perde a borda nativa sozinho: sem isto, "Quero o convite" saía em Arial com borda cinza. */
.beta-form button.botao { font: inherit; font-size: calc(15px * var(--k)); font-weight: 500; border: 0; cursor: pointer; }
.beta-botao-txt { display: inline-block; }
.beta-form .botao.beta-apertado { transform: scale(.97); }
/* O estado fica fora do formulário (e da mesa da carta): a folha cobre o formulário e o texto continua à vista. */
.beta-estado { margin: calc(8px * var(--k)) 0 0; min-height: 1.5em; font-size: calc(14px * var(--k)); line-height: 1.5; }

/* Bolha apertada (tela baixa, com a bolha entre o abajur e o título): o título dela encolhe para caber na coluna.
   (As medidas do @container são da caixa de conteúdo da bolha, sem o recheio.) */
@container bolha (max-width: 540px) {
  .beta h2 { font-size: calc(27px * var(--k)); }
}
/* Bolha estreita (celular, tela em pé): uma coluna só, e a nota "Sem spam" volta para depois do
   formulário, como era (a coluna de texto se desfaz e os três viram itens da bolha). */
@container bolha (max-width: 440px) {
  .beta-texto { display: contents; }
  .beta h2, .beta-texto p, .beta-lado, .beta-texto small { flex: 1 1 100%; }
  .beta-texto p { margin-bottom: 14px; }
  .beta-lado { order: 1; }
  .beta-estado { margin-top: 4px; }
  .beta-texto small { order: 2; margin-top: 0; }
}

/* ---------- A bolha na noite: no espaço marcado ----------
   #beta cobre o rodapé inteiro (e não pega o clique); a bolha, dentro, se mede pela cena:
     --abajur    a borda direita da cúpula (palco 16:9 pela altura: 50cqw − 96cqh + 429/1600 do palco)
     --poltrona  o alto do encosto (44% da altura; com o palco pela largura, 104cqh − 40cqw)
     --meio      um pouco à esquerda do meio da poltrona (onde ele desenhou o retângulo)
     --lua       a borda esquerda da lua (a mesma conta de .noite-lua, menos o raio)
     --chao      o que vier primeiro: o encosto (+10 px) ou o alto da hora e do título da noite (−16 px;
                 76% da altura menos a hora, 27 px, e duas linhas de 0,86 em: "Pode / apagar / a luz."
                 tem três, mas o alto dele fica onde era o do "Outra / noite." de antes; rodape.css)
   Ela fica no vão entre --abajur e --lua (folga de 32 px), centrada em --meio quando cabe, e em pé
   entre a barra (68 px; 64 sem o menu) e --chao. Quando o hero é mais alto que a tela, no fim da
   rolagem ele sobe 100cqh − 100vh, e a bolha desce o mesmo tanto (nunca atrás da barra; conta com
   100svh, a tela com a barra de endereço do celular à vista, para errar para baixo e não para cima). */
.rodape-js .beta {
  position: absolute; inset: 0; margin: 0; container-type: size; pointer-events: none; scroll-margin-top: 0;
}
.rodape-js .beta-bolha {
  --barra: 68px; --folga: 32px; --bw: calc(600px * var(--k));
  --t0: calc(100cqh - 100svh + var(--barra) + 12px); /* svh: no celular com a barra de endereço à vista, nunca atrás da barra do site */
  --abajur: calc(50cqw - 44.52cqh);
  --poltrona: 44cqh;
  --meio: calc(50cqw - 4.2cqh);
  --wi: max(100cqw, 179.15cqh);
  --lua: calc(min(50cqw + var(--wi) * .2781, 88cqw) - var(--wi) * .0168);
  --chao: min(var(--poltrona) + 10px, 76cqh - 43px - 1.72 * clamp(64px, 8.5vw, 130px));
  --dir: var(--lua);
  --esq: max(var(--abajur) + var(--folga), min(var(--meio) - var(--bw) / 2, var(--dir) - var(--folga) - var(--bw)));
  position: absolute; margin: 0; max-width: none; pointer-events: auto;
  left: var(--esq);
  width: min(var(--bw), var(--dir) - var(--folga) - var(--esq));
  top: calc(var(--t0) + max(0px, (var(--chao) - var(--t0) - var(--bolha-h, 256px * var(--k))) / 2));
  transition: background-color 600ms ease, top 300ms var(--saida); /* o top: quando um recado de erro abre uma linha, ela se recentra deslizando */
}
:root[data-movimento="pausado"] .rodape-js .beta-bolha { transition: none; }
/* À noite o vidro abre um pouco: a lua e o abajur aparecem por trás, desfocados. */
.rodape[data-noite] .beta-bolha { background-color: rgba(22,28,33,.34); }
@media (max-width: 1100px) { .rodape-js .beta-bolha { --barra: 64px; } }
/* Tela grande: a cena cresce com a altura (a poltrona em 3440×1440 tem 1,8× a de 1440×810) e a bolha
   acompanha em dois degraus, para não virar um bilhete perdido no céu. */
@media (min-width: 1600px) and (min-height: 1000px) { .rodape-js .beta { --k: 1.15; } }
@media (min-width: 2200px) and (min-height: 1300px) { .rodape-js .beta { --k: 1.3; } }
@media (max-aspect-ratio: 16/10) {
  .rodape-js .beta-bolha { --abajur: 20.3cqw; --poltrona: calc(104cqh - 40cqw); --meio: 47.2cqw; }
}
/* Tela em pé ou baixa: a bolha pode não caber acima de --chao e descer até a altura do título da noite;
   então ela também para antes do título, de lado (a mesma conta de .noite-titulo, com os 2,6 em de
   largura do "Outra" de antes; "apagar" tem 0,64 em a mais, e quando os dois se encostariam o rodape.js
   desce ou encolhe o título: ajustarTitulo). */
@media (max-aspect-ratio: 5/4), (max-height: 760px) {
  .rodape-js .beta-bolha {
    --dir: min(var(--lua), min(100cqw, 50cqw + 900px) - .06 * min(100cqw, 1800px) - 2.6 * clamp(64px, 8.5vw, 130px));
  }
}
/* Celular: a bolha na largura útil, no alto (logo abaixo da barra de 60 px). O título da noite, a lua e
   a sala descem para debaixo dela (rodape.css, com --bolha-pe do rodape.js). */
@media (max-width: 760px) {
  .rodape-js .beta-bolha {
    left: 16px; width: calc(100cqw - 32px); top: calc(100cqh - 100svh + 72px);
    padding: 18px 18px 14px; border-radius: 24px;
  }
  .beta h2 { font-size: 27px; margin-bottom: 6px; }
  .beta-texto p { font-size: 14.5px; line-height: 1.45; }
  .beta-texto small { font-size: 12.5px; }
}
/* Celular baixo (até 700 px): a bolha aperta para sobrar céu para o título e a sala. */
@media (max-width: 760px) and (max-height: 700px) {
  .rodape-js .beta-bolha { padding: 14px 16px 10px; border-radius: 22px; }
  .beta h2 { font-size: 24px; margin-bottom: 4px; }
  .beta-texto p { font-size: 14px; line-height: 1.4; }
  .beta-form { gap: 6px; }
  .beta-form label { font-size: 13.5px; gap: 2px; }
  .beta-form input { padding-top: 8px; padding-bottom: 8px; }
}
/* Celular bem baixo (até 639 px; o iPhone SE com as barras do Safari tem 375×553): a cena tem 620 px e a
   tela mostra só o pé dela. A bolha aperta mais um pouco e o título da noite fica em duas linhas, "Pode
   apagar" e "a luz." com a hora ao lado (rodape.css),
   para caber entre ela e os links sem passar por baixo deles nem do selo. */
@media (max-width: 760px) and (max-height: 639px) {
  .rodape-js .beta-bolha { padding: 12px 16px 8px; }
  .beta-texto p { margin-bottom: 8px; }
  .beta-form { gap: 5px; }
  .beta-form input { padding-top: 7px; padding-bottom: 7px; }
  .beta-form .botao { min-height: 40px; }
}
/* A caminho (rodape.js: o rodapé ainda sobe e não casou com o hero). No celular a bolha, na largura toda,
   passa por cima do abajur aceso, da lua e do título; com o vidro a .34, o texto dela caía a 2,9:1 sobre a
   cúpula acesa. Até ela chegar ao lugar, o vidro fecha; ao chegar, abre de novo (600 ms). */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  @media (max-width: 760px) { .rodape[data-noite][data-a-caminho] .beta-bolha { background-color: rgba(22,28,33,.62); } }
}
/* Janela baixa (celular deitado): o rodapé é o escuro de sempre (rodape.css) e a bolha vai no fluxo, em cima dos links. */
@media (max-height: 500px) {
  .rodape-js .beta { position: static; container-type: normal; pointer-events: auto; flex: 1 0 100%; margin: 0 0 6px; scroll-margin-top: 76px; }
  .rodape-js .beta-bolha, .rodape[data-noite] .beta-bolha { position: static; width: auto; max-width: 660px; margin: 0 auto; background-color: rgba(22,28,33,.74); }
}

/* ---------- Tinta: o traço do site (capitulo.js / notebook.js) ----------
   Desenha em 4 quadros de 100 ms (steps(4) = 10 por segundo), treme 2,1 s
   trocando 3 variantes e para. Parado: aparece pronto. */
.beta-tinta { overflow: visible; pointer-events: none; }
.beta-tinta path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.beta-tinta g { stroke-dasharray: 1 1; stroke-dashoffset: 1; visibility: hidden; }
.beta-tinta .v1, .beta-tinta .v2 { opacity: 0; }
.beta-tinta.beta-risca g { animation: beta-risca 400ms steps(4, jump-start) var(--d, 0ms) forwards; }
.beta-tinta.beta-risca .v0 { animation: beta-tv0 300ms linear calc(var(--d, 0ms) + 400ms) 7; }
.beta-tinta.beta-risca .v1 { animation: beta-tv1 300ms linear calc(var(--d, 0ms) + 400ms) 7; }
.beta-tinta.beta-risca .v2 { animation: beta-tv2 300ms linear calc(var(--d, 0ms) + 400ms) 7; }
@keyframes beta-risca { from { stroke-dashoffset: 1; visibility: visible; } to { stroke-dashoffset: 0; visibility: visible; } }
@keyframes beta-tv0 { 0%, 33.3% { opacity: 1; } 33.4%, 100% { opacity: 0; } }
@keyframes beta-tv1 { 0%, 33.3% { opacity: 0; } 33.4%, 66.6% { opacity: 1; } 66.7%, 100% { opacity: 0; } }
@keyframes beta-tv2 { 0%, 66.6% { opacity: 0; } 66.7%, 100% { opacity: 1; } }
.beta[data-parado] .beta-tinta.beta-risca g { animation: none; visibility: visible; stroke-dashoffset: 0; }
.beta[data-parado] .beta-tinta path { animation: none !important; }
.beta[data-parado] .beta-form .botao { transition: none; }

/* ---------- A folha: cobre o formulário e se dobra em três ---------- */
.beta-folha {
  position: absolute; inset: -8px -12px; z-index: 2; pointer-events: none; visibility: hidden; opacity: 0;
  transform-origin: 50% 66.667%; filter: drop-shadow(0 12px 14px rgba(12,22,12,.28));
}
.beta-dobra { position: absolute; left: 0; right: 0; height: calc(100% / 3 + .5px); transform-style: preserve-3d; }
.beta-dobra-a { top: 0; z-index: 3; transform-origin: 50% 100%; }
.beta-dobra-b { top: calc(100% / 3); z-index: 1; }
.beta-dobra-c { top: calc(200% / 3 - .5px); z-index: 2; transform-origin: 50% 0; }
.beta-face { position: absolute; inset: 0; overflow: hidden; background: var(--beta-papel); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.beta-dobra-a .beta-face { border-radius: 12px 12px 0 0; }
.beta-dobra-c .beta-face { border-radius: 0 0 12px 12px; }
.beta-face.beta-verso { transform: rotateX(180deg); background: var(--beta-verso); }
.beta-dobra-a .beta-face.beta-verso { border-radius: 0 0 12px 12px; box-shadow: inset 0 -1px 0 rgba(31,42,32,.12); }
.beta-dobra-c .beta-face.beta-verso { border-radius: 12px 12px 0 0; }
.beta-luz { position: absolute; inset: 0; background: var(--tinta); opacity: 0; }
.beta-conteudo { position: absolute; left: 0; right: 0; }
.beta-conteudo > * { position: absolute; margin: 0; }
.beta-f-cab { font-size: calc(11.5px * var(--k)); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-media); white-space: nowrap; }
.beta-f-valor { display: flex; align-items: center; padding: 0 calc(14px * var(--k) + 1px); font-size: calc(16px * var(--k)); color: var(--tinta); white-space: nowrap; overflow: hidden; }
.beta-f-linha { height: 12px; color: var(--tinta); }
.beta-f-linha path { stroke-width: 2; vector-effect: none; }
.beta-f-para { display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--k)); color: var(--tinta-media); white-space: nowrap; }
.beta-f-para svg { width: calc(18px * var(--k)); height: calc(18px * var(--k)); color: var(--verde-cartao); }
.beta-f-para svg path { stroke-width: 1.8; vector-effect: none; }
/* O contorno à tinta da carta dobrada: acende enquanto ela encolhe e vira desenho, como o envelope. */
.beta-contorno { position: absolute; left: 0; right: 0; top: calc(100% / 3); height: calc(100% / 3); width: 100%; z-index: 4; opacity: 0; overflow: visible; }
.beta-contorno path { fill: none; stroke: var(--tinta); stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ---------- O envelope: os mesmos traçados do "O que vai para a IA" (notebook) ----------
   Na bolha, a coluna do formulário tem 290 px: envelope de 220 px (o do celular de antes); na bolha de
   uma coluna só, 190 px (ver adiante). */
.beta-env { position: absolute; left: 50%; top: 0; width: calc(220px * var(--k)); margin-left: calc(-110px * var(--k)); aspect-ratio: 300 / 240; visibility: hidden; pointer-events: none; }
.beta-env svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.beta-env path, .beta-env-parado path { stroke: var(--tinta); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.beta-env-tras { z-index: 1; }
.beta-env-frente { z-index: 3; }
.beta-env-aba { z-index: 4; visibility: hidden; transform-origin: 50% 47.08%; }
.beta-aba-fora { opacity: 0; }
.beta-selo { position: absolute; z-index: 5; left: 50.33%; top: 75.4%; width: calc(40px * var(--k)); height: calc(40px * var(--k)); margin: calc(-20px * var(--k)) 0 0 calc(-20px * var(--k)); visibility: hidden; }
.beta-selo svg { position: absolute; inset: 0; }
.beta-selo-borra { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--tinta); opacity: 0; }
/* Bolha estreita (uma coluna): a nota "Sem spam" fica logo abaixo do formulário, e o envelope de 220 px, que
   passa ~37 px do pé da mesa, cobria a nota enquanto esperava o voo (no celular baixo, a linha inteira).
   Com 190 px ele termina no vão do recado (.beta-estado, vazio nessa hora). */
@container bolha (max-width: 440px) {
  .beta-env { width: calc(190px * var(--k)); margin-left: calc(-95px * var(--k)); }
  .beta-selo { width: calc(36px * var(--k)); height: calc(36px * var(--k)); margin: calc(-18px * var(--k)) 0 0 calc(-18px * var(--k)); }
}

/* ---------- Recebido ---------- */
.beta-recebido { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding-top: 2px; }
.beta-recebido[hidden] { display: none; }
.beta-recebido.beta-centro { justify-content: center; }
.beta-recebido:focus { outline: none; }
.beta-recebido:focus-visible .beta-rec-titulo { text-decoration: underline 2px; text-underline-offset: 6px; }
.beta-rec-titulo { margin: 0 0 4px; font-size: calc(26px * var(--k)); font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.beta-rec-sub { margin: 0; font-size: calc(16px * var(--k)); }
.beta-env-parado { display: none; width: calc(120px * var(--k)); height: auto; margin: 0 auto 10px; overflow: visible; }
.beta-recebido.beta-fixo .beta-env-parado { display: block; }
.beta-outro {
  justify-content: center; min-height: calc(42px * var(--k)); margin-top: calc(14px * var(--k)); border: 0; cursor: pointer;
  font: inherit; font-size: calc(15px * var(--k)); font-weight: 500;
  background: transparent; color: var(--branco); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
@media (hover: hover) and (pointer: fine) { .beta-outro:hover { background: rgba(255,255,255,.08); } }