/* ==========================================================================
   Cosmos de Astro (inicio): intro astral + galaxia viva de fondo en toda la página.
   Un solo canvas fijo (cosmos.js). Durante la intro la capa va ENCIMA de todo y opaca;
   al entrar se vuelve transparente y pasa DETRÁS del contenido, donde la galaxia sigue
   girando despacio. Las clases html.intro-activa / intro-lista las pone cosmos.js.
   ========================================================================== */

/* z-index -1 (no 0 + main en 1): así main y las secciones NO crean contexto de apilamiento y los
   videos de Astro con mix-blend-mode: screen (inicio.css, universo.css) se funden con el fondo real. */
.cosmos-fondo { position: fixed; inset: 0; z-index: -1; height: 100vh; height: 100lvh; pointer-events: none; background: transparent; }
.cosmos-fondo canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* La nebulosa del hero vive en la capa fija (así las partículas se mueven sobre ella) y se
   desvanece al bajar. El hero original la pintaba él mismo: aquí se le quita solo si hay WebGL. */
.cosmos-nebulosa { position: absolute; inset: 0; background: #06041A url('/assets/universo/fondo-hero-movil.webp') center 30% / cover no-repeat; opacity: 1; transition: opacity 1.4s ease; }
@media (min-width: 760px) { .cosmos-nebulosa { background-image: url('/assets/universo/fondo-hero.webp'); background-position: 70% center; } }
html.cosmos-ok .pagina-inicio .u-hero-fondo { background-image: none; background-color: transparent; }

/* ---------- Intro: la capa cubre la página ---------- */
.cosmos-fondo--intro { z-index: 200; pointer-events: auto; cursor: pointer; background: #050312; transition: background-color 1.3s ease; }
.cosmos-fondo--intro .cosmos-nebulosa { opacity: 0; }
.cosmos-fondo--saliendo { background-color: transparent; }
.cosmos-fondo--saliendo .cosmos-nebulosa { opacity: 1; }

.cosmos-intro-texto { position: absolute; left: 0; right: 0; bottom: max(7vh, 40px); display: grid; justify-items: center; gap: 8px; text-align: center; color: #F5F3FF; opacity: 0; transform: translateY(10px); transition: opacity .9s ease, transform 1.1s var(--u-ease); pointer-events: none; }
.cosmos-fondo--vivo .cosmos-intro-texto { opacity: 1; transform: none; }
.cosmos-fondo--saliendo .cosmos-intro-texto { opacity: 0; transition: opacity .4s ease; }
.cosmos-intro-marca { margin: 0; font: 600 clamp(1.3rem, 3.2vw, 1.9rem)/1 var(--u-display); letter-spacing: -.02em; }
.cosmos-intro-marca b { font-weight: 400; color: var(--u-dorado); }
.cosmos-intro-pista { margin: 6px 0 0; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(185, 166, 255, .35); background: rgba(18, 13, 48, .55); font: 650 .84rem/1 var(--u-sans); color: #C8C1E8; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: cosmos-latido 2.4s ease-in-out infinite; }
.cosmos-intro-pista::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--u-dorado); box-shadow: 0 0 10px var(--u-dorado); }
@keyframes cosmos-latido { 50% { transform: scale(1.03); border-color: rgba(185, 166, 255, .65); } }

/* Mientras la intro cubre la página, la página espera invisible y las entradas del hero en pausa
   (styles.css bloquea el scroll y esconde el botón de Astro). Al salir, aparece con un fundido. */
html.intro-activa .site-header, html.intro-activa main, html.intro-activa .site-footer { opacity: 0; }
html.intro-lista .site-header, html.intro-lista main, html.intro-lista .site-footer { transition: opacity 1.4s ease .2s; }
html.intro-activa .u-hero-texto > *, html.intro-activa .u-hero-escena { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .cosmos-intro-pista { animation: none; }
  .cosmos-intro-texto, .cosmos-nebulosa, .cosmos-fondo--intro { transition: none; }
}