/* =========================================
   Universe Background (Stars & Nebula)
   ========================================= */

.universe-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Forced to 1 to sit alongside/above snow */
    overflow: hidden;
    background: transparent;
    pointer-events: none;
}

/* --- Nebula Clouds --- */
.nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.7;
    /* Increased opacity */
    animation: nebula-pulse 10s infinite alternate;
}

.nebula-1 {
    top: -10%;
    left: 20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(160, 32, 240, 0.6) 0%, transparent 70%);
    /* Brighter Purple */
    animation-delay: 0s;
}

.nebula-2 {
    bottom: 10%;
    right: 10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.4) 0%, transparent 70%);
    /* Brighter Cyan */
    animation-delay: -5s;
}

.nebula-3 {
    top: 40%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 0, 128, 0.5) 0%, transparent 70%);
    /* Brighter Pink */
    animation-duration: 15s;
}

/* ... middle ... */

.stars-1 {
    width: 2px;
    height: 2px;
    box-shadow:
        10vw 10vh #fff, 20vw 80vh #fff, 80vw 10vh #fff, 90vw 90vh #fff,
        45vw 45vh #fff, 12vw 55vh #fff, 78vw 23vh #fff, 33vw 88vh #fff,
        55vw 12vh #fff, 67vw 67vh #fff, 23vw 32vh #fff, 89vw 45vh #fff,
        5vw 95vh #fff, 95vw 5vh #fff, 40vw 10vh #fff, 60vw 90vh #fff,
        15vw 35vh #fff, 85vw 65vh #fff, 50vw 50vh #fff, 30vw 20vh #fff;
    animation-duration: 2s;
    opacity: 1.0;
    /* Fully visible */
}

.stars-2 {
    width: 3px;
    height: 3px;
    box-shadow:
        15vw 15vh #88ccff, 25vw 85vh #ccddff, 85vw 15vh #fff, 95vw 95vh #ddeeff,
        50vw 40vh #fff, 20vw 60vh #fff, 70vw 30vh #fff, 40vw 80vh #fff,
        60vw 20vh #fff, 75vw 75vh #fff, 30vw 30vh #fff, 80vw 50vh #ccffff;
    animation-duration: 4s;
    animation-delay: 1s;
    opacity: 0.8;
}

.stars-3 {
    width: 3px;
    height: 3px;
    box-shadow:
        5vw 80vh #ffddaa, 90vw 20vh #ffccdd, 40vw 50vh #ffffaa, 70vw 80vh #aabbff;
    animation-delay: 2s;
    opacity: 0.5;
}

/* --- Aurora Borealis --- */
.aurora-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    /* Only top half */
    z-index: 1;
    /* Same layer as stars */
    pointer-events: none;
    opacity: 0.6;
    mix-blend-mode: color-dodge;
    overflow: hidden;
}

.aurora {
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent 20%,
            rgba(0, 255, 128, 0.3) 40%,
            rgba(100, 50, 255, 0.3) 60%,
            transparent 80%);
    filter: blur(60px);
    animation: aurora-wave 10s infinite linear alternate;
}

.aurora-2 {
    animation-duration: 15s;
    animation-direction: alternate-reverse;
    background: linear-gradient(135deg,
            transparent 10%,
            rgba(50, 200, 255, 0.2) 30%,
            rgb(200, 0, 255, 0.2) 70%,
            transparent 90%);
}

@keyframes aurora-wave {
    0% {
        transform: rotate(0deg) translateY(0);
    }

    100% {
        transform: rotate(10deg) translateY(20px);
    }
}

@keyframes twinkle {
    0% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1.2);
    }
}