/* ============================================================
   NAUJTRATS · Starfield Background Component
   Shared by homepage + anime player pages
   Layers: aurora blobs (z-3) → starfield canvas (z-2) → noise (z-1)
   All animations use transform/opacity only (compositor-safe).
   ============================================================ */

#starfield {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}

#aurora {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    overflow: hidden;
}
.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
    will-change: transform;
    transition: opacity 0.6s ease;
}
.aurora-blob.a1 {
    width: 55vw; height: 55vw;
    top: -20vw; left: -14vw;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.30), transparent 65%);
    animation: auroraDrift1 26s ease-in-out infinite alternate;
}
.aurora-blob.a2 {
    width: 48vw; height: 48vw;
    top: -10vw; right: -16vw;
    background: radial-gradient(circle, rgba(129, 140, 248, 0.28), transparent 65%);
    animation: auroraDrift2 32s ease-in-out infinite alternate;
}
.aurora-blob.a3 {
    width: 60vw; height: 60vw;
    bottom: -26vw; left: 12vw;
    background: radial-gradient(circle, rgba(244, 114, 182, 0.16), transparent 65%);
    animation: auroraDrift3 38s ease-in-out infinite alternate;
}
@keyframes auroraDrift1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(9vw, 7vh, 0) scale(1.18); }
}
@keyframes auroraDrift2 {
    from { transform: translate3d(0, 0, 0) scale(1.05); }
    to   { transform: translate3d(-7vw, 9vh, 0) scale(0.92); }
}
@keyframes auroraDrift3 {
    from { transform: translate3d(0, 0, 0) scale(0.95); }
    to   { transform: translate3d(6vw, -5vh, 0) scale(1.12); }
}

/* Film-grain noise overlay (very subtle) */
.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.55'/></svg>");
}

/* ── Light mode adjustments ── */
body.light-mode #starfield { opacity: 0.4; }
body.light-mode .aurora-blob { opacity: 0.06; }
body.light-mode .aurora-blob.a1 { background: radial-gradient(circle, rgba(37, 99, 235, 0.06), transparent 65%); }
body.light-mode .aurora-blob.a2 { background: radial-gradient(circle, rgba(99, 102, 241, 0.05), transparent 65%); }
body.light-mode .aurora-blob.a3 { background: radial-gradient(circle, rgba(219, 39, 119, 0.03), transparent 65%); }
body.light-mode .noise-overlay { opacity: 0.015; }

/* ── Reduced motion: static background, no drift ── */
@media (prefers-reduced-motion: reduce) {
    #aurora, .aurora-blob { animation: none; }
    #starfield { display: none; }
}