/* Cinema da história do LRV · O Outro Lado (03/11/2026). Quem anima é src/historia-abertura.js. */
.hc-palco { position: absolute; inset: 0; overflow: hidden; background: #000; color: #f4efe6; font-family: inherit; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; opacity: 1; transition: opacity .6s ease; --hc-carga: 0; }
.hc-palco.hc-sai { opacity: 0; pointer-events: none; }
/* 03/11 (abertura leve): o filtro de brilho na tela inteira só existe enquanto o jogador segura; antes ficava ligado sempre */
.hc-camadas { position: absolute; inset: 0; transform: scale(calc(1 + var(--hc-carga) * .07)); transition: transform .25s ease-out; }
.hc-palco.hc-carregando .hc-camadas { filter: brightness(calc(1 + var(--hc-carga) * .35)); }
.hc-plano { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.hc-plano img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; pointer-events: none; -webkit-user-drag: none; }
/* luz: vinheta e pé escuro para o texto ler bem em qualquer cena */
.hc-camadas::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(ellipse 120% 95% at 50% 45%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .62) 100%),
  linear-gradient(0deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .25) 34%, rgba(0, 0, 0, 0) 52%); }
.hc-palco[data-clima="outro"] .hc-camadas::after { background:
  radial-gradient(ellipse 120% 95% at 50% 45%, rgba(40, 0, 0, 0) 50%, rgba(30, 0, 0, .7) 100%),
  linear-gradient(0deg, rgba(10, 0, 0, .8) 0%, rgba(20, 0, 0, .28) 34%, rgba(0, 0, 0, 0) 52%); }

