/* ========== LIGHTENED COSMIC NEBULA BACKGROUND ========== */
/* Optimized: Reduced dark layers for vivid cloud visibility; preserves animations & canvas focus */
/* Lighter opacities let breathing clouds shine; gold/blue accents tie to scheme */

.bg-gradient {
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        /* Subtle deep space base - much lighter for cloud bleed-through */
        radial-gradient(ellipse 150% 130% at 50% 0%, rgba(10, 15, 28, 0.6) 0%, rgba(6, 11, 22, 0.5) 30%, rgba(5, 10, 21, 0.4) 60%, rgba(3, 8, 18, 0.3) 100%),

        /* Primary nebula cluster - upper left, roaming widely (lighter blues) */
        radial-gradient(circle at 20% 30%, rgba(50, 140, 255, 0.3) 0%, rgba(40, 120, 240, 0.2) 12%, rgba(30, 100, 220, 0.12) 28%, transparent 50%),
        radial-gradient(ellipse 55% 75% at 28% 38%, rgba(45, 130, 250, 0.25) 0%, rgba(35, 110, 230, 0.16) 20%, rgba(25, 90, 200, 0.08) 40%, transparent 60%),
        radial-gradient(circle at 15% 42%, rgba(38, 115, 235, 0.2) 0%, rgba(28, 95, 215, 0.1) 15%, transparent 40%),

        /* Secondary nebula cluster - right side, dynamic movement */
        radial-gradient(circle at 78% 48%, rgba(60, 150, 255, 0.28) 0%, rgba(50, 135, 245, 0.18) 16%, rgba(40, 115, 230, 0.1) 35%, transparent 58%),
        radial-gradient(ellipse 48% 65% at 72% 42%, rgba(55, 140, 250, 0.22) 0%, rgba(45, 120, 235, 0.14) 22%, transparent 55%),
        radial-gradient(ellipse 42% 52% at 85% 55%, rgba(50, 135, 245, 0.2) 0%, rgba(38, 115, 225, 0.1) 18%, transparent 48%),

        /* Tertiary nebula - bottom center, flowing upward */
        radial-gradient(ellipse 62% 50% at 48% 82%, rgba(45, 130, 250, 0.25) 0%, rgba(35, 110, 230, 0.16) 20%, rgba(25, 90, 210, 0.08) 42%, transparent 68%),
        radial-gradient(circle at 55% 75%, rgba(42, 125, 240, 0.2) 0%, rgba(32, 105, 220, 0.12) 18%, transparent 48%),
        radial-gradient(ellipse 45% 58% at 42% 80%, rgba(38, 118, 235, 0.18) 0%, rgba(28, 98, 215, 0.09) 16%, transparent 45%),

        /* Scattered accent clouds - roaming independently (subtler) */
        radial-gradient(circle at 12% 65%, rgba(35, 110, 230, 0.18) 0%, rgba(25, 90, 210, 0.1) 18%, transparent 42%),
        radial-gradient(circle at 88% 25%, rgba(48, 135, 250, 0.2) 0%, rgba(38, 115, 230, 0.12) 16%, transparent 38%),
        radial-gradient(ellipse 40% 48% at 50% 15%, rgba(40, 120, 240, 0.16) 0%, rgba(30, 100, 220, 0.08) 14%, transparent 36%),
        radial-gradient(circle at 65% 70%, rgba(45, 128, 245, 0.15) 0%, rgba(35, 108, 225, 0.08) 13%, transparent 34%),
        radial-gradient(circle at 35% 18%, rgba(42, 122, 238, 0.14) 0%, rgba(32, 102, 218, 0.07) 12%, transparent 32%),

        /* Ambient glow - even subtler */
        radial-gradient(ellipse 80% 80% at 50% 50%, rgba(80, 140, 255, 0.04) 0%, rgba(60, 120, 235, 0.02) 40%, transparent 70%),

        /* Golden accent wisps - rare lightning flashes (tied to scheme) */
        radial-gradient(circle at 25% 55%, rgba(255, 215, 0, 0.08) 0%, rgba(255, 200, 0, 0.04) 8%, transparent 22%),
        radial-gradient(circle at 75% 35%, rgba(255, 215, 0, 0.06) 0%, rgba(255, 200, 0, 0.03) 6%, transparent 18%),

        /* Minimal cosmic depth overlay - barely there */
        linear-gradient(135deg, rgba(5, 10, 21, 0.2) 0%, rgba(8, 15, 28, 0.25) 25%, rgba(10, 18, 30, 0.3) 50%, rgba(8, 15, 28, 0.25) 75%, rgba(5, 10, 21, 0.2) 100%);

    background-size:
        100% 100%,
        65% 70%, 58% 78%, 45% 50%,
        58% 62%, 52% 68%, 48% 58%,
        68% 55%, 52% 52%, 48% 62%,
        38% 42%, 42% 38%, 42% 52%, 36% 38%, 38% 40%,
        90% 90%,
        28% 28%, 32% 32%,
        100% 100%;

    background-position:
        center,
        20% 30%, 28% 38%, 15% 42%,
        78% 48%, 72% 42%, 85% 55%,
        48% 82%, 55% 75%, 42% 80%,
        12% 65%, 88% 25%, 50% 15%, 65% 70%, 35% 18%,
        50% 50%,
        25% 55%, 75% 35%,
        center;

    pointer-events: none;
    animation:
        nebulaDrift 30s linear infinite,
        nebulaBreath 10s ease-in-out infinite alternate;
    will-change: opacity;
}

