/* ===========================================================
   Aurora Background — Fixed ambient layer
   =========================================================== */
.aurora-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Push all page content above the aurora layer */
.ds-cinematic main > *:not(.aurora-bg) {
    position: relative;
    z-index: 1;
}

/* ── Radial Glow Base ── */
.aurora-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 30% 20%, rgba(59,130,246,0.07) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 75% 60%, rgba(139,92,246,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 80%, rgba(217,70,239,0.04) 0%, transparent 50%),
        radial-gradient(ellipse 40% 30% at 20% 50%, rgba(6,182,212,0.03) 0%, transparent 50%);
}

/* ── Floating Orbs ── */
.aurora-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    will-change: transform;
}

.aurora-orb-1 {
    width: 550px; height: 550px;
    background: radial-gradient(circle, rgba(59,130,246,0.18) 0%, transparent 70%);
    top: -8%; left: -5%;
    animation: aurora-drift-1 14s infinite ease-in-out;
}
.aurora-orb-2 {
    width: 450px; height: 450px;
    background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%);
    top: 30%; right: -8%;
    animation: aurora-drift-2 18s infinite ease-in-out;
}
.aurora-orb-3 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(217,70,239,0.1) 0%, transparent 70%);
    bottom: 5%; left: 25%;
    animation: aurora-drift-3 16s infinite ease-in-out;
}
.aurora-orb-4 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(6,182,212,0.08) 0%, transparent 70%);
    top: 55%; left: -10%;
    animation: aurora-drift-4 20s infinite ease-in-out;
}

@keyframes aurora-drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(40px, -30px) scale(1.08); }
    50% { transform: translate(-25px, 40px) scale(0.94); }
    75% { transform: translate(20px, 20px) scale(1.04); }
}
@keyframes aurora-drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    30% { transform: translate(-35px, 25px) scale(1.06); }
    60% { transform: translate(30px, -20px) scale(0.96); }
    80% { transform: translate(-15px, -15px) scale(1.02); }
}
@keyframes aurora-drift-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(30px, -35px) scale(0.95); }
    50% { transform: translate(-40px, 20px) scale(1.07); }
    70% { transform: translate(15px, 30px) scale(0.98); }
}
@keyframes aurora-drift-4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    35% { transform: translate(25px, 30px) scale(1.05); }
    65% { transform: translate(-30px, -25px) scale(0.93); }
    85% { transform: translate(10px, -10px) scale(1.01); }
}

/* ── Particle Canvas ── */
.aurora-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ── Glassmorphism utilities (for any card/element) ── */
.aurora-glass {
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.06);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .aurora-orb { animation: none !important; }
    .aurora-particles { display: none; }
}