/* faixas de cinema */
.hc-faixas i { position: absolute; left: 0; right: 0; height: 7.5vh; background: #000; z-index: 2; animation: hc-faixa 1.4s cubic-bezier(.22, .61, .36, 1) both; }
.hc-faixas i:first-child { top: 0; transform-origin: top; }
.hc-faixas i:last-child { bottom: 0; transform-origin: bottom; }
@keyframes hc-faixa { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* corte de espada: um risco branco que atravessa a tela */
.hc-fio { position: absolute; left: -15%; right: -15%; top: 50%; height: 3px; z-index: 4; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 45%, #fff 55%, rgba(255, 255, 255, 0));
  box-shadow: 0 0 18px 4px rgba(255, 230, 220, .85), 0 0 60px 10px rgba(255, 90, 60, .45); }

/* clarão de quem atravessa */
.hc-palco::before { content: ""; position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; pointer-events: none; }
.hc-palco.hc-flash::before { animation: hc-flash .9s ease-out both; }
@keyframes hc-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

/* kanji em pé, à direita, em vermelho de tinta */
.hc-kanji { position: absolute; right: 6.5vw; top: 13vh; z-index: 3; font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS Mincho", "Noto Serif JP", serif; font-weight: 700;
  font-size: min(24vh, 19vw); line-height: 1; color: #e2392c; opacity: 0; pointer-events: none; writing-mode: vertical-rl;
  text-shadow: 0 0 2px #2a0603, 0 6px 30px rgba(0, 0, 0, .55), 0 0 80px rgba(226, 57, 44, .35); }
.hc-kanji.off, .hc-texto.off { visibility: hidden; }
/* No filme as letras já vêm na imagem: a sombra de baixo fica só atrás da barra, para não apagar a tradução. */
.ab-filme::after { height: 11%; }
/* Até o filme andar a caixa fica transparente: aparece a tela de carga GTS, e não uma capa com o título antigo do filme. */
.ab-video.ab-filme { background: transparent; transition: opacity .6s ease, background-color .3s ease; }
.ab-video.ab-filme.ab-tocando, .ab-video.ab-filme.ab-video-rever { background: #000; }
.ab-filme video { transition: opacity .3s ease; }
.ab-filme:not(.ab-tocando) video { opacity: 0; }
.ab-filme:not(.ab-tocando)::after, .ab-filme:not(.ab-tocando) .ab-video-carga, .ab-filme:not(.ab-tocando) .ab-video-som { display: none; }
/* O navegador recusou som sem um toque: este aviso pede o primeiro toque, no lado de baixo, com o japonês grande e o português embaixo. */
.ab-filme-toque { display: none; position: absolute; z-index: 1; left: var(--lados-margem); top: calc(50% + 12.5vh); max-width: 44vw; grid-template-columns: auto auto; justify-content: start; align-items: baseline; column-gap: .7em; pointer-events: none; text-shadow: 0 1px 8px #000; will-change: opacity; animation: ab-toque-pisca 1.9s ease-in-out infinite; }
.ab-filme-toque [lang="ja"] { font: 600 clamp(20px, 4.2vh, 38px)/1.05 var(--lados-mincho); letter-spacing: .06em; color: var(--lados-papel); }
.ab-filme-toque [lang="zh"] { font: 400 clamp(14px, 2.6vh, 23px)/1.05 var(--lados-kai); letter-spacing: .04em; color: var(--lados-cinza); }
.ab-filme-toque small { grid-column: 1 / -1; margin-top: .5em; font: 700 clamp(14px, 2.4vh, 20px)/1.2 var(--lrv-titulo); color: var(--lados-tinta); }
.ab-filme-toque em { font-weight: 500; color: var(--lados-cinza); }
.ab-filme.ab-espera .ab-filme-toque { display: grid; }
.ab-filme.ab-espera .ab-video-som { display: none; }
@keyframes ab-toque-pisca { 0%, 100% { opacity: 1; } 50% { opacity: .42; } }
@media (prefers-reduced-motion: reduce) { .ab-filme-toque { animation: none; } }
.brand-ori { margin-top: 3px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; line-height: 1.25; color: rgba(255, 225, 190, .82); text-shadow: 0 1px 6px #000; }
.hc-kanji-tr { display: block; margin-top: .4em; font-family: inherit; font-size: clamp(13px, 2.2vh, 22px); font-weight: 700; line-height: 1.1; letter-spacing: .06em; text-align: center; color: #f4efe6; text-shadow: 0 2px 10px #000; }
.hc-titulo-oriente { position: relative; margin-top: .9vh; font-size: min(2.1vh, 3.2vw); font-weight: 700; letter-spacing: .12em; color: rgba(255, 225, 190, .85); text-shadow: 0 2px 12px #000; }

/* narração, embaixo à esquerda */
.hc-texto { position: absolute; left: 7vw; bottom: 15vh; z-index: 3; max-width: min(64vw, 980px); pointer-events: none; }
.hc-frase { margin: 0; font-size: clamp(26px, 4.4vw, 68px); font-weight: 800; line-height: 1.04; letter-spacing: -.01em; color: #fbf7ef; text-shadow: 0 3px 22px rgba(0, 0, 0, .7); opacity: 0; }
.hc-sub { margin: .45em 0 0; font-size: clamp(17px, 2.3vw, 34px); font-weight: 500; line-height: 1.2; color: rgba(244, 239, 230, .9); text-shadow: 0 2px 16px rgba(0, 0, 0, .8); opacity: 0; }
.hc-nomes { display: flex; flex-wrap: wrap; gap: .2em .9em; font-size: clamp(30px, 5.4vw, 84px); font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
.hc-nome { opacity: 0; text-shadow: 0 0 26px currentColor, 0 4px 20px rgba(0, 0, 0, .8); }

/* segurar para atravessar */
.hc-acao { position: absolute; left: 50%; bottom: 33vh; z-index: 5; display: grid; justify-items: center; gap: 14px; transform: translateX(-50%) scale(.9); opacity: 0; transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.hc-acao.on { opacity: 1; transform: translateX(-50%) scale(1); pointer-events: auto; cursor: pointer; }
.hc-acao svg { width: 108px; height: 108px; transform: rotate(-90deg); overflow: visible; }
.hc-acao-trilho { fill: rgba(0, 0, 0, .35); stroke: rgba(255, 255, 255, .3); stroke-width: 5; }
.hc-acao-carga { fill: none; stroke: #ff4a2e; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 276.5; stroke-dashoffset: 276.5; filter: drop-shadow(0 0 10px rgba(255, 74, 46, .9)); }
.hc-acao.on:not(.segurando) svg { animation: hc-pulso 1.2s ease-in-out infinite; }
.hc-acao.segurando svg { filter: drop-shadow(0 0 22px rgba(255, 90, 60, .9)); }
@keyframes hc-pulso { 50% { transform: rotate(-90deg) scale(1.08); } }
.hc-acao-texto { font-size: clamp(15px, 1.6vw, 22px); font-weight: 700; letter-spacing: .02em; text-shadow: 0 2px 12px #000; white-space: nowrap; }
.hc-acao-texto kbd, .hc-titulo kbd { display: inline-block; padding: .05em .5em; margin: 0 .15em; border: 1px solid rgba(255, 255, 255, .55); border-bottom-width: 3px; border-radius: 6px; font: inherit; font-size: .85em; background: rgba(0, 0, 0, .45); }

/* título */
.hc-titulo { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; text-align: center; pointer-events: none; opacity: 0; transform: scale(1.06); transition: opacity 1.6s ease .3s, transform 2.4s cubic-bezier(.22, .61, .36, 1) .3s; }
.hc-titulo.on { opacity: 1; transform: none; }
.hc-titulo-kanji { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS Mincho", serif; font-weight: 700; font-size: min(70vh, 60vw); line-height: 1; color: rgba(226, 57, 44, .2); text-shadow: 0 0 120px rgba(226, 57, 44, .35); }
.hc-titulo-marca { position: relative; font-size: min(22vh, 24vw); font-weight: 900; line-height: .86; letter-spacing: .04em; color: #fbf7ef; text-shadow: 0 0 40px rgba(255, 255, 255, .25), 0 10px 50px rgba(0, 0, 0, .8); }
.hc-titulo-sub { position: relative; margin-top: 2.2vh; font-size: min(4.6vh, 5vw); font-weight: 800; letter-spacing: .55em; padding-left: .55em; color: #ff5a44; text-shadow: 0 0 24px rgba(255, 70, 50, .6), 0 4px 18px #000; }
.hc-titulo-cidade { position: relative; margin-top: 1.6vh; font-size: min(2.2vh, 3.4vw); font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: rgba(244, 239, 230, .78); text-shadow: 0 2px 12px #000; }

/* dentro do vídeo de abertura do abertura.js: a barra dele fica por cima das faixas, e o cinema por cima dos avisos do HUD */
#loading.ab-com-video { z-index: 8000; }
.ab-video.ab-cinema { background: #000; }
.ab-video.ab-cinema .ab-video-barra { z-index: 8; }
.ab-video.ab-cinema::after { z-index: 7; }

/* menu: os três lados do jogo têm a sua cor */
#menu .mi-acoes .mi-historia .mi-rotulo { color: #ffd9a8; }
#menu .mi-acoes .mi-arena .mi-rotulo { color: #ff7a66; }
#menu .mi-acoes .mi-desmanche .mi-rotulo { color: #ffb36b; }
#menu .mi-acoes .mi-historia small, #menu .mi-acoes .mi-arena small, #menu .mi-acoes .mi-desmanche small { opacity: .85; }

/* passagem para a Arena ou para o ferro-velho: tinta preta, kanji vermelho */
.hm-veu { position: fixed; inset: 0; z-index: 9500; display: grid; place-content: center; justify-items: center; gap: 2vh; background: #050304;
  clip-path: circle(0% at 50% 50%); transition: clip-path .85s cubic-bezier(.7, 0, .2, 1); pointer-events: all; }
.hm-veu.on { clip-path: circle(80% at 50% 50%); }
.hm-veu b { font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS Mincho", serif; font-size: min(36vh, 40vw); line-height: 1; color: #e2392c; text-shadow: 0 0 60px rgba(226, 57, 44, .5);
  opacity: 0; transform: scale(1.4); transition: opacity .5s ease .35s, transform .7s cubic-bezier(.22, .61, .36, 1) .35s; }
.hm-veu span { font-weight: 800; letter-spacing: .4em; padding-left: .4em; text-transform: uppercase; color: #f4efe6; opacity: 0; transition: opacity .5s ease .5s; }
.hm-veu.on b { opacity: 1; transform: none; }
.hm-veu.on span { opacity: .9; }
.hm-veu small { font-weight: 700; letter-spacing: .12em; color: rgba(244, 239, 230, .75); opacity: 0; transition: opacity .5s ease .6s; }
.hm-veu.on small { opacity: 1; }

@media (max-width: 720px) {
  .hc-kanji { right: 4vw; top: 10vh; font-size: 17vh; }
  .hc-texto { left: 6vw; right: 6vw; bottom: 17vh; max-width: none; }
  .hc-acao { bottom: 38vh; }
}