/* Apertura (DESIGN.md §Apertura · DECISIONS D20). 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; } }
/* Mientras se arma la receta, ninguna pieza se ve (evita un cuadro con el logo completo). */
.intro--preparando .intro__logo, .intro--preparando .intro__luz { 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; } }

/* Luz cálida ambiental DETRÁS del logo: degradé propio, nunca sobre el dibujo (PATTERNS §6) */
.intro__luz {
  position: absolute; left: 50%; top: 50%; width: min(150vw, 680px); aspect-ratio: 1.6;
  transform: translate(-50%, -50%); opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(207, 165, 80, .17), rgba(207, 165, 80, .06) 55%, rgba(207, 165, 80, 0) 100%);
}
.intro__logo { position: relative; width: min(78vw, 340px); }
.intro__capa { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro__pieza { position: absolute; }
.intro__pieza svg { display: block; width: 100%; height: 100%; overflow: visible; }