/* =============================================================================
   LA APERTURA
   El vídeo de marca y el aviso de tres segundos que salen al entrar al juego.
   Ver client/js/ui/apertura.js.

   NEGRO DE VERDAD, no el `--night` del resto de la interfaz. Esto va a pantalla
   completa y antes de que haya nada más: cualquier gris se ve como una mancha
   contra el marco negro del monitor.
============================================================================= */

.abre {
  position: fixed;
  inset: 0;
  z-index: 400;               /* por encima de la cortinilla de carga */
  background: #000;
}

/* Una brasa violeta detrás del aviso. Muy floja a propósito: el negro plano
   dejaba la tarjeta pegada al fondo como una ventana de sistema, y basta un
   soplo de color para que se lea como una pantalla del juego. */
.abre-acto--aviso::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(93, 47, 184, .3), transparent 70%);
  pointer-events: none;
}

.abre-acto {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 520ms var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}
.abre-acto[data-on='true'] { opacity: 1; }
.abre-acto[data-on='false'] { opacity: 0; }

/* --- 1. El vídeo ---------------------------------------------------------- */

/* ENTERO Y SIN RECORTAR (`contain`). Es una pieza de marca con su composición
   pensada: recortarla para llenar la pantalla le corta el logotipo a quien tenga
   un monitor ancho. Las bandas negras aquí no son un defecto — el fondo ya es
   negro, así que no se ven. */
.abre-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* La pista de saltar: abajo a la derecha, discreta, y aparece a los dos
   segundos. Un cartel que sale desde el primer fotograma es una invitación a no
   ver el vídeo. */
.abre-saltar {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vh, 34px);
  margin: 0;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 99px;
  font: 500 12px/1 Rubik, system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  transition: opacity 600ms ease;
}
.abre-saltar[data-on='true'] { opacity: 1; }

/* --- 2. El aviso ---------------------------------------------------------- */

/* EL LOGOTIPO ARRIBA Y GRANDE. Es lo primero que se ve del juego después del
   vídeo: sin él, esto es un cuadro de diálogo flotando en negro. */
.abre-marca {
  width: min(300px, 58vw);
  height: auto;
  filter: drop-shadow(0 0 30px rgba(168, 244, 37, .26));
  animation: abre-sube 700ms var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both;
}

.abre-marco {
  position: relative;
  width: min(760px, 90vw);
  display: grid;
  justify-items: center;
  gap: clamp(16px, 2.6vh, 26px);
  text-align: center;
}

/* El epígrafe. Con la línea a los lados, que es lo que le da el aire de rótulo
   y no de frase suelta. */
.abre-antes {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  font: 700 13px/1 Rubik, system-ui, sans-serif;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-dim, #a79fc8);
  animation: abre-sube 620ms var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both;
}
.abre-antes::before,
.abre-antes::after {
  content: '';
  width: clamp(24px, 8vw, 70px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(157, 107, 255, .5), transparent);
}

/* UN SOLO BLOQUE DE TEXTO, no tres tarjetas. Los recuadros hacían que la vista
   contara cajas en vez de leer frases, y en unos segundos eso es todo lo que da
   tiempo a hacer: contarlas. */
.abre-avisos {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  display: grid;
  gap: clamp(14px, 2.2vh, 22px);
}

/* Cada aviso: el icono en su cuadro de color y la frase al lado. UNA LÍNEA
   seguida, no título arriba y letra pequeña debajo: partirlo en dos alturas
   convierte tres avisos en seis cosas que leer. */
.abre-aviso {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  text-align: left;
  animation: abre-sube 560ms var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both;
}

.abre-aviso-icono {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  color: var(--tono);
  background: color-mix(in srgb, var(--tono) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono) 32%, transparent);
}
.abre-aviso[data-tono='amber']  { --tono: var(--amber, #ffc447); }
.abre-aviso[data-tono='violet'] { --tono: var(--violet, #9d6bff); }
.abre-aviso[data-tono='lime']   { --tono: var(--lime, #a8f425); }

.abre-aviso-texto {
  margin: 0;
  font: 400 clamp(15px, 1.35vw, 19px)/1.45 Rubik, system-ui, sans-serif;
  color: var(--ink-dim, #a79fc8);
}
/* LAS DOS PRIMERAS PALABRAS EN BLANCO Y EN NEGRITA. Es lo que se barre de un
   vistazo; lo demás es para quien tenga los ocho segundos. */
.abre-aviso-t { font-weight: 600; color: var(--ink, #f4f2ff); }
.abre-aviso-p { color: var(--ink-dim, #a79fc8); }
.abre-aviso-sep { color: var(--ink-faint, #6e678c); }

/* El gracias. Va separado por una línea porque no es un aviso más: es lo único
   de esta pantalla que no está avisando de nada. */
.abre-gracias {
  display: grid;
  gap: 6px;
  padding-top: clamp(10px, 2vh, 18px);
  border-top: 1px solid rgba(255, 255, 255, .08);
  width: 100%;
  animation: abre-sube 620ms 460ms var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both;
}
.abre-gracias-t {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 500 clamp(19px, 1.8vw, 25px)/1.3 Rubik, system-ui, sans-serif;
  color: var(--lime, #a8f425);
}
.abre-gracias-p {
  margin: 0;
  font: 400 clamp(13px, 1.15vw, 16px)/1.5 Rubik, system-ui, sans-serif;
  color: var(--ink-dim, #a79fc8);
}

/* La barra que se vacía mientras dura el aviso. */
.abre-reloj {
  width: min(220px, 50%);
  height: 2px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
}
.abre-reloj > i {
  display: block;
  height: 100%;
  background: var(--violet, #9d6bff);
  transform-origin: left center;
  animation: abre-reloj-anim var(--dura, 3000ms) linear both;
}
@keyframes abre-reloj-anim { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.abre-sigue {
  margin: 0;
  font: 500 11px/1 Rubik, system-ui, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint, #6e678c);
  animation: abre-late 1.8s 800ms ease-in-out infinite both;
}

@keyframes abre-sube {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes abre-late { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

/* Pantallas bajas: el aviso tiene que caber sin scroll, así que se aprieta. Se
   encoge la letra, NO se esconde la mitad del texto: un aviso al que le falta la
   frase que explica de qué avisa ya no está avisando de nada. */
@media (max-height: 620px) {
  .abre-marco { gap: 12px; }
  .abre-aviso { gap: 12px; grid-template-columns: 34px minmax(0, 1fr); }
  .abre-aviso-icono { width: 34px; height: 34px; }
  .abre-aviso-icono svg { width: 19px; height: 19px; }
  .abre-avisos { gap: 11px; }
  .abre-aviso-texto { font-size: 14px; line-height: 1.4; }
  .abre-gracias-t { font-size: 17px; }
  .abre-gracias-p { font-size: 12.5px; }
  .abre-marca { width: min(190px, 38vw); }
}

@media (prefers-reduced-motion: reduce) {
  .abre-antes, .abre-aviso, .abre-gracias { animation: none; }
  .abre-sigue { animation: none; opacity: .6; }
  /* El reloj SÍ se queda: no es decoración, es la única señal de cuánto falta. */
}