/* Apertura (DESIGN.md §Apertura V2 · DECISIONS D20, D22). Capa sobre la carta, que ya está cargada debajo. */
.intro {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: var(--lp-black, #11100F); overflow: hidden; touch-action: none;
  /* Respaldo sin JavaScript: aunque nada cargue, la capa desaparece sola y nunca bloquea la carta. */
  animation: intro-respaldo .3s linear 3.4s forwards;
}
@keyframes intro-respaldo { to { opacity: 0; visibility: hidden; } }
/* Omitir o terminar: fundido breve (la carta ya está visible debajo). */
/* Sigue recibiendo toques hasta quitarse (220 ms): el click que sigue al toque que omite no llega a la carta. */
.intro--saliendo { opacity: 0; transition: opacity .2s ease-out; }
@media (prefers-reduced-motion: reduce) { .intro--saliendo { transition-duration: .15s; } }

/* Escenario de 390 × 845 escalado para cubrir la pantalla: placa de video (luz y atmósfera) + logo vectorial vivo
   encima, con la misma geometría (geometria.js). */
.intro--v2 { background: #050403; }
.v2-escena { position: absolute; left: 50%; top: 50%; width: 390px; height: 845px; transform-origin: 0 0; }
/* Pantallas anchas: el escenario no cubre el ancho; sus costados se funden con el negro del fondo. */
.v2-escena--costados { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.v2-placa, .v2-fondo { position: absolute; inset: 0; width: 100%; height: 100%; }
.v2-placa { object-fit: cover; transition: opacity .2s linear; }
.v2-placa.oculta { opacity: 0; }
/* Fondo del modo vivo (sin video): viñeta cálida localizada, solo degradés. */
.v2-fondo {
  opacity: 0; transition: opacity .3s linear;
  background:
    radial-gradient(42% 26% at 50% 49%, rgba(110, 58, 18, .45), rgba(60, 30, 9, .18) 55%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(120% 75% at 50% 48%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .8) 100%), #050403;
}
.intro--vivo .v2-fondo { opacity: 1; }
.v2-inicio, .v2-logo, .v2-emblema, .v2-pieza { position: absolute; }
.v2-logo svg, .v2-emblema svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Mientras se arma la receta, ninguna pieza se ve (evita un cuadro con el logo completo). */
.intro--preparando .v2-logo { visibility: hidden; }
/* Logo quieto (movimiento reducido o respaldo, sin receta): composición final en dorado, sin las capas de luz. */
.intro--quieta [data-intro$="-luz"] { opacity: 0; }