/* =========================================================
   GALAXY STARS ANIMATION SYSTEM
   The most beautiful galaxy animation in the world!
   ========================================================= */

/* Galaxy Background Container */
.galaxy-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 25%, #0f0f23 50%, #000000 100%);
}

/* Animated Nebula Clouds */
.galaxy-background::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(ellipse 800px 400px at 20% 30%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 600px 300px at 80% 70%, rgba(75, 0, 130, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 1000px 500px at 50% 20%, rgba(25, 25, 112, 0.1) 0%, transparent 60%),
        radial-gradient(ellipse 700px 350px at 10% 80%, rgba(72, 61, 139, 0.18) 0%, transparent 50%);
    animation: nebulaFloat 20s ease-in-out infinite;
}

@keyframes nebulaFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-20px, -30px) rotate(1deg); }
    50% { transform: translate(10px, -20px) rotate(-1deg); }
    75% { transform: translate(-10px, 20px) rotate(0.5deg); }
}

/* Star Field Container */
.star-field {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Individual Star Particles */
.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s ease-in-out infinite;
}

/* Different star sizes and colors */
.star.small {
    width: 1px;
    height: 1px;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}

.star.medium {
    width: 2px;
    height: 2px;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 255, 255, 0.3);
}

.star.large {
    width: 3px;
    height: 3px;
    box-shadow: 0 0 6px rgba(255, 255, 255, 1), 0 0 12px rgba(255, 255, 255, 0.4), 0 0 18px rgba(255, 255, 255, 0.2);
}

.star.blue {
    background: #87CEEB;
    box-shadow: 0 0 4px #87CEEB, 0 0 8px #87CEEB, 0 0 12px #87CEEB;
}

.star.purple {
    background: #DDA0DD;
    box-shadow: 0 0 4px #DDA0DD, 0 0 8px #DDA0DD, 0 0 12px #DDA0DD;
}

.star.gold {
    background: #FFD700;
    box-shadow: 0 0 4px #FFD700, 0 0 8px #FFD700, 0 0 12px #FFD700;
}

.star.red {
    background: #FF6B6B;
    box-shadow: 0 0 4px #FF6B6B, 0 0 8px #FF6B6B, 0 0 12px #FF6B6B;
}

/* Twinkling Animation */
@keyframes twinkle {
    0%, 100% { 
        opacity: 0.3; 
        transform: scale(1);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.2);
    }
}

/* Professional Shooting Stars */
.shooting-star {
    position: absolute;
    width: 1px;
    height: 1px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
    animation: shoot 1.5s linear infinite;
}

.shooting-star::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: translateX(-60px);
}

@keyframes shoot {
    0% {
        transform: translateX(-60px) translateY(-60px);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        transform: translateX(100vw) translateY(100vh);
        opacity: 0;
    }
}

/* Constellation Lines */
.constellation-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: constellationGlow 4s ease-in-out infinite;
}

@keyframes constellationGlow {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.8; }
}

/* Meteor Shower */
.meteor {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px white;
    animation: meteorFall 3s linear infinite;
}

.meteor::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, transparent, white, transparent);
    transform: translateX(-200px);
}

@keyframes meteorFall {
    0% {
        transform: translateX(-200px) translateY(-200px);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        transform: translateX(100vw) translateY(100vh);
        opacity: 0;
    }
}

/* Galaxy Spiral */
.galaxy-spiral {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(138, 43, 226, 0.1) 30deg,
        transparent 60deg,
        rgba(75, 0, 130, 0.1) 90deg,
        transparent 120deg,
        rgba(25, 25, 112, 0.1) 150deg,
        transparent 180deg,
        rgba(72, 61, 139, 0.1) 210deg,
        transparent 240deg,
        rgba(138, 43, 226, 0.1) 270deg,
        transparent 300deg,
        rgba(75, 0, 130, 0.1) 330deg,
        transparent 360deg
    );
    animation: galaxyRotate 30s linear infinite;
    opacity: 0.3;
}

@keyframes galaxyRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Subtle Star Hover Effects */
.star:hover {
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
}

/* Aurora Effect */
.aurora {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(0, 255, 255, 0.1) 25%,
        transparent 50%,
        rgba(255, 0, 255, 0.1) 75%,
        transparent 100%
    );
    animation: auroraWave 15s ease-in-out infinite;
    opacity: 0.3;
}

@keyframes auroraWave {
    0%, 100% { 
        transform: translateX(-100%) skewX(-15deg);
        opacity: 0.1;
    }
    50% { 
        transform: translateX(100%) skewX(15deg);
        opacity: 0.3;
    }
}

/* Enhanced Footer Galaxy Effects */
.footer-galaxy {
    position: relative;
    overflow: hidden;
}

.footer-galaxy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(218, 165, 32, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(255, 215, 0, 0.15) 0%, transparent 50%);
    animation: footerNebula 25s ease-in-out infinite;
}

@keyframes footerNebula {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-10px, -15px) scale(1.1); }
    50% { transform: translate(5px, -10px) scale(0.9); }
    75% { transform: translate(-5px, 10px) scale(1.05); }
}

/* Hamburger Menu Galaxy Theme */
.menu-btn.galaxy-theme {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(75, 0, 130, 0.3));
    border: 2px solid rgba(138, 43, 226, 0.5);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(138, 43, 226, 0.3),
        inset 0 0 10px rgba(138, 43, 226, 0.1);
}

.menu-btn.galaxy-theme:hover {
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(138, 43, 226, 0.5),
        0 0 50px rgba(138, 43, 226, 0.3),
        inset 0 0 15px rgba(138, 43, 226, 0.2);
}

.menu-btn.galaxy-theme .bars {
    background: linear-gradient(45deg, #87CEEB, #DDA0DD);
    box-shadow: 0 0 8px rgba(138, 43, 226, 0.6);
}

.menu-btn.galaxy-theme .wheel {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        #87CEEB 20deg,
        #DDA0DD 40deg,
        #FFD700 60deg,
        #FF6B6B 80deg,
        transparent 100deg,
        #87CEEB 120deg,
        #DDA0DD 140deg,
        #FFD700 160deg,
        #FF6B6B 180deg,
        transparent 200deg,
        #87CEEB 220deg,
        #DDA0DD 240deg,
        #FFD700 260deg,
        #FF6B6B 280deg,
        transparent 300deg,
        #87CEEB 320deg,
        #DDA0DD 340deg,
        transparent 360deg
    );
}

/* Responsive Galaxy */
@media (max-width: 768px) {
    .galaxy-spiral {
        width: 200px;
        height: 200px;
    }
    
    .shooting-star::before {
        width: 50px;
    }
    
    .meteor::before {
        width: 100px;
    }
}

/* Performance Optimizations */
.galaxy-background {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.star, .shooting-star, .meteor {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .galaxy-background::before,
    .star,
    .shooting-star,
    .meteor,
    .constellation-line,
    .galaxy-spiral,
    .aurora {
        animation: none;
    }
    
    .galaxy-background {
        background: #000000;
    }
}