/**
 * ============================================
 * ATLAS BACKGROUND ANIMATION SYSTEM
 * Hôtel Atlas Day — Premium Background Effects
 * ============================================
 * Version: 1.0.0
 * Author: SESNOV
 * 
 * Colors:
 * - Primary Dark: #0A1A2A (Midnight Blue)
 * - Primary Accent: #D4AF37 (Gold)
 * - Secondary Accent: #C8A16B (Sand Beige)
 * ============================================
 */

/* ==========================================
   1. CONTAINER - FIXED BACKGROUND LAYER
   ========================================== */
#atlas-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Ensure main content stays above */
main > *:not(#atlas-background) {
    position: relative;
    z-index: 1;
}

/* ==========================================
   2. ANIMATED GRADIENT LAYER
   ========================================== */
.atlas-bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #D4AF37, #0A1A2A, #C8A16B, #D4AF37);
    background-size: 400% 400%;
    opacity: 0.10;
    animation: atlasGradientShift 25s ease infinite;
}

@keyframes atlasGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ==========================================
   3. FLOATING ORBS (HALO EFFECT)
   ========================================== */
.atlas-bg-orb {
    position: absolute;
    border-radius: 50%;
    will-change: transform, opacity;
    animation: atlasOrbFloat 30s ease-in-out infinite;
}

.atlas-bg-orb--gold {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.25) 0%, transparent 70%);
    filter: blur(80px);
    opacity: 0.08;
    top: 10%;
    left: -5%;
}

.atlas-bg-orb--blue {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(10, 26, 42, 0.35) 0%, transparent 70%);
    filter: blur(70px);
    opacity: 0.10;
    top: 55%;
    right: -8%;
    animation-delay: -10s;
    animation-duration: 35s;
}

.atlas-bg-orb--sand {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(200, 161, 107, 0.30) 0%, transparent 70%);
    filter: blur(60px);
    opacity: 0.07;
    bottom: 20%;
    left: 25%;
    animation-delay: -18s;
    animation-duration: 28s;
}

@keyframes atlasOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(35px, -25px) scale(1.06); }
    66% { transform: translate(-25px, 35px) scale(0.94); }
}

/* ==========================================
   4. PARTICLES CONTAINER (JS-generated)
   ========================================== */
.atlas-bg-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Single particle styles */
.atlas-particle {
    position: absolute;
    background: #D4AF37;
    border-radius: 50%;
    opacity: 0.12;
    will-change: transform, opacity;
    animation: atlasParticleFloat 20s ease-in-out infinite,
               atlasParticlePulse 4s ease-in-out infinite;
}

@keyframes atlasParticleFloat {
    0%, 100% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-20px) translateX(10px); }
    50% { transform: translateY(-35px) translateX(-8px); }
    75% { transform: translateY(-15px) translateX(12px); }
}

@keyframes atlasParticlePulse {
    0%, 100% { opacity: 0.08; }
    50% { opacity: 0.18; }
}

/* ==========================================
   5. ANIMATED SVG WAVES (OPTIONAL)
   ========================================== */
.atlas-bg-waves {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100px;
    opacity: 0.04;
    animation: atlasWaveMove 35s linear infinite;
}

@keyframes atlasWaveMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ==========================================
   6. MOBILE RESPONSIVE (max-width: 768px)
   ========================================== */
@media (max-width: 768px) {
    .atlas-bg-gradient {
        opacity: 0.07;
    }
    
    .atlas-bg-orb--gold {
        width: 160px;
        height: 160px;
        filter: blur(40px);
        opacity: 0.05;
    }
    
    .atlas-bg-orb--blue {
        width: 120px;
        height: 120px;
        filter: blur(35px);
        opacity: 0.06;
    }
    
    .atlas-bg-orb--sand {
        width: 90px;
        height: 90px;
        filter: blur(30px);
        opacity: 0.04;
    }
    
    .atlas-particle {
        opacity: 0.08;
    }
    
    .atlas-bg-waves {
        height: 50px;
        opacity: 0.02;
    }
}

/* ==========================================
   7. ACCESSIBILITY - REDUCED MOTION
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    .atlas-bg-gradient,
    .atlas-bg-orb,
    .atlas-particle,
    .atlas-bg-waves {
        animation: none !important;
    }

    .atlas-bg-gradient {
        opacity: 0.05;
    }

    .atlas-bg-orb {
        opacity: 0.03;
    }

    .atlas-particle {
        opacity: 0.05;
    }
}