/**
 * Cosmic Effects and Background Animations
 */

/* Mobile Width Fix - Prevent horizontal overflow */
.home-page {
    width: 100%;
    position: relative;
}

.home-page * {
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .home-page {
        padding: 0;
        margin: 0;
    }
    
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: 100%;
    }
}

/* Mystical Background Animations */
.mystical-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: radial-gradient(ellipse at top, #1a1a2e 0%, #16213e 50%, #0f1419 100%);
    overflow: hidden;
    max-width: 100%;
}

.cosmic-dust .dust-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: float 20s infinite linear;
}

.cosmic-dust .dust-particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.cosmic-dust .dust-particle:nth-child(2) { left: 20%; animation-delay: 3s; }
.cosmic-dust .dust-particle:nth-child(3) { left: 30%; animation-delay: 6s; }
.cosmic-dust .dust-particle:nth-child(4) { left: 50%; animation-delay: 9s; }
.cosmic-dust .dust-particle:nth-child(5) { left: 60%; animation-delay: 12s; }
.cosmic-dust .dust-particle:nth-child(6) { left: 70%; animation-delay: 15s; }
.cosmic-dust .dust-particle:nth-child(7) { left: 80%; animation-delay: 18s; }
.cosmic-dust .dust-particle:nth-child(8) { left: 90%; animation-delay: 21s; }

@keyframes float {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100px) scale(1); opacity: 0; }
}

.energy-waves {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wave {
    position: absolute;
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 50%;
    animation: pulse 4s ease-in-out infinite;
}

.wave-1 { width: 300px; height: 300px; margin: -150px 0 0 -150px; animation-delay: 0s; }
.wave-2 { width: 600px; height: 600px; margin: -300px 0 0 -300px; animation-delay: 1.3s; }
.wave-3 { width: 900px; height: 900px; margin: -450px 0 0 -450px; animation-delay: 2.6s; }

@media (max-width: 768px) {
    .wave-1 { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
    .wave-2 { width: 400px; height: 400px; margin: -200px 0 0 -200px; }
    .wave-3 { width: 600px; height: 600px; margin: -300px 0 0 -300px; }
}

@media (max-width: 480px) {
    .wave-1 { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
    .wave-2 { width: 300px; height: 300px; margin: -150px 0 0 -150px; }
    .wave-3 { width: 450px; height: 450px; margin: -225px 0 0 -225px; }
}

@keyframes pulse {
    0% { transform: scale(0.8); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.5; }
    100% { transform: scale(1.6); opacity: 0; }
}