/* Abertura e carregamento do LRV (29/10/2026). Arte em tela cheia (quadros do jogo), logo forte, dica, etapas e
   progresso real, e a passagem para o menu. Carregado depois do style.css e antes do menu-imersivo.css, que usa as
   cores e a fonte de títulos definidas aqui. Quem liga as classes é src/abertura.js. */
:root {
  /* títulos condensados (Bahnschrift no Windows; nos outros sistemas, a condensada que existir) */
  --lrv-titulo: "Bahnschrift", "DIN Condensed", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", sans-serif-condensed, "Segoe UI", sans-serif;
  --lrv-noite: #04060a;
  --lrv-ambar: #f2b234;
  --lrv-ambar-claro: #ffd98b;
  --lrv-laranja: #e8692c;
  --lrv-gelo: #5fd3ff;
  --lrv-verde: #7bd67d;
  --lrv-papel: #f4efe6;
  --lrv-tinta: #090b10;
  --lrv-apagado: #a7b1be;
  --lrv-painel: rgba(5, 8, 13, .84);
}

/* ---- Moldura ---- */
#loading { background: var(--lrv-noite); gap: 0; padding: 0; overflow: hidden; isolation: isolate; }
#loading::before { content: none; }
#loading.active, #loading.ab-saindo { display: block; }

