/* ============================================================
   BACKGROUND & AMBIENT EFFECTS
   bg-effects.css
   ============================================================ */

/* ── SCENE ─────────────────────────────────────────────────── */
.bg-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        url('/images/bg.png') center/cover no-repeat fixed;
        radial-gradient(ellipse 80% 60% at 50% 0%,   rgba(0, 80, 120, 0.55) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 15% 50%,  rgba(0, 50, 100, 0.40) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 85% 50%,  rgba(0, 60,  80, 0.30) 0%, transparent 60%),
        linear-gradient(180deg, #02111f 0%, #010b15 60%, #000608 100%);
    pointer-events: none;
}

.bg-pillars {
    position: absolute;
    inset: 0;
    background-image:
       linear-gradient(180deg, rgba(0,20,40,0.15) 0%, rgba(0,10,20,0.25) 100%),
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,80,120,0.6) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 15% 50%, rgba(0,50,100,0.4) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 85% 50%, rgba(0,60,80,0.3) 0%, transparent 60%);
}

/* ── AMBIENT ORBS ───────────────────────────────────────────── */
.orb {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    filter: blur(80px);
    opacity: 0.12;
}

.orb-1 {
    width: 400px; height: 400px;
    background: #007090;
    top: -100px; left: -100px;
    animation: drift 12s ease-in-out infinite;
}

.orb-2 {
    width: 300px; height: 300px;
    background: #005870;
    top: 40%; right: -80px;
    animation: drift 15s ease-in-out infinite reverse;
}

.orb-3 {
    width: 250px; height: 250px;
    background: #003a60;
    bottom: 0; left: 30%;
    animation: drift 10s ease-in-out infinite 3s;
}

@keyframes drift {
    0%,  100% { transform: translate(0, 0); }
    33%        { transform: translate(30px, -20px); }
    66%        { transform: translate(-20px, 30px); }
}

/* ── PARTICLES ─────────────────────────────────────────────── */
#particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: var(--teal);
    opacity: 0;
    animation: float-particle var(--d, 8s) ease-in-out infinite;
}

@keyframes float-particle {
    0%   { transform: translateY(100vh) translateX(0);              opacity: 0; }
    10%  { opacity: 0.6; }
    90%  { opacity: 0.3; }
    100% { transform: translateY(-20px) translateX(var(--dx, 20px)); opacity: 0; }
}