@media (max-width: 1024px) {
    .bg-gradient {
        background-size:
            120% 120%,
            80% 90%, 78% 96%, 72% 80%,
            76% 82%, 70% 88%, 68% 78%,
            85% 75%, 72% 72%, 68% 80%,
            58% 62%, 60% 56%, 60% 68%, 56% 60%, 56% 60%,
            120% 120%,
            45% 45%, 48% 48%,
            120% 120%;
        filter: blur(0.4px) saturate(1.05);
    }

    .bg-gradient::before {
        opacity: 0.2;
    }
}

@media (max-width: 640px) {
    .bg-gradient {
        background-size:
            140% 140%,
            95% 110%, 92% 118%, 85% 100%,
            90% 100%, 85% 108%, 80% 95%,
            100% 92%, 88% 88%, 82% 98%,
            70% 78%, 72% 70%, 72% 82%, 68% 74%, 68% 74%,
            140% 140%,
            55% 55%, 58% 58%,
            140% 140%;
        filter: blur(0.6px) saturate(1.08);
    }

    .bg-gradient::before {
        opacity: 0.18;
    }
}

/* Parallax effect on scroll (retained, but lighter impact) */
@supports (animation-timeline: scroll()) {
    .bg-gradient {
        animation:
            nebulaDrift 25s linear infinite,
            nebulaBreath 8s ease-in-out infinite alternate,
            nebulaRotate 40s linear infinite,
            nebulaScroll linear;
        animation-timeline: scroll();
    }

    @keyframes nebulaScroll {
        0% {
            background-position:
                center,
                20% 30%, 28% 38%, 15% 42%,
                78% 48%, 72% 42%, 85% 55%,
                48% 82%, 55% 75%, 42% 80%,
                12% 65%, 88% 25%, 50% 15%, 65% 70%, 35% 18%,
                50% 50%,
                25% 55%, 75% 35%,
                center;
        }
        100% {
            background-position:
                center,
                25% 25%, 32% 33%, 18% 38%,
                73% 53%, 68% 47%, 82% 60%,
                53% 78%, 60% 70%, 47% 76%,
                15% 60%, 85% 30%, 55% 10%, 70% 65%, 40% 13%,
                50% 50%,
                30% 50%, 80% 30%,
                center;
        }
    }
}

/* Dynamic roaming animation - wider movement range (unchanged) */
@keyframes nebulaDrift {
    0%, 100% {
        background-position:
            center,
            20% 30%, 28% 38%, 15% 42%,
            78% 48%, 72% 42%, 85% 55%,
            48% 82%, 55% 75%, 42% 80%,
            12% 65%, 88% 25%, 50% 15%, 65% 70%, 35% 18%,
            50% 50%,
            25% 55%, 75% 35%,
            center;
    }
    20% {
        background-position:
            center,
            28% 25%, 35% 33%, 20% 38%,
            72% 55%, 68% 48%, 80% 62%,
            55% 78%, 62% 70%, 48% 76%,
            18% 58%, 82% 32%, 58% 10%, 72% 62%, 42% 12%,
            48% 52%,
            30% 48%, 80% 28%,
            center;
    }
    40% {
        background-position:
            center,
            15% 35%, 22% 42%, 12% 48%,
            85% 42%, 78% 35%, 92% 48%,
            42% 88%, 48% 82%, 35% 85%,
            8% 72%, 95% 18%, 45% 22%, 58% 78%, 28% 25%,
            52% 48%,
            18% 62%, 68% 42%,
            center;
    }
    60% {
        background-position:
            center,
            25% 22%, 32% 30%, 18% 35%,
            75% 52%, 70% 45%, 88% 58%,
            52% 75%, 58% 68%, 45% 73%,
            15% 62%, 85% 28%, 52% 12%, 68% 68%, 38% 15%,
            50% 50%,
            28% 52%, 78% 32%,
            center;
    }
    80% {
        background-position:
            center,
            18% 28%, 25% 36%, 13% 40%,
            80% 50%, 74% 44%, 87% 57%,
            50% 80%, 57% 73%, 43% 78%,
            10% 68%, 90% 22%, 48% 18%, 62% 72%, 32% 20%,
            49% 51%,
            23% 58%, 72% 38%,
            center;
    }
}