/* ---- Arte em tela cheia ---- */
.ab-arte { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: radial-gradient(120% 90% at 60% 40%, #172238 0%, #070a12 60%, #020306 100%); }
.ab-quadro { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s ease; }
.ab-quadro.on { opacity: 1; }
.ab-quadro img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform-origin: 62% 46%; animation: ab-aproximar 9s cubic-bezier(.2, .6, .3, 1) both; }
@keyframes ab-aproximar { from { transform: scale(1.14) translate3d(1.4%, .8%, 0); } to { transform: scale(1.02) translate3d(0, 0, 0); } }
/* véu: o texto sempre legível por cima de qualquer quadro (escuro embaixo e à esquerda, vinheta nas bordas) */
.ab-veu { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(3, 4, 7, .97) 0%, rgba(3, 4, 7, .78) 24%, rgba(3, 4, 7, .12) 52%, rgba(3, 4, 7, 0) 70%),
    linear-gradient(90deg, rgba(3, 4, 7, .7) 0%, rgba(3, 4, 7, .1) 42%, rgba(3, 4, 7, 0) 60%),
    linear-gradient(180deg, rgba(3, 4, 7, .55) 0%, rgba(3, 4, 7, 0) 22%),
    radial-gradient(140% 100% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
/* faixas de cinema e granulação leve */
.ab-veu::before, .ab-veu::after { content: ""; position: absolute; left: 0; right: 0; height: clamp(0px, 4.2vh, 40px); background: #000; transition: transform .9s cubic-bezier(.6, 0, .3, 1); }
.ab-veu::before { top: 0; transform-origin: top; }
.ab-veu::after { bottom: 0; transform-origin: bottom; }
#loading::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px); }

/* ---- Nome do lugar do quadro (canto de cima, como o nome da região num jogo de mundo aberto) ---- */
.ab-lugar { position: absolute; z-index: 1; top: calc(clamp(0px, 4.2vh, 40px) + clamp(14px, 3vh, 30px)); right: clamp(18px, 4vw, 60px); max-width: min(560px, 60vw);
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; pointer-events: none; text-shadow: 0 2px 12px #000, 0 0 2px #000; }
.ab-lugar-quando { font: 600 12px/1.2 var(--lrv-titulo); letter-spacing: .24em; text-transform: uppercase; color: var(--lrv-gelo); }
.ab-lugar-nome { font: italic 700 condensed clamp(28px, 3.5vw, 50px)/1 var(--lrv-titulo); text-transform: uppercase; letter-spacing: .01em; color: #fff; }
.ab-lugar small { font: 500 10px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.ab-lugar.ab-entra { animation: ab-lugar-entra .8s ease-out both; }
@keyframes ab-lugar-entra { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* ---- Logo, dica e progresso (embaixo) ---- */
.ab-conteudo { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(14px, 3vh, 30px);
  padding: 0 clamp(18px, 4vw, 60px) calc(clamp(0px, 4.2vh, 40px) + clamp(16px, 3.6vh, 38px)); }
#loading .brand { text-align: left; }
/* LRV: preenchimento de pôr do sol, contorno escuro e sombra longa */
.brand-mark { font-family: var(--font); }
#loading .brand-mark { font-size: clamp(76px, 11.5vw, 168px); font-weight: 900; line-height: .8; letter-spacing: -.045em; padding: 0 .06em .04em 0;
  background: linear-gradient(180deg, #fff3c4 0%, #ffd45c 26%, #f4a52d 56%, #e2582a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(2px 0 0 #120802) drop-shadow(-2px 0 0 #120802) drop-shadow(0 2px 0 #120802) drop-shadow(0 -1px 0 #120802) drop-shadow(5px 6px 0 rgba(0, 0, 0, .55)) drop-shadow(0 16px 30px rgba(0, 0, 0, .6)); }
/* a sombra da logo (filter) pinta por cima de irmãos sem posição: subtítulo e cidade ficam por cima dela */
#loading :is(.brand-sub, .brand-city), #menu :is(.brand-sub, .brand-city) { position: relative; }
#loading .brand-sub { margin-top: clamp(8px, 1.4vh, 14px); padding: 0; font: 700 clamp(15px, 1.7vw, 22px)/1 var(--lrv-titulo); letter-spacing: .42em; color: var(--lrv-papel); text-shadow: 0 2px 10px #000; }
#loading .brand-city { margin-top: 8px; font: 600 clamp(10px, 1vw, 12px)/1.2 var(--lrv-titulo); letter-spacing: .28em; color: rgba(244, 239, 230, .7); text-shadow: 0 1px 6px #000; }

.ab-rodape { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 520px); gap: 16px clamp(20px, 4vw, 64px); align-items: end; }
.ab-dica { max-width: 640px; padding: 12px 16px 13px; background: rgba(4, 6, 10, .78); box-shadow: inset 4px 0 0 var(--lrv-ambar); }
.ab-dica-rotulo { display: block; font: 700 12px/1 var(--lrv-titulo); letter-spacing: .24em; text-transform: uppercase; color: var(--lrv-ambar); }
#loading .tip { margin: 7px 0 0; padding: 0; max-width: none; min-height: 2.9em; text-align: left; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.45; color: #eef1f5; }
#loading .tip.ab-entra { animation: ab-dica-entra .45s ease-out both; }
@keyframes ab-dica-entra { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
#loading kbd, #menu kbd, .screen kbd { display: inline-block; min-width: 1.7em; margin: 0 1px; padding: 1px 6px 0; border: 0; border-radius: 3px; text-align: center; vertical-align: 1px;
  font: 700 .82em/1.45 var(--lrv-titulo); letter-spacing: .02em; color: var(--lrv-tinta); background: var(--lrv-papel); box-shadow: 0 2px 0 #8c8579; }

#loading .load-box { width: auto; margin: 0; }
.ab-etapas { display: flex; flex-wrap: wrap; gap: 5px 14px; margin: 0 0 11px; padding: 0; list-style: none; font: 600 11px/1.2 var(--lrv-titulo); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
.ab-etapas li { display: flex; align-items: center; gap: 7px; transition: color .3s; }
.ab-etapas li::before { content: ""; width: 7px; height: 7px; flex: none; border: 1px solid currentColor; transform: rotate(45deg); transition: background .3s, border-color .3s; }
.ab-etapas li.agora { color: #fff; }
.ab-etapas li.agora::before { background: var(--lrv-ambar); border-color: var(--lrv-ambar); box-shadow: 0 0 10px var(--lrv-ambar); animation: ab-piscar 1.1s ease-in-out infinite; }
.ab-etapas li.feita { color: var(--lrv-ambar-claro); }
.ab-etapas li.feita::before { background: currentColor; }
@keyframes ab-piscar { 50% { opacity: .35; } }
#loading .load-bar { height: 4px; border-radius: 0; background: rgba(255, 255, 255, .16); overflow: hidden; }
/* a largura que o main.js escreve vira escala: anda suave e nunca para trás (abertura.js põe --ab-p) */
#loading #load-fill { width: 100% !important; transform: scaleX(var(--ab-p, 0)); transform-origin: left center; transition: transform .5s ease-out;
  background: linear-gradient(90deg, var(--lrv-gelo), var(--lrv-ambar) 55%, var(--lrv-laranja)); box-shadow: 0 0 14px rgba(242, 178, 52, .55); }
.ab-status { display: flex; align-items: center; gap: 10px; margin-top: 10px; min-width: 0; }
#loading #load-text { flex: 1; min-width: 0; margin: 0; text-align: left;
  font: 600 13px/1.25 var(--lrv-titulo); letter-spacing: .14em; text-transform: uppercase; color: #dfe5ec; }
.ab-pct { flex: none; font: 700 clamp(24px, 2.4vw, 32px)/1 var(--lrv-titulo); letter-spacing: 0; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px #000; }
.ab-giro { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .2); border-top-color: var(--lrv-ambar); animation: ab-girar .85s linear infinite; }
@keyframes ab-girar { to { transform: rotate(360deg); } }
#loading.ab-pronto .ab-giro { animation: none; border-color: var(--lrv-ambar); }

/* ---- Erro ---- */
#loading #load-error { position: absolute; z-index: 6; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); margin: 0; padding: 16px 20px;
  font-size: 15px; line-height: 1.5; text-align: left; color: #ffe1dc; background: rgba(60, 8, 4, .92); border-radius: 0; box-shadow: inset 4px 0 0 #ff6b57, 0 20px 60px rgba(0, 0, 0, .6); }
#loading.ab-erro .ab-giro { animation: none; border-color: #ff6b57; }

/* ---- Vídeo de abertura (só neste computador: assets/local/abertura; quem decide se toca é o abertura.js) ---- */
/* com o jogo pronto e o vídeo no meio, a tela segue por cima do menu até o vídeo acabar ou ser pulado */
#loading.ab-segura { display: block; }
.ab-video { position: absolute; inset: 0; z-index: 5; background: #000; cursor: pointer; opacity: 1; transition: opacity .6s ease; }
.ab-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.ab-video.ab-video-sai { opacity: 0; pointer-events: none; }
.ab-video.ab-video-rever { position: fixed; z-index: 9000; }   /* rever pelo menu: por cima de tudo, sem mexer no jogo */
body.ab-revendo #menu { display: none !important; }   /* sem botão visível, o controle de videogame não clica em nada por baixo */
.ab-video::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; pointer-events: none; background: linear-gradient(0deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)); }
.ab-video-barra { position: absolute; z-index: 1; left: clamp(16px, 4vw, 56px); right: clamp(16px, 4vw, 56px); bottom: clamp(16px, 5vh, 44px);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 18px; cursor: default; }
.ab-video-carga { position: relative; min-width: 220px; padding-bottom: 10px; font: 600 condensed 14px/1.2 var(--lrv-titulo); letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px #000; }
.ab-video-carga::before, .ab-video-carga::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.ab-video-carga::before { background: rgba(255, 255, 255, .22); }
.ab-video-carga::after { background: linear-gradient(90deg, var(--lrv-gelo), var(--lrv-ambar) 55%, var(--lrv-laranja)); transform: scaleX(var(--ab-p, 0)); transform-origin: left center; transition: transform .5s ease-out; }
.ab-video-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-video-botoes button { min-height: 42px; margin: 0; padding: 9px 16px; border: 0; border-radius: 0; cursor: pointer; font: 700 condensed 16px/1 var(--lrv-titulo); letter-spacing: .08em;
  text-transform: uppercase; color: var(--lrv-papel); background: rgba(4, 6, 10, .74); box-shadow: inset 3px 0 0 var(--lrv-ambar); }
.ab-video-botoes button:hover, .ab-video-botoes button:focus-visible { color: var(--lrv-tinta); background: var(--lrv-papel); outline: none; }
.ab-video-botoes kbd { margin-left: 8px; }
.ab-video-som.ab-pulsa { animation: ab-pulsa-som 1.6s ease-in-out infinite; }
@keyframes ab-pulsa-som { 50% { box-shadow: inset 3px 0 0 var(--lrv-ambar), 0 0 0 4px rgba(242, 178, 52, .35); } }
/* tela em pé (celular): o vídeo inteiro, com faixas pretas, em vez de cortar as laterais */
@media (max-aspect-ratio: 1/1) { .ab-video video { object-fit: contain; } }
@media (pointer: coarse) { .ab-video-botoes kbd { display: none; } }
@media (max-width: 520px) { .ab-video-barra { flex-direction: column; align-items: stretch; } .ab-video-botoes button { flex: 1; } }

/* ---- Saída: a tela some devagar e o menu entra (menu-imersivo.css anima os blocos com body.lrv-entrada) ---- */
#loading.ab-saindo { pointer-events: none; animation: ab-sair 1.1s cubic-bezier(.6, 0, .35, 1) both; }
#loading.ab-saindo .ab-conteudo, #loading.ab-saindo .ab-lugar { animation: ab-afundar .35s ease-in both; }
#loading.ab-saindo .ab-veu::before, #loading.ab-saindo .ab-veu::after { transform: scaleY(0); }
#loading.ab-saindo .ab-quadro.on img { animation: none; transform: scale(1.08); transition: transform 1.1s ease-in; }
/* primeiro somem a logo e a barra (0,35 s); depois a arte se abre para a cidade ao vivo, já sem texto por cima */
@keyframes ab-sair { 0%, 35% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ab-afundar { to { opacity: 0; transform: translateY(16px); } }

/* ---- Telas menores ---- */
@media (max-width: 760px) {
  .ab-rodape { grid-template-columns: 1fr; gap: 12px; }
  .ab-dica { max-width: none; }
  .ab-lugar { left: 16px; right: 16px; align-items: flex-start; text-align: left; max-width: none; }
  .ab-etapas { gap: 4px 10px; font-size: 10px; }
}
@media (max-height: 520px) {
  #loading .brand-mark { font-size: clamp(54px, 15vh, 96px); }
  .ab-etapas, .ab-lugar small, #loading .brand-city { display: none; }
  .ab-conteudo { gap: 10px; }
  .ab-rodape { grid-template-columns: minmax(0, 1fr) minmax(240px, 42%); }
  #loading .tip { min-height: 0; }
}
@media (max-height: 520px) and (max-width: 760px) {
  .ab-rodape { grid-template-columns: 1fr; }
  .ab-dica { display: none; }
}
.reduced-motion .ab-quadro img, .reduced-motion .ab-lugar.ab-entra, .reduced-motion .tip.ab-entra, .reduced-motion .ab-etapas li.agora::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .ab-quadro img, .ab-lugar.ab-entra, #loading .tip.ab-entra, .ab-etapas li.agora::before, .ab-giro { animation: none !important; }
  #loading.ab-saindo, #loading.ab-saindo .ab-conteudo, #loading.ab-saindo .ab-lugar { animation-duration: .3s !important; }
}