/* LEXPORTUM — CSS DA ABERTURA.

   Folha própria, e só dela: todo seletor vive sob `.lex-opening`, então
   nada aqui alcança o jogo. Vestir o contrato que `src/ui/opening.js` monta:

     body.lex-opening-active            enquanto a abertura está na frente
     section.lex-opening                recebe [hidden] ao terminar
       video.lex-opening-video          o vídeo final, inteiro
       .lex-opening-actions > .lex-opening-skip
       .lex-opening-progress > span     largura via style inline

   DECISÃO CENTRAL — `object-fit: contain`.
   O vídeo é 1264x720 (~1,756:1) e é obra aprovada. `cover` encheria a tela
   cortando as bordas do quadro, ou seja, ALTERANDO o enquadramento. `contain`
   mostra cada pixel como foi entregue e deixa o fundo preto ocupar a sobra.
   Nada aqui recorta, espelha, filtra ou recolore a imagem. */

/* ============================================================ o palco */
body.lex-opening-active{overflow:hidden}

.lex-opening{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  background:#000;
  color:#e8d4b0;
  font-family:Georgia,"Times New Roman",serif;
  -webkit-font-smoothing:antialiased;
  animation:lexop-abre .45s ease-out both}
@keyframes lexop-abre{from{opacity:0}to{opacity:1}}

/* O atributo hidden precisa vencer o display:flex acima. Sem esta linha a
   abertura reaparece empilhada embaixo do jogo depois de terminada. */
.lex-opening[hidden]{display:none !important}

/* ============================================================ o vídeo */
.lex-opening-video{
  width:100%;height:100%;
  /* Ver a nota do cabeçalho: o enquadramento entregue é preservado. */
  object-fit:contain;
  background:#000;
  display:block}

/* ========================================================= os botões */
.lex-opening button{
  font-family:inherit;cursor:pointer;
  transition:border-color .18s,color .18s,background .18s}
.lex-opening button:focus-visible{outline:2px solid #f0cf8a;outline-offset:3px}

/* Pular: discreto, no alto à direita, disponível durante toda a abertura. */
.lex-opening-actions{position:static}
.lex-opening-skip{
  position:fixed;top:clamp(14px,2.4vh,28px);right:clamp(14px,2.4vw,30px);
  z-index:2;
  padding:8px 16px;border-radius:999px;
  border:1px solid rgba(232,212,176,.26);
  background:rgba(10,9,7,.5);
  color:#c9b590;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:12.5px;letter-spacing:.04em;
  backdrop-filter:blur(3px);
  opacity:.7}
.lex-opening-skip:hover,
.lex-opening-skip:focus-visible{
  opacity:1;border-color:rgba(240,207,138,.7);color:#f0dcb4;background:rgba(28,22,12,.72)}

/* ========================================================== a barra */
.lex-opening-progress{
  position:fixed;left:0;right:0;bottom:0;height:2px;z-index:2;
  background:rgba(232,212,176,.10)}
.lex-opening-progress span{
  display:block;width:0;height:100%;
  background:linear-gradient(90deg,#8a6f3c,#e3bd72);
  box-shadow:0 0 12px rgba(227,189,114,.55)}

/* ======================================================= responsivo */
@media(max-width:760px){
  .lex-opening-skip{top:10px;right:10px;padding:7px 13px;font-size:12px}
}

/* Menos movimento não significa vídeo sem imagem: a obra continua inteira,
   só o fade de entrada da camada some. */
@media(prefers-reduced-motion:reduce){
  .lex-opening{animation:none}
  .lex-opening button{transition:none}
}