/* Breathing effect - more pronounced (slight reduction for subtlety) */
@keyframes nebulaBreath {
    0% {
        opacity: 1;
        filter: brightness(1) contrast(1.02) saturate(1.05);
    }
    100% {
        opacity: 0.96;
        filter: brightness(1.08) contrast(1.05) saturate(1.1);
    }
}

/* Particle starfield layer - moves independently (lighter for visibility) */
.bg-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 18% 25%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 72% 15%, rgba(200, 220, 255, 0.7), transparent),
        radial-gradient(1px 1px at 45% 55%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 88% 45%, rgba(180, 200, 255, 0.7), transparent),
        radial-gradient(2px 2px at 25% 78%, rgba(220, 235, 255, 0.8), transparent),
        radial-gradient(1px 1px at 62% 82%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1.5px 1.5px at 8% 68%, rgba(190, 210, 255, 0.7), transparent),
        radial-gradient(1px 1px at 95% 72%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 38% 12%, rgba(210, 225, 255, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 78% 88%, rgba(255, 255, 255, 0.7), transparent),
        /* Golden accent stars (scheme tie-in) */
        radial-gradient(1.5px 1.5px at 32% 42%, rgba(255, 215, 0, 0.5), transparent),
        radial-gradient(1px 1px at 68% 58%, rgba(255, 200, 0, 0.4), transparent);

    background-size:
        250% 250%, 280% 280%, 320% 320%, 300% 300%, 260% 260%,
        290% 290%, 270% 270%, 310% 310%, 285% 285%, 295% 295%,
        240% 240%, 265% 265%;

    background-position: 0% 0%;
    animation: starfield 180s linear infinite;
    opacity: 0.25;  /* Lighter for cloud dominance */
    pointer-events: none;
}

@keyframes starfield {
    0% {
        background-position:
            0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%,
            0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%,
            0% 0%, 0% 0%;
    }
    100% {
        background-position:
            100% 100%, -80% 120%, 60% -90%, 110% -40%, -95% -110%,
            85% 105%, -60% 70%, 120% -75%, 95% 115%, -70% -85%,
            75% 95%, -55% 80%;
    }
}

/* Enhanced overlay with vignette (massively lightened - minimal mask) */
.bg-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    background:
        /* Gentle vignette - barely darkens edges */
        radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.15) 100%),
        /* Top atmospheric glow (scheme blue) */
        radial-gradient(ellipse 120% 50% at 50% 0%, rgba(50, 140, 255, 0.03) 0%, transparent 70%),
        /* Ultra-subtle grain overlay */
        linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.05) 100%);

    pointer-events: none;
    animation: overlayPulse 12s ease-in-out infinite alternate;
}

@keyframes overlayPulse {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.95;  /* Less breathing for stability */
    }
}

/* WebGL Canvas for nebula effect (prioritized - clouds lead) */
#nebula-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;  /* Same as .bg-gradient - canvas takes precedence via JS */
    pointer-events: none;
    width: 100%;
    height: 100%;
}

/* Ensure content is above background */
main, header {
    position: relative;
    z-index: 2;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .bg-gradient {
        animation: none !important;
        background-position:
            center,
            20% 30%, 28% 38%, 15% 42%,
            78% 48%, 72% 42%, 85% 55%,
            48% 82%, 55% 75%, 42% 80%,
            12% 65%, 88% 25%, 50% 15%, 65% 70%, 35% 18%,
            50% 50%,
            25% 55%, 75% 35%,
            center !important;
        filter: none;
        transform: none;
    }

    .bg-gradient::before {
        animation: none;
        opacity: 0.15;  /* Even lighter when static */
    }

    .bg-overlay {
        animation: none;
    }

    #nebula-canvas {
        display: none !important;  /* Fall back to static gradient */
    }
}

/* ─────────────────────────────────────────
   Mobile performance override
   Disable background effects on touch devices
   ───────────────────────────────────────── */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    .bg-gradient {
        /* Disable all animations on mobile/tablet */
        animation: none !important;
        /* Set static background position */
        background-position:
            center,
            20% 30%, 28% 38%, 15% 42%,
            78% 48%, 72% 42%, 85% 55%,
            48% 82%, 55% 75%, 42% 80%,
            12% 65%, 88% 25%, 50% 15%, 65% 70%, 35% 18%,
            50% 50%,
            25% 55%, 75% 35%,
            center !important;
        /* Disable transforms and filters */
        filter: none !important;
        transform: none !important;
        will-change: auto;
    }

    .bg-gradient::before {
        /* Disable starfield animation */
        animation: none !important;
        opacity: 0.15;  /* Static stars, dimmer */
    }

    .bg-overlay {
        /* Disable overlay pulse animation */
        animation: none !important;
        /* Static overlay */
        background:
            radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 100%),
            radial-gradient(ellipse 120% 50% at 50% 0%, rgba(50, 140, 255, 0.02) 0%, transparent 70%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.06) 100%);
        opacity: 1;
    }

    /* Disable WebGL canvas on mobile for better performance */
    #nebula-canvas {
        display: none !important;
    }
}