/* =========================================================
   ENTRADA — "Bem-vindo a Hawkins" (a porta do site)
   Direção: o "cold open" de um episódio. Quadro preto de película,
   luz vermelha atrás do letreiro atravessando a fumaça do Mundo
   Invertido; o letreiro aceso como o logo da série (letra escura,
   aro incandescente com núcleo quente, halo e queda de luz). A
   largura do letreiro é a moldura de tudo: embaixo, a premissa e a
   história à esquerda, a "porta" (entrar / criar conta) à direita —
   uma sombra dentro da cena com um fio de luz no topo, nada de cartão.
   Paleta com disciplina: vermelho saturado só no letreiro, no botão
   principal e no erro; o resto é marfim quente, vinho e breu. Três
   vozes: a serifa do letreiro (título, botão), a serifa editorial
   (premissa, história) e a máquina de escrever de 2003 (local, rótulos,
   erro, estado da conta).
   Movimento em quatro camadas: entrada (~2 s; a página acorda e fecha
   num relâmpago), ambiente (fumaça, luz, poeira, película),
   microinterações e acidentes raros (relâmpago dentro das nuvens,
   queda de energia, letra falhando, fita perdendo o tracking),
   sorteados pelo portal.js.
   Prefixo .bv- ("bem-vindo"). A página de bloqueio NÃO usa nada daqui.
   ========================================================= */
