/* ==========================================================================
   Nebulosa · espacio: cielo con paralaje, nebulosa dentro de la figura, preloader y transiciones.
   Reglas de rendimiento de esta hoja:
   · solo se anima opacity y transform (los dos que resuelve la GPU sin repintar);
   · nada de desenfoques animados, mezclas de color ni sombras animadas;
   · el cielo y el suelo de la figura son capas propias que se pintan una sola vez.
   ========================================================================== */
:root { --d1: .16s; --d2: .28s; --d3: .45s; --halo-a: .5; }
:root[data-theme="light"] { --halo-a: .3; }
@property --neb { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes bg-drift { from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } to { transform: translate3d(2.2%, -1.6%, 0) rotate(2.5deg) scale(1.06); } }

/* Capas del cielo (las crea nebula-ui.js): estrellas lejanas, medias y cercanas con paralaje al desplazarse.
   El desplazamiento lo escribe el script directamente en cada capa: no toca el resto del documento. */
.cosmos { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; transition: opacity var(--d3) var(--ease); }
.cosmos canvas { position: absolute; left: -8%; top: -8%; width: 116%; height: 116%; will-change: transform; }
.cosmos .c3 { animation: cosmos-twinkle 8s steps(8, end) infinite alternate; }
.cosmos .c2 { animation: cosmos-twinkle 11s steps(11, end) infinite alternate-reverse; }
@keyframes cosmos-twinkle { from { opacity: .45; } to { opacity: 1; } }
.cosmos .shoot { position: absolute; top: 14%; left: 78%; width: 130px; height: 1px; background: linear-gradient(90deg, transparent, rgba(220, 240, 255, .95)); opacity: 0; transform-origin: right center; animation: cosmos-shoot 23s linear infinite 9s; }
@keyframes cosmos-shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(-24deg); } 1.5% { opacity: 1; } 5.5% { opacity: 0; transform: translate(-460px, 205px) rotate(-24deg); } 100% { opacity: 0; transform: translate(-460px, 205px) rotate(-24deg); } }
:root[data-theme="light"] .cosmos { opacity: 0; }

/* Apariciones y desapariciones: rápidas al salir, calmas al entrar */
.fx-out { opacity: 0 !important; transform: translateY(6px); transition: opacity var(--d1) var(--ease), transform var(--d1) var(--ease); pointer-events: none; }
.fx-in { animation: fx-in var(--d3) var(--ease) both; }
@keyframes fx-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Cambio de tema: una transición de vista (fundido entre dos imágenes) en vez de animar cada elemento */
::view-transition-group(root) { animation-duration: .26s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .26s; mix-blend-mode: normal; }