/* ========================================
   BG-DYNAMIC — Fondo dinámico cyber-dark
   Additive layer sobre styles.css (no override).
   ======================================== */

#bg-stage {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Multi-layer atmospheric gradient — bottom darker como horizon oceánico */
    background:
        radial-gradient(ellipse 60% 50% at 18% 12%, rgba(191, 255, 0, 0.12), transparent 65%),
        radial-gradient(ellipse 50% 40% at 82% 18%, rgba(56, 189, 248, 0.08), transparent 60%),
        radial-gradient(ellipse 55% 35% at 25% 88%, rgba(245, 158, 11, 0.06), transparent 60%),
        radial-gradient(ellipse 60% 50% at 88% 92%, rgba(56, 189, 248, 0.05), transparent 60%),
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
}

/* Vignette sutil sobre todo — profundidad cinematográfica */
#bg-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
}

/* Glow blobs grandes que respiran — ambient depth */
#bg-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle 400px at var(--blob1-x, 20%) var(--blob1-y, 30%), rgba(191, 255, 0, 0.05), transparent 70%),
        radial-gradient(circle 350px at var(--blob2-x, 75%) var(--blob2-y, 70%), rgba(56, 189, 248, 0.04), transparent 70%);
    animation: blob-drift 24s ease-in-out infinite alternate;
    z-index: 0;
}

@keyframes blob-drift {
    0%   { --blob1-x: 20%; --blob1-y: 30%; --blob2-x: 75%; --blob2-y: 70%; }
    50%  { --blob1-x: 30%; --blob1-y: 45%; --blob2-x: 65%; --blob2-y: 55%; }
    100% { --blob1-x: 15%; --blob1-y: 50%; --blob2-x: 80%; --blob2-y: 60%; }
}

@property --blob1-x { syntax: '<percentage>'; initial-value: 20%; inherits: true; }
@property --blob1-y { syntax: '<percentage>'; initial-value: 30%; inherits: true; }
@property --blob2-x { syntax: '<percentage>'; initial-value: 75%; inherits: true; }
@property --blob2-y { syntax: '<percentage>'; initial-value: 70%; inherits: true; }

#bg-dynamic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
    #bg-dynamic { display: none; }
    #bg-stage::before { animation: none; }
}