.portal.bv {
  --bv-black: #030001;
  --bv-red: #e3260f;
  --bv-hot: #ff4a2c;
  --bv-core: #ffd6c6;
  --bv-ivory: #e6d8ca;
  --bv-ivory-2: #bfae9f;
  --bv-ivory-3: #9c8b80;
  --bv-wine: #5c1117;
  --bv-display: "Libre Baskerville", Georgia, serif;
  --bv-serif: "Newsreader", Georgia, serif;
  --bv-type: "Courier Prime", "Courier New", monospace;
  /* tamanho do letreiro (letras menores da primeira linha) e altura do centro dele na tela (portal.js mede) */
  --bv-t: clamp(40px, min(8.6vw, 14.5vh), 136px);
  --bv-pad: clamp(24px, 5.6vh, 60px); /* respiro do topo (o tocador se alinha à linha do local) */
  --bv-ty: 26vh;
  --bv-frame: 1000px; /* largura real do letreiro (portal.js mede) */
  --bv-s: 1; /* velocidade da entrada: 1 na primeira vez da visita, mais curta depois */
  --line: #4b1016; --text: var(--bv-ivory); --muted: var(--bv-ivory-2); --teal: var(--bv-hot); --red: var(--bv-hot);
  position: fixed; inset: 0; z-index: 45;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  color: var(--bv-ivory);
  background: var(--bv-black);
  scrollbar-color: #4a0b10 #050001;
}
.portal.bv ::selection { background: rgba(227, 38, 15, 0.45); color: #fff; }
.portal.bv::-webkit-scrollbar { width: 10px; }
.portal.bv::-webkit-scrollbar-track { background: #050001; }
.portal.bv::-webkit-scrollbar-thumb { border: 2px solid #050001; border-radius: 0; background: #3a080d; }
/* com a entrada à vista, o grão do site dá lugar à película própria dela (mais orgânica e mais leve) */
body.bv-on > .grain { display: none; }

/* =========================================================
   A CENA (fixa atrás de tudo)
   ========================================================= */
.bv-sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.bv-sky > * { position: absolute; inset: 0; }
/* o breu: vinho quase preto perto da luz, preto nas bordas */
.bv-void { background: radial-gradient(130% 85% at 50% var(--bv-ty), #210408 0%, #110103 38%, #050001 70%, #000 100%); }
/* a luz atrás do letreiro: núcleo, halo e queda (três gradientes, sem borda nenhuma) */
.bv-light {
  transform: translate3d(var(--bv-light-x, 0px), var(--bv-light-y, 0px), 0) scale(1.04);
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
  background:
    radial-gradient(27vmax 12vmax at 50% var(--bv-ty), rgba(255, 96, 58, 0.32), rgba(255, 60, 30, 0.12) 52%, transparent),
    radial-gradient(52vmax 27vmax at 50% var(--bv-ty), rgba(196, 22, 14, 0.4), rgba(130, 10, 10, 0.18) 55%, transparent),
    radial-gradient(90vmax 62vmax at 50% var(--bv-ty), rgba(80, 6, 10, 0.5), transparent);
}
/* fumaça: a mesma textura em três cópias sincronizadas. O miolo denso é escuro (tapa a luz em fiapos);
   as bordas acendem perto da luz (máscara presa na luz); o relâmpago acende um pedaço (máscara no ponto sorteado).
   A textura (.bv-tex) é um ladrilho sem emenda que desliza de lado; a máscara fica parada na tela. */
.bv-fog { overflow: hidden; }
.bv-tex { position: absolute; top: -6%; left: 0; height: 112%; width: calc(100% + var(--bv-tile, 1000px)); background-repeat: repeat-x; background-size: var(--bv-tile, 1000px) 100%; animation: bv-drift-l var(--bv-drift, 150s) linear infinite; }
/* o passo é exatamente um ladrilho (1100 px; 760 no celular, igual ao portal.js). Em pixels fixos, e não com var(),
   para o Chrome entregar a animação à placa de vídeo (com var() ela voltava para o processador a cada quadro) */
@keyframes bv-drift-l { to { transform: translate3d(-1100px, 0, 0); } }
@keyframes bv-drift-s { to { transform: translate3d(-760px, 0, 0); } }
.bv-fog-dark { opacity: 0.92; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 53%, rgba(0, 0, 0, 0.86) 70%, rgba(0, 0, 0, 0.38) 87%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 53%, rgba(0, 0, 0, 0.86) 70%, rgba(0, 0, 0, 0.38) 87%, transparent 100%); }
.bv-fog-dark .bv-tex { background-image: var(--bv-fog-dark); }
.bv-fog-lit { opacity: 0.82; -webkit-mask-image: radial-gradient(66% 46% at 50% var(--bv-ty), #000 0%, rgba(0, 0, 0, 0.7) 36%, transparent 80%); mask-image: radial-gradient(66% 46% at 50% var(--bv-ty), #000 0%, rgba(0, 0, 0, 0.7) 36%, transparent 80%); }
.bv-fog-lit .bv-tex { background-image: var(--bv-fog-lit); }
.bv-flash { opacity: 0; visibility: hidden; --fx: 30%; --fy: 18%; --fr: 42%; -webkit-mask-image: radial-gradient(var(--fr) calc(var(--fr) * 0.72) at var(--fx) var(--fy), #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 78%); mask-image: radial-gradient(var(--fr) calc(var(--fr) * 0.72) at var(--fx) var(--fy), #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 78%); }
.bv-flash .bv-tex { background-image: var(--bv-fog-flash); }
/* chão: brasa vermelha no horizonte e, na frente dela, fumaça escura mais perto da câmera (mais rápida) */
.bv-ground { background: linear-gradient(to top, rgba(3, 0, 1, 0.9), rgba(36, 7, 6, 0.48) 13vh, rgba(74, 16, 6, 0.12) 31vh, transparent 48vh), radial-gradient(105% 55% at 50% 112%, rgba(157, 20, 10, 0.38), rgba(84, 8, 7, 0.2) 48%, transparent 82%); }
.bv-bank { -webkit-mask-image: linear-gradient(to bottom, transparent 46%, rgba(0, 0, 0, 0.36) 72%, rgba(0, 0, 0, 0.75) 88%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 46%, rgba(0, 0, 0, 0.36) 72%, rgba(0, 0, 0, 0.75) 88%, transparent 100%); }
.bv-bank .bv-tex { --bv-drift: 58s; background-image: var(--bv-fog-bank); animation-direction: reverse; }
.bv-dust { width: 100%; height: 100%; }
.bv-vignette { background: radial-gradient(125% 100% at 50% 36%, transparent 46%, rgba(0, 0, 0, 0.45) 80%, rgba(0, 0, 0, 0.82) 100%); }

/* película por cima de tudo (não recebe clique): grão, exposição que oscila, fita perdendo o tracking */
.bv-film { position: fixed; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.bv-grain { position: absolute; inset: -64px; background-image: var(--bv-grain, none); background-size: 256px 256px; opacity: 0.075; animation: bv-grain 0.7s steps(1) infinite; }
@keyframes bv-grain { 0% { transform: translate3d(0, 0, 0); } 14% { transform: translate3d(-37px, 21px, 0); } 29% { transform: translate3d(18px, -44px, 0); } 43% { transform: translate3d(-52px, -9px, 0); } 57% { transform: translate3d(29px, 38px, 0); } 71% { transform: translate3d(-11px, -27px, 0); } 86% { transform: translate3d(46px, 13px, 0); } }
.bv-expo, .bv-expo::before { position: absolute; inset: 0; }
.bv-expo::before { content: ""; background: #000; opacity: 0; }
/* a fita perde o tracking: fios de chiado que descem e, junto, a imagem do fundo escorrega de lado */
.bv-track {
  position: absolute; left: 0; right: 0; top: 0; height: var(--bv-th, 34px); opacity: 0; transform: translate3d(0, -120%, 0);
  background:
    linear-gradient(to bottom, transparent 0, rgba(255, 236, 228, 0.5) 1px, transparent 2px, transparent 38%, rgba(255, 220, 210, 0.22) 39%, transparent 42%, transparent 88%, rgba(255, 240, 232, 0.55) 89%, transparent 91%),
    var(--bv-snow, none);
  background-size: 100% 100%, 240px 90px;
  mix-blend-mode: screen;
}

/* =========================================================
   CONTEÚDO
   ========================================================= */
.bv-in { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100%; padding: var(--bv-pad) clamp(18px, 4vw, 56px) 28px; }
.bv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- cabeçalho: o local datilografado e o letreiro ---------- */
.bv-head { text-align: center; }
.bv-kicker { position: relative; margin: 0 0 clamp(16px, 3vh, 30px); padding-left: 0.4em; font: 700 14px/20px var(--bv-type); letter-spacing: 0.4em; text-transform: uppercase; color: #eadccf; text-shadow: 0 0 12px rgba(255, 60, 30, 0.3); white-space: nowrap; }
.bv-k { display: inline-block; white-space: pre; }
.bv-k.off { visibility: hidden; }
/* cursor da máquina: pisca enquanto datilografa e some logo depois */
.bv-caret { display: inline-block; width: 0.58em; height: 1.05em; margin-right: -0.58em; vertical-align: -0.18em; background: #eadccf; box-shadow: 0 0 8px rgba(255, 90, 60, 0.5); animation: bv-caret 0.5s steps(1) infinite; }
@keyframes bv-caret { 50% { opacity: 0; } }
.bv-title { margin: 0; font: 700 var(--bv-t)/1 var(--bv-display); text-transform: uppercase; }

/* o letreiro: três camadas da mesma composição empilhadas (halo borrado, aro vermelho, núcleo quente) */
.bv-logo { position: relative; display: inline-block; }
.bv-layer { display: inline-flex; flex-direction: column; align-items: stretch; white-space: nowrap; }
.bv-layer + .bv-layer { position: absolute; inset: 0; }
.bv-l1 { display: flex; align-items: baseline; justify-content: center; letter-spacing: -0.012em; }
/* as letras menores quase encostam debaixo da barra, como no logo da série */
.bv-mid { position: relative; display: flex; align-items: baseline; padding: 0 0.02em; letter-spacing: -0.028em; }
.bv-big { font-size: 1.32em; position: relative; top: 0.105em; line-height: 0.8; }
.bv-l2 { display: flex; align-items: center; gap: 0.1em; margin-top: 0.12em; font-size: 0.5em; letter-spacing: 0.26em; }
.bv-w2 { display: flex; align-items: baseline; padding-left: 0.26em; }
.bv-c { display: inline-block; }
.bv-sp { display: inline-block; width: 0.34em; }
.bv-bar { flex: 1 1 0; min-width: 0.8em; height: 0.085em; transform-origin: var(--o, center); }
.bv-bar-l { --o: right; }
.bv-bar-r { --o: left; }
/* barra de cima: entre a primeira e a última letra, logo acima das letras menores */
.bv-mid::before { content: ""; position: absolute; left: -0.06em; right: -0.06em; top: 0.02em; height: 0.045em; transform-origin: center; }
/* aro: letra escura com o contorno vermelho; cada tubo com a sua força (tubos envelhecidos, portal.js sorteia) */
.bv-rim .bv-c { color: #0c0102; -webkit-text-stroke: 0.036em var(--bv-red); paint-order: stroke fill; opacity: var(--lum, 1); }
.bv-rim { filter: drop-shadow(0 0 0.025em rgba(255, 70, 40, 0.95)) drop-shadow(0 0 0.14em rgba(190, 8, 4, 0.55)); }
.bv-rim .bv-bar, .bv-rim .bv-mid::before { background: var(--bv-red); }
/* núcleo: o fio quente no meio do aro (quase branco) */
.bv-core .bv-c { color: transparent; -webkit-text-stroke: 0.0105em var(--bv-core); opacity: calc(var(--lum, 1) * 0.92); }
.bv-core .bv-bar, .bv-core .bv-mid::before { background: var(--bv-core); transform: scale(1, 0.3); opacity: 0.85; }
/* halo: cópia grossa e borrada — a luz que vaza em volta (rasterizada uma vez; só a opacidade muda) */
.bv-halo { filter: blur(0.075em); opacity: 0.62; }
.bv-halo .bv-c { color: #ff260e; -webkit-text-stroke: 0.09em #ff260e; }
.bv-halo .bv-bar, .bv-halo .bv-mid::before { background: #ff260e; box-shadow: 0 0 0 0.03em #ff260e; }

/* ---------- palco: premissa + história à esquerda, a porta à direita, dentro da largura do letreiro ---------- */
.bv-stage {
  display: grid; width: min(100%, var(--bv-frame)); margin: clamp(38px, 8.5vh, 92px) auto 0;
  grid-template-columns: minmax(0, 1fr) clamp(330px, 40%, 412px);
  grid-template-areas: "premise console" "story console" "epi epi";
  column-gap: clamp(36px, 5.5vw, 76px);
}
.bv-premise { grid-area: premise; padding-top: 2px; }
.bv-console { grid-area: console; align-self: start; }
.bv-story { grid-area: story; }
.bv-epi { grid-area: epi; }

/* premissa: a cartela do episódio e a frase de abertura */
.bv-chapter { margin: 0 0 16px; font: 700 12px/1 var(--bv-display); letter-spacing: 0.32em; text-transform: uppercase; color: #d4c2b1; }
.bv-tagline { margin: 0; font: italic 400 clamp(26px, 2.2vw, 31px)/1.22 var(--bv-serif); font-optical-sizing: auto; letter-spacing: -0.01em; color: #e3d3c8; text-wrap: balance; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9); }

/* a história: texto editorial corrido (a última voz da hierarquia), capitular no vermelho do letreiro, sem brilho */
.bv-story { position: relative; margin-top: clamp(26px, 4vh, 40px); }
/* sombra suave atrás da coluna para a fumaça não brigar com a leitura (sem caixa) */
.bv-story::before { content: ""; position: absolute; inset: -40px -60px -30px -70px; z-index: -1; background: radial-gradient(closest-side, rgba(3, 0, 1, 0.66), rgba(3, 0, 1, 0.4) 62%, transparent); pointer-events: none; }
.bv-story p { max-width: 62ch; margin: 0 0 1em; font: 400 17.5px/1.62 var(--bv-serif); color: #c6b7ad; hanging-punctuation: first; text-wrap: pretty; }
.bv-story-text > p:first-child::first-letter { float: left; margin: 0.05em 0.08em 0 -0.03em; font: 700 4em/0.76 var(--bv-display); color: #b3261a; }
.bv-story-text > p:first-child::first-line { color: #ddcfc5; }
/* Ambientação: as palavras respondem à leitura e a moldura cresce ao abrir o capítulo. */
.bv-tagline strong, .bv-story strong, .bv-epi strong { font-weight: 700; color: #f3dfd3; }
.bv-word { transition: color 0.23s ease, text-shadow 0.23s ease; }
.bv-word:hover, .bv-word.bv-touched { color: #ff503a; text-shadow: 0 0 12px rgba(255, 34, 22, 0.48); }
.bv-story-more[hidden], .bv-story-toggle[hidden] { display: none; }
.bv-story-toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 48px; max-width: 100%; margin: 12px 0 0; padding: 8px 2px; border: 0; border-top: 1px solid rgba(175, 53, 41, 0.56); background: none; color: #ead0c1; font: 700 13px/1.4 var(--bv-type); letter-spacing: 0.045em; text-align: left; cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease; }
.bv-story-toggle:hover { color: #fff0e6; border-color: #eb523c; }
.bv-story-toggle:focus-visible { outline: 2px solid #ffd3c6; outline-offset: 4px; }
.bv-story-toggle-mark { color: #f05841; font: 30px/0.8 var(--bv-serif); transition: transform 0.4s ease; }
.bv-story-toggle[aria-expanded="true"] .bv-story-toggle-mark { transform: rotate(180deg); }
.bv-story.bv-expanded::before { inset: -45px -90px; }
.bv-story-more p { margin-bottom: 1.32em; }
.bv-story-more .bv-omen { position: relative; margin-top: 2.1em; }
.bv-story-more .bv-omen::before { content: ""; display: block; width: 72px; height: 1px; margin: 0 0 20px; background: #a52c24; box-shadow: 0 0 13px #a52c24; }
.bv-expanded .bv-omen::before { animation: bv-omen-glow 1.1s steps(2) 0.7s both; }
@keyframes bv-omen-glow { 25% { background: #ff745e; box-shadow: 0 0 24px #f52d20; } 60% { opacity: 0.45; } }
.bv-vines {
  position: absolute; inset: -24px -58px -45px; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.bv-vine-art {
  position: absolute; display: block; width: 286px; height: 709px;
  background: url("/images/ambientacao-vinhas-v2.webp") center / 100% 100% no-repeat;
  opacity: 0; clip-path: inset(0 0 100% 0);
  -webkit-mask-image: radial-gradient(ellipse 83% 78% at 29% 47%, #000 22%, rgba(0, 0, 0, 0.8) 55%, transparent 89%);
  mask-image: radial-gradient(ellipse 83% 78% at 29% 47%, #000 22%, rgba(0, 0, 0, 0.8) 55%, transparent 89%);
}
.bv-vine-top-left { top: -38px; left: -105px; }
.bv-vine-top-right { top: 46px; right: -113px; transform: scaleX(-1); }
.bv-vine-bottom-left { bottom: -82px; left: -128px; transform: scaleY(-1); }
.bv-vine-bottom-right { bottom: 28px; right: -103px; transform: scale(-1); }
.bv-expanded .bv-vine-art { opacity: 0.76; clip-path: inset(0); animation: bv-vines-grow 2.2s cubic-bezier(0.2, 0.72, 0.18, 1) both; }
.bv-expanded .bv-vine-top-right { animation-delay: 0.22s; }
.bv-expanded .bv-vine-bottom-left, .bv-expanded .bv-vine-bottom-right { animation-name: bv-vines-rise; animation-delay: 0.45s; opacity: 0.44; }
.bv-expanded .bv-vine-bottom-right { animation-delay: 0.66s; }
@keyframes bv-vines-grow { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 0.76; clip-path: inset(0); } }
@keyframes bv-vines-rise { from { opacity: 0; clip-path: inset(100% 0 0 0); } to { opacity: 0.44; clip-path: inset(0); } }
.bv-story-text, .bv-story-more, .bv-story-toggle { position: relative; z-index: 1; }
/* epígrafe: o golpe final antes dos créditos, na largura da página toda */
.bv-epi { position: relative; justify-self: center; max-width: 30ch; margin: clamp(56px, 9vh, 96px) 0 0; padding-top: 30px; font: italic 400 clamp(24px, 2.1vw, 30px)/1.4 var(--bv-serif); color: #f1e2d8; text-align: center; text-wrap: balance; text-shadow: 0 0 26px rgba(255, 40, 20, 0.22), 0 2px 16px rgba(0, 0, 0, 0.9); }
.bv-epi::before { content: ""; position: absolute; left: 50%; top: 0; width: 56px; height: 2px; margin-left: -28px; background: #b3261a; }
.bv-epi[hidden] { display: none; }

.bv-foot { margin: auto 0 0; padding-top: clamp(40px, 8vh, 90px); font: italic 400 13px/1.5 var(--bv-serif); color: #86706c; text-align: center; }

/* =========================================================
   A PORTA (entrar / criar conta / etapas) — uma sombra dentro da cena,
   só um fio de luz no topo, a luz do letreiro batendo na borda
   ========================================================= */
.bv-console { position: relative; padding: 24px 28px 26px; background: linear-gradient(180deg, rgba(8, 2, 3, 0.84), rgba(5, 1, 2, 0.8) 70%, rgba(5, 1, 2, 0.7)); }
@media (min-width: 1000px) and (min-height: 640px) { .bv-stage > .bv-console { position: sticky; top: 26px; } }
.bv-console::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(160, 40, 24, 0.7) 18%, #c8452c 44%, rgba(160, 40, 24, 0.7) 76%, transparent); box-shadow: 0 0 10px rgba(200, 50, 30, 0.35); transition: filter 0.6s ease; }
.bv-console:focus-within::before { filter: brightness(1.45); }

/* ---------- carregando ---------- */
.portal.bv .portal-loading { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 372px; font: 400 15px var(--bv-type); letter-spacing: 0.04em; color: #d4bdb2; }
.portal.bv .portal-loading[hidden] { display: none; }
.portal.bv .portal-radio { display: inline-flex; align-items: flex-end; gap: 3px; height: 15px; }
.portal.bv .portal-radio i { width: 2px; height: 100%; background: var(--bv-hot); transform-origin: bottom; animation: bv-eq 0.9s ease-in-out infinite alternate; }
.portal.bv .portal-radio i:nth-child(2) { animation-duration: 0.63s; animation-delay: -0.3s; }
.portal.bv .portal-radio i:nth-child(3) { animation-duration: 1.13s; animation-delay: -0.7s; }
@keyframes bv-eq { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }

/* ---------- aviso do modo demonstração e cadastro fechado ---------- */
.portal.bv .mode-banner { margin: 0 0 18px; padding: 10px 12px; border: 1px dashed rgba(214, 170, 80, 0.6); border-radius: 0; font: 13px/1.5 var(--bv-type); color: #e9cf8a; background: rgba(160, 120, 40, 0.07); }
.portal.bv .portal-closed { margin: 16px 0 0; padding: 0; border: 0; border-radius: 0; background: none; font: 400 14px/1.5 var(--bv-type); color: #d9c4b8; }

/* ---------- abas: texto comum, sem caixa alta; a aba aberta ganha o fio claro que corre por baixo ---------- */
.portal.bv .tabs { position: relative; display: flex; gap: 26px; border-bottom: 1px solid rgba(120, 40, 34, 0.45); }
.portal.bv .tab { position: relative; padding: 2px 0 12px; border: 0; border-radius: 0; background: none; font: 500 17px/1.2 var(--bv-serif); letter-spacing: 0; text-transform: none; color: #b9a69b; text-shadow: none; cursor: pointer; transition: color 0.35s ease; }
.portal.bv .tab:hover { color: #efe1d7; }
.portal.bv .tab.active { color: #f6e9e0; background: none; }
.portal.bv .tab[hidden] { display: none; }
.portal.bv .tab:focus-visible { outline: 2px solid #f0d8cc; outline-offset: 5px; }
.bv-tab-light { position: absolute; left: 0; bottom: -1px; width: var(--bv-tw, 60px); height: 2px; transform: translateX(var(--bv-tx, 0)); background: #eadccf; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* ---------- formulários ---------- */
.portal.bv .form { padding: 22px 0 0; }
.portal.bv .form:not([hidden]) { animation: bv-panel 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes bv-panel { from { opacity: 0; } }
#form-register:not([hidden]) label { animation: bv-reg-reveal 0.55s cubic-bezier(0.16, 0.72, 0.2, 1) both; }
#form-register:not([hidden]) label:nth-of-type(1) { animation-delay: 0.05s; }
#form-register:not([hidden]) .row label:first-child { animation-delay: 0.12s; }
#form-register:not([hidden]) .row label:last-child { animation-delay: 0.19s; }
@keyframes bv-reg-reveal { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
.bv-reg-progress { margin: -2px 0 22px; }
.bv-reg-copy { display: flex; justify-content: space-between; gap: 12px; font: 400 12px/1.35 var(--bv-type); color: #cbb7ac; }
.bv-reg-copy span { color: #a89084; text-align: right; }
.bv-reg-track { display: flex; gap: 4px; margin-top: 9px; }
.bv-reg-track i { position: relative; flex: 1; height: 2px; background: #46201d; overflow: hidden; }
.bv-reg-track i::after { content: ""; position: absolute; inset: 0; background: #e7684b; box-shadow: 0 0 9px rgba(231, 104, 75, 0.75); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.bv-reg-track i.on::after { transform: scaleX(1); }
.bv-console fieldset { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
/* "Jogador" continua sendo o nome do grupo para leitores de tela; na tela o formulário é uma coluna só */
.bv-console legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* rótulos: a voz da máquina de escrever de 2003 */
.bv-console label { position: relative; display: block; flex: 1; margin: 0 0 16px; font: 400 14px/1.3 var(--bv-type); letter-spacing: 0.01em; text-transform: none; color: #c4b1a6; transition: color 0.5s ease; }
.bv-console label:focus-within { color: #fbeee6; }
.bv-console label.bv-field-ready { color: #ead9cf; }
.bv-console label.bv-field-ready::after { content: ""; position: absolute; right: 1px; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: #ffa486; box-shadow: 0 0 9px rgba(255, 80, 48, 0.75); animation: bv-ready-lamp 0.55s ease-out both; }
@keyframes bv-ready-lamp { from { opacity: 0; transform: scale(0.2); } }
.bv-console .hint { display: block; margin-top: 4px; font: italic 400 13.5px/1.4 var(--bv-serif); letter-spacing: 0; text-transform: none; color: #9f8c82; opacity: 1; }
.bv-console label > .hint:last-child { margin-top: 7px; }
.bv-console .row { display: flex; flex-direction: column; gap: 0; }
.bv-console .row label { min-width: 0; }
/* campo: fio embaixo; no foco o fio esquenta e a luz sobe de baixo, devagar (as laterais nunca acendem) */
.bv-console input {
  display: block; width: 100%; height: 48px; margin-top: 7px; padding: 0 14px;
  border: 0; border-radius: 0;
  background: linear-gradient(to top, rgba(255, 70, 40, 0.16), rgba(255, 70, 40, 0) 72%) no-repeat left bottom / 100% 0%, rgba(0, 0, 0, 0.52);
  box-shadow: inset 0 -1px 0 #5c1a18;
  color: #fff3ee; font: 400 16px/1 var(--bv-type); letter-spacing: 0.02em; text-transform: none;
  caret-color: var(--bv-hot);
  transition: background-size 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.6s ease, background-color 0.6s ease;
}
.bv-console input::placeholder { color: #7f6a63; font-style: italic; }
.bv-console input:hover { box-shadow: inset 0 -1px 0 #8a2a22; }
.bv-console input:focus, .bv-console input:focus-visible { outline: none; background-size: 100% 100%, auto; box-shadow: inset 0 -2px 0 var(--bv-hot), 0 14px 22px -18px rgba(255, 60, 30, 0.8); }
.bv-console input:-webkit-autofill { -webkit-text-fill-color: #fff3ee; -webkit-box-shadow: inset 0 -1px 0 #5c1a18, 0 0 0 40px #140304 inset; }
/* erro: o fio dos campos pisca vermelho duas vezes e a mensagem aparece datilografada, sem caixa */
.bv-console .form:has(.form-msg:not(:empty)) input { box-shadow: inset 0 -2px 0 #ff5a3c; animation: bv-err 0.5s steps(1) 2; }
@keyframes bv-err { 50% { box-shadow: inset 0 -1px 0 #3a0c0c; } }
.portal.bv .form-msg { min-height: 0; margin: 0; font: 700 14px/1.45 var(--bv-type); color: #ff8a6c; }
.portal.bv .form-msg:not(:empty) { margin: -4px 0 16px; }

/* ---------- o botão principal: a única superfície vermelha acesa da página ---------- */
.portal.bv .gloss-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 22px; overflow: hidden;
  border: 0; border-radius: 1px; font: 700 15px/1.2 var(--bv-display); letter-spacing: 0.13em; text-transform: uppercase; color: #fff5f0;
  text-shadow: 0 1px 0 rgba(60, 0, 0, 0.5);
  background: #a8180f;
  box-shadow: inset 0 1px 0 rgba(255, 196, 176, 0.42), 0 0 0 1px #2c0204, 0 0 26px rgba(210, 26, 12, 0.36);
  filter: none; cursor: pointer; transition: background-color 0.4s ease, box-shadow 0.5s ease, transform 0.12s ease;
}
.portal.bv .gloss-btn > span { position: relative; z-index: 1; }
.portal.bv .gloss-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 18%, rgba(255, 221, 207, 0.28) 50%, transparent 82%); transform: translate3d(-110%, 0, 0); }
.portal.bv .form:has(.gloss-btn[disabled]) .gloss-btn::before { animation: bv-submit-scan 1.5s ease-in-out infinite; }
@keyframes bv-submit-scan { to { transform: translate3d(110%, 0, 0); } }
.portal.bv #form-register.bv-register-ready .gloss-btn { box-shadow: inset 0 1px 0 rgba(255, 208, 190, 0.5), 0 0 0 1px #3b0304, 0 0 32px rgba(222, 33, 16, 0.45); }
/* reflexo que passa uma vez só ao entrar com o mouse */
.portal.bv .gloss-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 224, 210, 0.18) 50%, transparent); transform: translate3d(-130%, 0, 0) skewX(-18deg); }
.portal.bv .gloss-btn:hover { filter: none; background-color: #c42313; box-shadow: inset 0 1px 0 rgba(255, 206, 190, 0.55), 0 0 0 1px #3a0305, 0 0 38px rgba(230, 36, 16, 0.55); }
.portal.bv .gloss-btn:hover::after { transform: translate3d(330%, 0, 0) skewX(-18deg); transition: transform 0.9s cubic-bezier(0.3, 0.6, 0.2, 1); }
.portal.bv .gloss-btn:active { transform: translate3d(0, 1px, 0); background-color: #8e140c; box-shadow: inset 0 2px 8px rgba(20, 0, 0, 0.55), 0 0 0 1px #2c0204, 0 0 18px rgba(210, 26, 12, 0.3); }
.portal.bv .gloss-btn:focus-visible { outline: 2px solid #ffd3c6; outline-offset: 4px; }
.portal.bv .gloss-btn[disabled] { cursor: wait; opacity: 1; background-color: #6e120c; }
.portal.bv .gloss-btn[disabled] > span::after { content: "…"; }
/* secundário (sair da conta etc.): texto comum com o contorno, sem luz */
.portal.bv .gloss-alt { min-height: 48px; font: 500 16px/1.2 var(--bv-serif); letter-spacing: 0; text-transform: none; color: #eadcd2; text-shadow: none; background: transparent; box-shadow: inset 0 0 0 1px rgba(170, 60, 44, 0.55); }
.portal.bv .gloss-alt:hover { color: #fff; background: rgba(120, 20, 12, 0.18); box-shadow: inset 0 0 0 1px rgba(230, 90, 60, 0.85); }
.portal.bv .form .gloss-btn { margin-top: 4px; }

/* convite para quem ainda não tem conta (logo abaixo do botão) e as letras miúdas */
.bv-invite { margin: 16px 0 0; font: 400 16.5px/1.45 var(--bv-serif); color: #d8c8bd; }
.bv-invite[hidden] { display: none; }
.portal.bv .portal-hint { margin: 14px 0 0; font: 400 13.5px/1.5 var(--bv-serif); color: #9d8b81; text-align: left; }
.bv-link { display: inline; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: #f6e8de; cursor: pointer; text-decoration: underline 1px rgba(227, 38, 15, 0.9); text-underline-offset: 0.24em; transition: color 0.3s ease, text-decoration-color 0.3s ease, text-shadow 0.4s ease; }
.bv-link:hover { color: #fff; text-shadow: 0 0 14px rgba(255, 70, 40, 0.55); text-decoration-color: var(--bv-hot); text-decoration-thickness: 2px; }
.bv-link:focus-visible { outline: 2px solid #ffd3c6; outline-offset: 3px; }

/* ---------- etapas (aguardando aprovação, recusado, ficha, liberado...) ---------- */
.portal.bv .portal-status { padding: 4px 0 0; text-align: left; }
.portal.bv .portal-status.in > * { animation: bv-expose-s 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.portal.bv .portal-status.in > :nth-child(2) { animation-delay: 0.08s; }
.portal.bv .portal-status.in > :nth-child(3) { animation-delay: 0.16s; }
.portal.bv .portal-status.in > :nth-child(n+4) { animation-delay: 0.24s; }
@keyframes bv-expose-s { from { opacity: 0; filter: brightness(1.8); } }
.portal.bv .portal-status p { margin: 0 0 12px; font: 400 17px/1.55 var(--bv-serif); color: #e2d2c8; overflow-wrap: anywhere; }
.portal.bv .portal-status p b { color: #fff; font-weight: 600; }
.portal.bv .portal-status .ps-small { font-size: 15px; color: #a5938a; }
.portal.bv .portal-status .ps-meta { font: 400 14px var(--bv-type); letter-spacing: 0.04em; color: #c9ada2; }
/* o estado da conta é uma lâmpada de aparelho: acesa piscando (aguardando), apagada (negada), meia-luz (ficha), estourando (liberado).
   O sinal escrito (✕, ?, ✎) fica só para leitores de tela ignorarem: a lâmpada fala por ele. */
.portal.bv .ps-icon { position: relative; display: block; width: 18px; height: 18px; margin: 6px 0 18px; border: 0; border-radius: 0; box-shadow: none; font-size: 0; color: transparent; text-shadow: none; }
.portal.bv .ps-icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, #3c0b09, #1c0303 70%, #0c0101); box-shadow: inset 0 1px 1px rgba(255, 200, 190, 0.12), 0 0 0 2px #120202; }
.portal.bv .ps-signal::after { background: radial-gradient(closest-side, #ffe6da, #ff4a2c 45%, #a0140c 80%); box-shadow: 0 0 0 2px #120202, 0 0 14px 3px rgba(255, 50, 25, 0.55), 0 0 40px 8px rgba(255, 40, 20, 0.22); animation: bv-beacon 2.8s steps(1) infinite; }
.portal.bv .ps-signal i { display: none; }
@keyframes bv-beacon { 0%, 58% { opacity: 1; } 60% { opacity: 0.3; } 63% { opacity: 1; } 66% { opacity: 0.45; } 70%, 100% { opacity: 1; } }
.portal.bv .ps-file::after { background: radial-gradient(closest-side, #c9573f, #7a1a10 60%, #2a0504); box-shadow: 0 0 0 2px #120202, 0 0 12px 2px rgba(200, 50, 25, 0.3); }
.portal.bv .ps-open::after { background: radial-gradient(closest-side, #fff, #ffb39c 40%, #ff4a2c 75%); box-shadow: 0 0 0 2px #120202, 0 0 22px 6px rgba(255, 80, 40, 0.7), 0 0 60px 16px rgba(255, 40, 20, 0.35); }
.portal.bv .ps-open i { display: none; }
.portal.bv .ps-title { margin: 0 0 14px; font: 700 21px/1.2 var(--bv-display); letter-spacing: 0.06em; text-transform: uppercase; color: #f2e3d9; text-shadow: none; }
.portal.bv .ps-granted { color: #ff5a3c; text-shadow: 0 0 1px #ffc2b0, 0 0 12px rgba(255, 50, 25, 0.7), 0 0 30px rgba(200, 10, 5, 0.45); animation: bv-granted 0.8s steps(1) both; }
@keyframes bv-granted { 0% { opacity: 0.1; } 20% { opacity: 1; } 30% { opacity: 0.3; } 45%, 100% { opacity: 1; } }
.portal.bv .ps-btn { width: 100%; margin: 10px 0 0; }

/* =========================================================
   MÚSICA DA ENTRADA (entrada-musica.js) — o equalizador, o nome e o volume.
   Na entrada fica no alto à direita, na linha do local, sem caixa;
   no portão, no canto de baixo; no montador de ficha, na barra dele.
   ========================================================= */
.em-ctl { position: fixed; left: 16px; bottom: 16px; z-index: 50; display: inline-flex; align-items: center; gap: 2px; padding: 0 12px 0 0; background: rgba(6, 1, 2, 0.84); box-shadow: inset 0 0 0 1px rgba(150, 30, 28, 0.45), 0 10px 26px rgba(0, 0, 0, 0.6); opacity: 0.78; transition: opacity 0.4s ease; }
.em-ctl[hidden] { display: none; }
.em-ctl:hover, .em-ctl:focus-within { opacity: 1; }
.em-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px 0 12px; border: 0; border-radius: 0; background: none; color: #efdcd2; font: 400 13px/1 "Courier Prime", "Courier New", monospace; letter-spacing: 0.04em; text-transform: lowercase; cursor: pointer; }
.em-btn:focus-visible { outline: 2px solid #ffd3c6; outline-offset: 2px; }
.em-eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 13px; height: 13px; }
.em-eq i { flex: 1; height: 100%; background: #ff4a2c; box-shadow: 0 0 5px rgba(255, 60, 30, 0.6); transform-origin: bottom; transform: scaleY(0.3); }
.em-ctl.em-playing .em-eq i { animation: em-eq 0.94s ease-in-out infinite alternate; }
.em-ctl.em-playing .em-eq i:nth-child(2) { animation-duration: 0.61s; animation-delay: -0.3s; }
.em-ctl.em-playing .em-eq i:nth-child(3) { animation-duration: 1.27s; animation-delay: -0.7s; }
@keyframes em-eq { from { transform: scaleY(0.22); } to { transform: scaleY(1); } }
.em-off .em-eq i { background: #6b5a58; box-shadow: none; }
.em-off .em-txt { color: #9c8e8a; }
/* esperando o navegador liberar o som: convida a tocar (só a opacidade pulsa, duas vezes) */
.em-wait .em-eq i { background: #c0503f; box-shadow: none; }
.em-wait .em-btn { color: #ffe3d9; }
.em-wait:not(:hover):not(:focus-within) { animation: em-call 3.2s ease-in-out 1.2s 2 both; }
@keyframes em-call { 0%, 100% { opacity: 0.78; } 50% { opacity: 1; } }
/* volume: trilho fino, a parte cheia acesa, o cursor é uma tecla de mesa de som (não uma bolinha) */
.em-vol { display: inline-flex; align-items: center; margin: 0; }
.em-vol[hidden] { display: none; }
.em-vol input { -webkit-appearance: none; appearance: none; display: block; width: 84px; height: 30px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; --v: 100%; }
.em-vol input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, #d8b8aa 0 var(--v), #4a1a18 var(--v) 100%); }
.em-vol input::-moz-range-track { height: 2px; background: #4a1a18; }
.em-vol input::-moz-range-progress { height: 2px; background: #d8b8aa; }
.em-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 7px; height: 16px; margin-top: -7px; border: 0; border-radius: 1px; background: #f0dcd2; box-shadow: 0 0 0 1px #2a0204; }
.em-vol input::-moz-range-thumb { width: 7px; height: 16px; border: 0; border-radius: 1px; background: #f0dcd2; box-shadow: 0 0 0 1px #2a0204; }
.em-vol input:focus-visible { outline: 2px solid #ffd3c6; outline-offset: 2px; }
.em-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* na entrada: no alto da página, à direita, centrado na linha do local (rola junto; fixo ele cobria o texto) */
.bv-sound { position: absolute; top: calc(var(--bv-pad) - 9px); right: clamp(12px, 2.6vw, 36px); z-index: 2; }
.em-ctl.em-in-slot { position: static; background: none; box-shadow: none; }
/* dentro da barra do montador de ficha, ao lado do "← Voltar" */
.em-ctl.em-in-bar { position: static; flex: none; opacity: 1; box-shadow: inset 0 0 0 1px rgba(150, 30, 28, 0.45); }
@media (max-width: 640px) { .em-in-bar .em-txt, .em-in-bar .em-vol { display: none; } .em-ctl.em-in-bar { padding: 0; } }
/* a música tocando: o chão e a luz respiram um pouco mais fundo (quase imperceptível) */
.bv-void::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60vmax 30vmax at 50% var(--bv-ty), rgba(255, 50, 25, 0.14), transparent 70%); opacity: 0; transition: opacity 2.5s ease; animation: bv-music 5.3s ease-in-out infinite; }
body.em-on .bv-void::after { opacity: 1; }
@keyframes bv-music { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* =========================================================
   ENTRADA — a página acorda (~2 s na primeira vez da visita; ~1 s nas outras)
   escuro → a luz vermelha sobe pela fumaça → o local é datilografado →
   o letreiro acende em estágios (letras falhando, halo, barras) → um
   soluço ótico trava a imagem → premissa, porta e história "revelam-se"
   com a luz (exposição, não deslizam) → um relâmpago acende as nuvens e
   o botão principal responde: é o clímax.
   ========================================================= */
.bv-enter .bv-light { animation: bv-light-in calc(1.4s * var(--bv-s)) cubic-bezier(0.3, 0, 0.3, 1) calc(0.05s * var(--bv-s)) both; }
@keyframes bv-light-in { 0% { opacity: 0; } 20% { opacity: 0.32; } 27% { opacity: 0.1; } 42% { opacity: 0.5; } 100% { opacity: 1; } }
.bv-enter .bv-fog-dark { animation: bv-fade-dark calc(1.6s * var(--bv-s)) ease-out both; }
.bv-enter .bv-fog-lit { animation: bv-fade-lit calc(1.4s * var(--bv-s)) ease-out calc(0.25s * var(--bv-s)) both; }
.bv-enter .bv-ground { animation: bv-fade-in calc(1.4s * var(--bv-s)) ease-out calc(0.15s * var(--bv-s)) both; }
.bv-enter .bv-bank { animation: bv-fade-in calc(1.8s * var(--bv-s)) ease-out both; }
.bv-enter .bv-dust { animation: bv-fade-in calc(1.2s * var(--bv-s)) ease-out calc(0.8s * var(--bv-s)) both; }
@keyframes bv-fade-in { from { opacity: 0; } }
@keyframes bv-fade-dark { from { opacity: 0; } to { opacity: 0.92; } }
@keyframes bv-fade-lit { from { opacity: 0; } to { opacity: 0.82; } }
/* letreiro: aro e núcleo gaguejam letra por letra (ordem sorteada); depois o halo floresce e as barras correm */
.bv-enter .bv-rim .bv-c, .bv-enter .bv-core .bv-c { animation: bv-ign calc(0.7s * var(--bv-s)) steps(1) calc(var(--id) * var(--bv-s)) both; }
@keyframes bv-ign { 0% { opacity: 0; } 10% { opacity: 0.85; } 16% { opacity: 0.1; } 25% { opacity: var(--lum, 1); } 33% { opacity: 0.3; } 42%, 100% { opacity: var(--lum, 1); } }
.bv-enter .bv-core .bv-c { animation-name: bv-ign-core; }
@keyframes bv-ign-core { 0% { opacity: 0; } 10% { opacity: 0.8; } 16% { opacity: 0.1; } 25% { opacity: 0.92; } 33% { opacity: 0.3; } 42%, 100% { opacity: calc(var(--lum, 1) * 0.92); } }
.bv-enter .bv-halo { animation: bv-halo-in calc(1s * var(--bv-s)) cubic-bezier(0.2, 0.6, 0.3, 1) calc(0.75s * var(--bv-s)) both; }
@keyframes bv-halo-in { 0% { opacity: 0; } 55% { opacity: 0.82; } 100% { opacity: 0.62; } }
.bv-enter .bv-mid::before { animation: bv-bar-in calc(0.45s * var(--bv-s)) cubic-bezier(0.5, 0, 0.1, 1) calc(0.7s * var(--bv-s)) both; }
.bv-enter .bv-bar { animation: bv-bar-in calc(0.5s * var(--bv-s)) cubic-bezier(0.5, 0, 0.1, 1) calc(0.85s * var(--bv-s)) both; }
.bv-enter .bv-core .bv-mid::before, .bv-enter .bv-core .bv-bar { animation-name: bv-bar-in-core; }
@keyframes bv-bar-in { from { transform: scaleX(0); } }
@keyframes bv-bar-in-core { from { transform: scale(0, 0.3); } to { transform: scale(1, 0.3); } }
/* o soluço ótico que "trava" a imagem quando o letreiro termina de acender */
.bv-enter .bv-title { animation: bv-chroma 0.2s steps(2) calc(1.15s * var(--bv-s)) 1; }
/* o conteúdo se revela com a luz: aparece estourado e desfocado e assenta (sem deslizar) */
.bv-enter .bv-premise, .bv-enter .bv-console, .bv-enter .bv-story, .bv-enter .bv-epi, .bv-enter .bv-foot, .bv-enter .bv-sound { animation: bv-expose calc(0.8s * var(--bv-s)) cubic-bezier(0.2, 0.6, 0.2, 1) both; }
@keyframes bv-expose { 0% { opacity: 0; filter: brightness(2) blur(3px); } 55% { opacity: 1; } 100% { opacity: 1; filter: none; } }
.bv-enter .bv-premise { animation-delay: calc(0.95s * var(--bv-s)); }
.bv-enter .bv-console { animation-delay: calc(1.1s * var(--bv-s)); }
.bv-enter .bv-story { animation-delay: calc(1.3s * var(--bv-s)); animation-name: bv-fade-in; }
.bv-enter .bv-epi, .bv-enter .bv-foot, .bv-enter .bv-sound { animation-delay: calc(1.5s * var(--bv-s)); animation-name: bv-fade-in; }
.bv-enter .bv-console::before { animation: bv-bar-in calc(0.7s * var(--bv-s)) cubic-bezier(0.5, 0, 0.1, 1) calc(1.15s * var(--bv-s)) both; }
/* clímax: o relâmpago acende as nuvens e o botão principal "estoura" junto, uma vez (nunca aparece apagado) */
.bv-enter .bv-cta { animation: bv-surge-cta calc(0.7s * var(--bv-s)) steps(1) calc(1.9s * var(--bv-s)) 1; }
@keyframes bv-surge-cta { 0% { background-color: #ff4a2c; box-shadow: inset 0 1px 0 rgba(255, 230, 220, 0.8), 0 0 0 1px #3a0305, 0 0 60px rgba(255, 60, 30, 0.8); } 14% { background-color: #a8180f; } 22% { background-color: #e4301c; box-shadow: inset 0 1px 0 rgba(255, 220, 205, 0.7), 0 0 0 1px #3a0305, 0 0 44px rgba(255, 50, 25, 0.65); } 40%, 100% { background-color: #a8180f; } }

/* =========================================================
   AMBIENTE — nunca congelado, sempre devagar e em ciclos que não se repetem juntos
   ========================================================= */
.bv-light { animation: bv-breathe 11.3s ease-in-out infinite; }
@keyframes bv-breathe { 0%, 100% { opacity: 1; } 23% { opacity: 0.86; } 41% { opacity: 0.97; } 63% { opacity: 0.8; } 82% { opacity: 0.94; } }
.bv-fog-lit { animation: bv-density 17.7s ease-in-out infinite; }
@keyframes bv-density { 0%, 100% { opacity: 0.82; } 37% { opacity: 0.66; } 71% { opacity: 0.92; } }
.bv-fog-dark { animation: bv-sway 29s ease-in-out infinite alternate; }
@keyframes bv-sway { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -2.5%, 0); } }
.bv-ground { animation: bv-embers 13.1s ease-in-out infinite; }
@keyframes bv-embers { 0%, 100% { opacity: 1; } 31% { opacity: 0.78; } 58% { opacity: 0.95; } 77% { opacity: 0.7; } }
.bv-halo { animation: bv-halo 9.7s ease-in-out infinite; }
@keyframes bv-halo { 0%, 100% { opacity: 0.62; } 29% { opacity: 0.5; } 47% { opacity: 0.66; } 73% { opacity: 0.54; } }
/* exposição de película: tremores de luz num ciclo longo e sem ritmo (subidas lentas, quedas secas) */
.bv-expo::before { animation: bv-expo 19.3s linear infinite; }
@keyframes bv-expo { 0%, 100% { opacity: 0; } 9% { opacity: 0.03; } 10% { opacity: 0.005; } 23% { opacity: 0.05; } 31% { opacity: 0.012; } 32% { opacity: 0.045; } 33% { opacity: 0; } 47% { opacity: 0.035; } 58% { opacity: 0.06; } 60% { opacity: 0.01; } 71% { opacity: 0.04; } 72.5% { opacity: 0; } 86% { opacity: 0.03; } }
.bv-console::before { animation: bv-rim 8.9s ease-in-out infinite; }
@keyframes bv-rim { 0%, 100% { opacity: 1; } 38% { opacity: 0.72; } 69% { opacity: 0.94; } }

/* =========================================================
   ACIDENTES RAROS (portal.js sorteia quando e qual; nunca em ritmo fixo)
   ========================================================= */
/* relâmpago dentro das nuvens: um pedaço da fumaça acende por dentro, com um instante branco-quente */
.bv-flash.go, .bv-flash.go2 { visibility: visible; }
.bv-flash.go { animation: bv-flash 0.95s linear both; }
.bv-flash.go2 { animation: bv-flash2 1.15s linear both; }
@keyframes bv-flash { 0% { opacity: 0; } 5% { opacity: 1; } 11% { opacity: 0.3; } 17% { opacity: 0.75; } 45% { opacity: 0.16; } 100% { opacity: 0; } }
@keyframes bv-flash2 { 0% { opacity: 0; } 5% { opacity: 0.85; } 10% { opacity: 0.1; } 30% { opacity: 0.05; } 34% { opacity: 1; } 40% { opacity: 0.3; } 46% { opacity: 0.65; } 70% { opacity: 0.1; } 100% { opacity: 0; } }
/* o letreiro responde ao clarão */
.bv-logo.bv-surge { animation: bv-surge 0.9s ease-out both; }
@keyframes bv-surge { 0% { filter: none; } 8% { filter: brightness(1.5); } 16% { filter: brightness(1.1); } 22% { filter: brightness(1.32); } 100% { filter: none; } }
/* uma letra falha (o aro e o núcleo juntos) */
.bv-c.bv-fl { animation: bv-flick 0.95s steps(1) both; }
@keyframes bv-flick { 0%, 100% { opacity: var(--lum, 1); } 8% { opacity: 0.15; } 13% { opacity: var(--lum, 1); } 30% { opacity: 0.25; } 34% { opacity: 0.8; } 39% { opacity: 0.1; } 52% { opacity: var(--lum, 1); } }
/* perda de sincronia cromática: o vermelho e o ciano se separam por um instante */
.bv-title.bv-chroma { animation: bv-chroma 0.22s steps(2) 1; }
@keyframes bv-chroma { 0% { filter: drop-shadow(0.035em 0 0 rgba(0, 220, 255, 0.4)) drop-shadow(-0.03em 0 0 rgba(255, 0, 40, 0.55)); transform: translate3d(0.012em, 0, 0); } 50% { filter: drop-shadow(-0.02em 0 0 rgba(0, 220, 255, 0.35)) drop-shadow(0.025em 0 0 rgba(255, 0, 40, 0.5)); transform: translate3d(-0.008em, 0, 0); } 100% { filter: none; transform: none; } }
/* queda de energia: tudo que é elétrico cai junto e volta aos trancos (como as luzes de Hawkins) */
.bv-dip .bv-expo::before { animation: bv-dip 1.3s steps(1) both; }
@keyframes bv-dip { 0% { opacity: 0; } 6% { opacity: 0.42; } 10% { opacity: 0.08; } 16% { opacity: 0.55; } 40% { opacity: 0.35; } 46% { opacity: 0.6; } 52% { opacity: 0.12; } 58% { opacity: 0.3; } 64%, 100% { opacity: 0; } }
.bv-dip .bv-logo { animation: bv-logo-dip 1.3s steps(1) both; }
@keyframes bv-logo-dip { 0% { filter: none; } 6% { filter: brightness(0.5); } 10% { filter: none; } 16% { filter: brightness(0.35) saturate(0.7); } 46% { filter: brightness(0.3); } 52% { filter: brightness(0.9); } 58% { filter: brightness(0.6); } 64%, 100% { filter: none; } }
/* a fita perde o tracking: fios de chiado descem e a imagem do fundo escorrega de lado aos trancos */
.bv-track.go { animation: bv-track var(--bv-tt, 0.75s) cubic-bezier(0.4, 0.1, 0.7, 0.9) both; }
@keyframes bv-track { 0% { opacity: 0; transform: translate3d(0, -120%, 0); } 8% { opacity: 0.55; } 88% { opacity: 0.45; } 100% { opacity: 0; transform: translate3d(0, 100vh, 0); } }
.bv-slip .bv-sky { animation: bv-slip var(--bv-tt, 0.75s) steps(1) both; }
@keyframes bv-slip { 0%, 100% { transform: none; } 12% { transform: translate3d(9px, 0, 0); } 22% { transform: translate3d(-4px, 0, 0); } 38% { transform: translate3d(12px, 0, 0); } 50% { transform: none; } 66% { transform: translate3d(-7px, 0, 0); } 80% { transform: translate3d(3px, 0, 0); } }

/* painel do montador de ficha por cima, ou a aba escondida: a cena fica parada */
.bv-paused *, .bv-paused *::before, .bv-paused *::after { animation-play-state: paused !important; }

/* saída ("acesso liberado"): a luz estoura e o quadro apaga */
.portal.bv.leaving { animation: bv-out 0.9s ease-in forwards; }
@keyframes bv-out { 0% { opacity: 1; filter: none; } 25% { opacity: 1; filter: brightness(1.7) saturate(1.2); } 100% { opacity: 0; filter: brightness(0.3); } }

/* =========================================================
   TELAS BAIXAS, LARGAS, MÉDIAS E CELULAR — a mesma cena, recomposta
   ========================================================= */
/* notebook baixo (1366×768 com a barra do navegador): tudo mais junto para o botão ficar na primeira tela */
@media (min-width: 1000px) and (max-height: 820px) {
  .portal.bv { --bv-t: clamp(40px, min(8.6vw, 13.2vh), 136px); --bv-pad: clamp(18px, 3.6vh, 40px); }
  .bv-kicker { margin-bottom: 12px; }
  .bv-stage { margin-top: clamp(28px, 6vh, 56px); }
  .bv-console { padding: 18px 26px 22px; }
  .portal.bv .form { padding-top: 16px; }
  .bv-console label { margin-bottom: 12px; }
  .bv-console input { height: 44px; margin-top: 5px; }
  .portal.bv .gloss-btn { min-height: 52px; }
  .bv-invite { margin-top: 12px; }
}
/* tela larga: o letreiro cresce e a fumaça ocupa as laterais */
@media (min-width: 1680px) {
  .portal.bv { --bv-t: clamp(40px, min(8.4vw, 14.5vh), 152px); }
  .bv-fog-lit { -webkit-mask-image: radial-gradient(76% 50% at 50% var(--bv-ty), #000 0%, rgba(0, 0, 0, 0.7) 38%, transparent 82%); mask-image: radial-gradient(76% 50% at 50% var(--bv-ty), #000 0%, rgba(0, 0, 0, 0.7) 38%, transparent 82%); }
  .bv-vignette { background: radial-gradient(140% 110% at 50% 36%, transparent 52%, rgba(0, 0, 0, 0.4) 82%, rgba(0, 0, 0, 0.78) 100%); }
}
/* até 1180 px o selo ocupa o meio da linha: o tocador vira só o equalizador no canto */
@media (max-width: 1180px) {
  .em-in-slot { padding: 0; }
  .em-in-slot :is(.em-txt, .em-vol) { display: none; }
  .em-in-slot .em-btn { min-width: 44px; min-height: 44px; justify-content: center; padding: 0 12px; }
}
/* tablet / notebook estreito: uma coluna só — premissa, porta, história */
@media (max-width: 999px) {
  .bv-stage { width: min(100%, 600px); grid-template-columns: minmax(0, 1fr); grid-template-areas: "premise" "console" "story" "epi"; }
  .bv-premise { padding-top: 0; text-align: center; }
  .bv-tagline { max-width: 22ch; margin: 0 auto; }
  .bv-console { margin-top: clamp(24px, 4vh, 36px); }
  .bv-story { margin-top: clamp(44px, 7vh, 64px); }
}
/* celular em pé */
@media (max-width: 760px) {
  .portal.bv { --bv-t: clamp(30px, 11.2vw, 60px); --bv-pad: max(22px, calc(env(safe-area-inset-top) + 14px)); scrollbar-gutter: stable; }
  /* o equalizador da música ganha uma faixa própria no alto; o selo começa logo abaixo dela */
  .bv-in { padding: calc(var(--bv-pad) + 26px) max(16px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .bv-kicker { margin-bottom: 16px; font-size: 12px; letter-spacing: 0.3em; padding-left: 0.3em; }
  .bv-stage { margin-top: 28px; }
  .bv-chapter { font-size: 11px; margin-bottom: 10px; }
  .bv-tagline { font-size: clamp(21px, 5.8vw, 25px); max-width: 26ch; }
  .bv-console { padding: 18px 16px 22px; margin-left: -4px; margin-right: -4px; }
  .portal.bv .tabs { gap: 0; }
  .portal.bv .tab { flex: 1 1 0; min-height: 46px; padding: 10px 0 12px; }
  .portal.bv .tabs:has(#tab-register[hidden]) .tab { flex: 0 0 auto; }
  .portal.bv .portal-loading { min-height: 350px; }
  .bv-story p { font-size: 17px; line-height: 1.6; }
  .bv-story::before { inset: -30px -20px; }
  .bv-epi { font-size: 22px; }
  .bv-foot { padding-top: 36px; }
  /* música: canto de cima à direita, só o equalizador (o volume fica nas teclas do aparelho) */
  .bv-sound { top: calc(var(--bv-pad) - 20px); right: max(4px, env(safe-area-inset-right)); }
  .em-btn { min-height: 44px; min-width: 44px; justify-content: center; padding: 0 12px; }
  /* no celular a luz fica mais contida (menos camadas na memória de vídeo) */
  .bv-bank { display: none; }
  .bv-tex { animation-name: bv-drift-s; }
}
@media (max-width: 380px) {
  .bv-kicker { font-size: 11px; letter-spacing: 0.2em; padding-left: 0.2em; }
  .bv-console { padding-left: 14px; padding-right: 14px; }
  .portal.bv .gloss-btn { padding: 0 12px; font-size: 14px; letter-spacing: 0.08em; }
}
/* celular baixo (iPhone SE e parecidos): respiros menores para o botão principal subir */
@media (max-width: 760px) and (max-height: 700px) {
  .portal.bv { --bv-pad: max(14px, calc(env(safe-area-inset-top) + 8px)); }
  .bv-kicker { margin-bottom: 10px; }
  .bv-stage { margin-top: 16px; }
  .bv-chapter { margin-bottom: 6px; }
  .bv-tagline { font-size: 20px; }
  .bv-console { margin-top: 16px; padding-top: 12px; }
  .portal.bv .form { padding-top: 14px; }
  .bv-console label { margin-bottom: 10px; }
}
/* toque: alvos do tamanho do dedo */
@media (pointer: coarse) {
  .bv-console input { height: 52px; }
  .portal.bv .gloss-btn { min-height: 56px; }
  .em-ctl:not(.em-in-bar):not(.em-in-slot) { left: max(12px, calc(env(safe-area-inset-left) + 8px)); bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)); }
}
/* celular deitado: letreiro pela altura, porta ao lado da premissa */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .portal.bv { --bv-t: clamp(26px, 10svh, 44px); --bv-pad: max(14px, env(safe-area-inset-top)); }
  .bv-kicker { margin-bottom: 10px; }
  .bv-stage { width: min(100%, 860px); margin-top: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "premise console" "story console" "epi epi"; column-gap: 24px; }
  .bv-premise { text-align: left; }
  .bv-tagline { margin: 0; font-size: 22px; }
  .bv-console { margin-top: 0; }
  .bv-story { margin-top: 22px; }
  .bv-sound { top: calc(var(--bv-pad) - 12px); }
  .em-in-slot { padding: 0; }
  .em-in-slot :is(.em-txt, .em-vol) { display: none; }
}

/* =========================================================
   MOVIMENTO REDUZIDO — a mesma composição, parada e acesa
   (sem entrada, sem fumaça correndo, sem acidentes; a luz fica)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .portal.bv *, .portal.bv *::before, .portal.bv *::after, .em-ctl, .em-ctl * { animation: none !important; transition-duration: 0.01s !important; }
  .bv-light { transform: none; }
  .bv-flash, .bv-track { display: none; }
  .em-eq i { transform: scaleY(0.6); }
  .portal.bv.leaving { animation: bv-out-calm 0.15s linear forwards !important; }
  @keyframes bv-out-calm { to { opacity: 0; } }
}