/* ============================================================
   FONDO COMÚN: aurora animada y scanlines CRT.
   Lo cargan login.html, index.html y cde/index.html ANTES de su hoja.
   Marcado:
     <div class="aurora-bg">
         <div class="aurora-bg-tono"></div>
     </div>

   Rendimiento (por qué está así):
   · Las nubes NO llevan filter: blur(). Un blur de 120 px sobre dos capas
     de 200 % × 200 % animadas se recalculaba en cada fotograma; en 4K
     (cuatro veces los píxeles de 1080p) ahogaba la GPU. Los degradados
     radiales ya son suaves de por sí: el blur no se notaba.
   · Ya no hay rejilla en el suelo: la capa 3D con mask-image costaba más
     que el resto de la página (34 fps a 4K con ella, 60 sin ella).
   · Los tokens --hud-cyan-rgb, --z-fondo y --z-alerta llevan valor de
     respaldo para que el login, que tiene su propio :root, no los necesite.
   ============================================================ */
.aurora-bg {
    position: fixed;
    inset: 0;
    z-index: var(--z-fondo, -1);
    overflow: hidden;
    background: #01040a;
}

/* Nubes de color. La segunda capa lleva los tonos girados 180° y aparece y
   desaparece: sustituye al hue-rotate animado, que también repintaba. */
.aurora-bg::before,
.aurora-bg-tono {
    content: '';
    position: absolute;
    width: 200%; height: 200%;
    top: -50%; left: -50%;
    animation: aurora-drift 25s infinite alternate ease-in-out;
    will-change: transform;
    pointer-events: none;
}
.aurora-bg::before {
    background:
        radial-gradient(circle at 20% 30%, rgba(var(--hud-cyan-rgb, 0, 243, 255), 0.3) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(189, 0, 255, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 50% 80%, rgba(0, 100, 255, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 70% 40%, rgba(0, 255, 163, 0.15) 0%, transparent 30%);
    opacity: 0.8;
}
.aurora-bg-tono {
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 12, 0, 0.3) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(66, 255, 0, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 50% 80%, rgba(255, 155, 0, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 70% 40%, rgba(255, 0, 92, 0.15) 0%, transparent 30%);
    opacity: 0;
    animation: aurora-drift 25s infinite alternate ease-in-out, aurora-tono 50s infinite ease-in-out;
    will-change: transform, opacity;
}
@keyframes aurora-drift {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(5deg) scale(1.1) translate(2%, 2%); }
    100% { transform: rotate(-5deg) scale(1.05) translate(-2%, -2%); }
}
@keyframes aurora-tono {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
}

/* Scanlines CRT sobre toda la página */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.05) 50%);
    background-size: 100% 4px;
    z-index: var(--z-alerta, 10000);
    pointer-events: none;
    opacity: 0.3;
}

@media (prefers-reduced-motion: reduce) {
    .aurora-bg::before,
    .aurora-bg-tono { animation: none !important; }
}