/* ============================================
   Galaxy Background Animation
   ============================================ */

.galaxy-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: radial-gradient(ellipse at center, #1a0a2e 0%, #0d0d1a 50%, #050510 100%);
}

[data-theme="light"] .galaxy-bg {
    background: radial-gradient(ellipse at center, #e8e0ff 0%, #d4c8f0 50%, #c8b8e8 100%);
}

/* Nebula clouds */
.nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: nebula-float 20s ease-in-out infinite;
}

.nebula-1 {
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, #8b5cf6 0%, transparent 70%);
    top: 10%;
    left: -10%;
    animation-delay: 0s;
}

.nebula-2 {
    width: 500px;
    height: 300px;
    background: radial-gradient(ellipse, #6d28d9 0%, transparent 70%);
    top: 50%;
    right: -5%;
    animation-delay: -7s;
}

.nebula-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(ellipse, #fbbf24 0%, transparent 70%);
    bottom: 5%;
    left: 30%;
    opacity: 0.15;
    animation-delay: -14s;
}

@keyframes nebula-float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -20px) scale(1.05);
    }
    66% {
        transform: translate(-20px, 15px) scale(0.95);
    }
}

/* Stars layer */
.stars-layer {
    position: absolute;
    inset: 0;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
}

[data-theme="light"] .star {
    background: #4a3a6a;
}

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

/* Constellation lines */
.constellation {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.constellation-line {
    stroke: rgba(139, 92, 246, 0.15);
    stroke-width: 1;
    fill: none;
}

[data-theme="light"] .constellation-line {
    stroke: rgba(109, 40, 217, 0.2);
}

/* Shooting stars */
.shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fbbf24;
    border-radius: 50%;
    box-shadow: 0 0 6px 2px rgba(251, 191, 36, 0.6);
    animation: shoot 8s linear infinite;
    opacity: 0;
}

.shooting-star::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 1px;
    background: linear-gradient(to left, rgba(251, 191, 36, 0.8), transparent);
    right: 2px;
}

@keyframes shoot {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(-45deg);
    }
    2% {
        opacity: 1;
    }
    8% {
        opacity: 0;
        transform: translate(-300px, 300px) rotate(-45deg);
    }
    100% {
        opacity: 0;
    }
}

/* Planet */
.planet {
    position: absolute;
    border-radius: 50%;
    opacity: 0.6;
}

.planet-1 {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle at 30% 30%, #a78bfa, #6d28d9 60%, #4c1d95);
    box-shadow: inset -20px -20px 40px rgba(0,0,0,0.5), 0 0 40px rgba(139, 92, 246, 0.3);
    bottom: 10%;
    right: 10%;
    animation: planet-float 15s ease-in-out infinite;
}

.planet-2 {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at 30% 30%, #fcd34d, #f59e0b 60%, #d97706);
    box-shadow: inset -10px -10px 20px rgba(0,0,0,0.4), 0 0 20px rgba(251, 191, 36, 0.3);
    top: 20%;
    right: 20%;
    animation: planet-float 12s ease-in-out infinite reverse;
}

@keyframes planet-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}