/* ==========================================================================
   SODAGAR ONLINE — BACKGROUND SYSTEM (Ultra-Light Mode)
   Active layers: Gradient Mesh · 2 Orbs · Static Grid · Vignette
   GPU budget: ~4 compositor layers | 2 CSS animations
   ========================================================================== */

/* ─────────────────────────────────────────────────────────
   1. ROOT — COLOR TOKENS
   ───────────────────────────────────────────────────────── */
:root {
    --bg-void:     #020409;
    --bg-deep:     #050812;
    --neon-blue:    #0d6efd;
    --orb-blue:     rgba(13, 110, 253, 0.12);
    --orb-dark-blue: rgba(10, 50, 180, 0.10);
}

/* ─────────────────────────────────────────────────────────
   2. MASTER BACKGROUND STAGE
   ───────────────────────────────────────────────────────── */
body {
    background-color: var(--bg-void);
    position: relative;
    overflow-x: hidden;
}

#bg-stage {
    position: fixed;
    inset: 0;
    z-index: -10;
    overflow: hidden;
    contain: strict;
}

/* ─────────────────────────────────────────────────────────
   3. LAYER 1 — ANIMATED GRADIENT MESH (very slow = cheap)
   ───────────────────────────────────────────────────────── */
#bg-gradient-mesh {
    position: absolute;
    inset: -20%;
    width: 140%;
    height: 140%;
    background:
        radial-gradient(ellipse 60% 50% at 15% 20%,  rgba(10,  50, 180,  0.18) 0%, transparent 65%),
        radial-gradient(ellipse 50% 60% at 85% 80%,  rgba(5,   20, 120,  0.14) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 50% 10%,  rgba(20,  50, 180,  0.07) 0%, transparent 55%),
        radial-gradient(ellipse 80% 80% at 50% 50%,  rgba(5,    5,  20,  1.00) 0%, transparent 100%);
    background-color: var(--bg-void);
    animation: meshDrift 60s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes meshDrift {
    0%   { transform: translate3d(0,   0,   0) scale(1.00); }
    50%  { transform: translate3d(2%, -1.5%, 0) scale(1.03); }
    100% { transform: translate3d(-1%, 2%,  0) scale(1.05); }
}

/* ─────────────────────────────────────────────────────────
   4. LAYER 2 — 2 FLOATING NEON ORBS ONLY
   ───────────────────────────────────────────────────────── */
.bg-orb {
    position: absolute;
    opacity: 0;
    will-change: transform, opacity;
}

#orb-primary {
    width: 550px; height: 550px;
    background: radial-gradient(circle, rgba(20, 60, 200, 0.22) 0%, rgba(10, 30, 150, 0.08) 50%, transparent 70%);
    top: -15%; left: -10%;
    animation: orbFloat 28s ease-in-out infinite alternate,
               orbBreathe 12s ease-in-out infinite;
}

#orb-secondary {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(5, 20, 120, 0.18) 0%, rgba(30, 0, 80, 0.06) 50%, transparent 70%);
    bottom: -10%; right: -10%;
    animation: orbFloatReverse 36s ease-in-out infinite alternate,
               orbBreathe 14s ease-in-out infinite 2s;
}

@keyframes orbFloat {
    0%   { transform: translate3d(0,    0,   0) scale(1.0); }
    50%  { transform: translate3d(35px,-50px, 0) scale(1.08); }
    100% { transform: translate3d(-20px,-35px, 0) scale(1.06); }
}

@keyframes orbFloatReverse {
    0%   { transform: translate3d(0,    0,   0) scale(1.0); }
    50%  { transform: translate3d(-40px, 35px, 0) scale(1.06); }
    100% { transform: translate3d(20px,  45px, 0) scale(1.08); }
}

@keyframes orbBreathe {
    0%, 100% { opacity: 0.65; }
    50%       { opacity: 1.00; }
}

/* ─────────────────────────────────────────────────────────
   5. LAYER 3 — STATIC GRID (no animation = zero GPU cost)
   ───────────────────────────────────────────────────────── */
#bg-grid {
    position: absolute;
    inset: 0;
    z-index: 5;
    background-image:
        linear-gradient(to right,  rgba(255, 42, 42, 0.6) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 42, 42, 0.6) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 1;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 65%);
    mask-image: linear-gradient(to right, transparent 0%, black 65%);
}

/* ─────────────────────────────────────────────────────────
   6. LAYER 4 — VIGNETTE (static, no animation)
   ───────────────────────────────────────────────────────── */
#bg-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 90% 85% at 50% 50%,
        transparent 40%,
        rgba(2, 4, 9, 0.55) 80%,
        rgba(2, 4, 9, 0.85) 100%);
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────
   7. CURSOR GLOW (desktop — CSS transition only)
   ───────────────────────────────────────────────────────── */
#bg-cursor-glow {
    position: fixed;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(13, 110, 253, 0.04) 0%,
        transparent 65%);
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    z-index: -1;
}

/* ─────────────────────────────────────────────────────────
   8. MOBILE — reduce further on small screens
   ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #orb-primary   { width: 300px; height: 300px; }
    #orb-secondary { width: 220px; height: 220px; }
    #bg-cursor-glow { display: none; }
    #bg-gradient-mesh { animation-duration: 80s; }
}

@media (prefers-reduced-motion: reduce) {
    #bg-gradient-mesh,
    .bg-orb { animation: none !important; }
}