/* Star Animations */
.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    will-change: transform;
}

.star.small {
    width: 0.3px;
    height: 0.3px;
    box-shadow: 0 0 0.5px white;
}

.star.medium {
    width: 1px;
    height: 1px;
    box-shadow: 0 0 2px white, 0 0 4px rgba(255, 255, 255, 0.4);
}

.star.large {
    width: 2px;
    height: 2px;
    box-shadow: 0 0 4px white, 0 0 8px rgba(255, 255, 255, 0.5), 0 0 12px rgba(255, 255, 255, 0.3);
}

.star.twinkle {
    animation: twinkle 3s ease-in-out infinite;
}

.star.bright-twinkle {
    animation: brightTwinkle 2.8s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
}

.star.red-twinkle {
    animation: redTwinkle 3.2s ease-in-out infinite;
    will-change: filter, opacity, background-color;
}

.star.bright-red-twinkle {
    animation: brightRedTwinkle 3s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(255, 120, 120, 0.9)) drop-shadow(0 0 12px rgba(255, 120, 120, 0.6));
    will-change: filter, opacity, background-color;
}

.star.orange-twinkle {
    animation: orangeTwinkle 3.2s ease-in-out infinite;
    will-change: filter, opacity, background-color;
}

.star.bright-orange-twinkle {
    animation: brightOrangeTwinkle 3s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(255, 180, 100, 0.85)) drop-shadow(0 0 12px rgba(255, 180, 100, 0.55));
    will-change: filter, opacity, background-color;
}

.star.yellow-twinkle {
    animation: yellowTwinkle 3.2s ease-in-out infinite;
    will-change: filter, opacity, background-color;
}

.star.bright-yellow-twinkle {
    animation: brightYellowTwinkle 3s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(255, 240, 140, 0.85)) drop-shadow(0 0 12px rgba(255, 240, 140, 0.55));
    will-change: filter, opacity, background-color;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.2;
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4));
    }
    25% {
        opacity: 0.8;
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
    }
    75% {
        opacity: 0.6;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
    }
}

@keyframes brightTwinkle {
    0%, 100% {
        opacity: 0.3;
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
    }
    25% {
        opacity: 0.95;
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.8));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 14px rgba(255, 255, 255, 1)) drop-shadow(0 0 24px rgba(255, 255, 255, 0.9));
    }
    75% {
        opacity: 0.85;
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.7));
    }
}

@keyframes redTwinkle {
    0%, 100% {
        opacity: 0.25;
        filter: drop-shadow(0 0 1.8px rgba(255, 100, 100, 0.28));
        background-color: rgba(255, 255, 255, 0.98);
    }
    25% {
        opacity: 0.87;
        filter: drop-shadow(0 0 3.5px rgba(255, 90, 90, 0.56));
        background-color: rgba(255, 185, 185, 0.66);
    }
    50% {
        opacity: 0.96;
        filter: drop-shadow(0 0 4.5px rgba(255, 90, 90, 0.7));
        background-color: rgba(255, 168, 168, 0.74);
    }
    75% {
        opacity: 0.74;
        filter: drop-shadow(0 0 3px rgba(255, 100, 100, 0.5));
        background-color: rgba(255, 185, 185, 0.66);
    }
}

@keyframes brightRedTwinkle {
    0%, 100% {
        opacity: 0.36;
        filter: drop-shadow(0 0 3.5px rgba(255, 120, 120, 0.55));
        background-color: rgba(255, 255, 255, 0.98);
    }
    25% {
        opacity: 0.96;
        filter: drop-shadow(0 0 6.5px rgba(255, 120, 120, 0.78)) drop-shadow(0 0 12.5px rgba(255, 120, 120, 0.55));
        background-color: rgba(255, 188, 188, 0.68);
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 8.5px rgba(255, 120, 120, 0.88)) drop-shadow(0 0 14.5px rgba(255, 120, 120, 0.64));
        background-color: rgba(255, 174, 174, 0.74);
    }
    75% {
        opacity: 0.86;
        filter: drop-shadow(0 0 5.5px rgba(255, 120, 120, 0.7)) drop-shadow(0 0 10.5px rgba(255, 120, 120, 0.5));
        background-color: rgba(255, 188, 188, 0.68);
    }
}

@keyframes orangeTwinkle {
    0%, 100% {
        opacity: 0.25;
        filter: drop-shadow(0 0 1.6px rgba(255, 170, 90, 0.26));
        background-color: rgba(255, 255, 255, 0.98);
    }
    25% {
        opacity: 0.86;
        filter: drop-shadow(0 0 3.2px rgba(255, 160, 80, 0.52));
        background-color: rgba(255, 205, 160, 0.6);
    }
    50% {
        opacity: 0.95;
        filter: drop-shadow(0 0 4px rgba(255, 160, 80, 0.68));
        background-color: rgba(255, 195, 140, 0.68);
    }
    75% {
        opacity: 0.72;
        filter: drop-shadow(0 0 2.5px rgba(255, 170, 90, 0.48));
        background-color: rgba(255, 205, 160, 0.6);
    }
}

@keyframes brightOrangeTwinkle {
    0%, 100% {
        opacity: 0.36;
        filter: drop-shadow(0 0 3.2px rgba(255, 180, 100, 0.52));
        background-color: rgba(255, 255, 255, 0.98);
    }
    25% {
        opacity: 0.96;
        filter: drop-shadow(0 0 6px rgba(255, 180, 100, 0.75)) drop-shadow(0 0 11px rgba(255, 180, 100, 0.52));
        background-color: rgba(255, 210, 170, 0.64);
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(255, 180, 100, 0.85)) drop-shadow(0 0 13px rgba(255, 180, 100, 0.6));
        background-color: rgba(255, 200, 150, 0.7);
    }
    75% {
        opacity: 0.86;
        filter: drop-shadow(0 0 5px rgba(255, 180, 100, 0.65)) drop-shadow(0 0 9px rgba(255, 180, 100, 0.46));
        background-color: rgba(255, 210, 170, 0.64);
    }
}

@keyframes yellowTwinkle {
    0%, 100% {
        opacity: 0.25;
        filter: drop-shadow(0 0 1.4px rgba(255, 240, 140, 0.24));
        background-color: rgba(255, 255, 255, 0.98);
    }
    25% {
        opacity: 0.85;
        filter: drop-shadow(0 0 3px rgba(255, 235, 130, 0.48));
        background-color: rgba(255, 245, 200, 0.55);
    }
    50% {
        opacity: 0.95;
        filter: drop-shadow(0 0 4px rgba(255, 235, 130, 0.64));
        background-color: rgba(255, 240, 180, 0.65);
    }
    75% {
        opacity: 0.72;
        filter: drop-shadow(0 0 2.2px rgba(255, 240, 140, 0.44));
        background-color: rgba(255, 245, 200, 0.55);
    }
}

@keyframes brightYellowTwinkle {
    0%, 100% {
        opacity: 0.36;
        filter: drop-shadow(0 0 3px rgba(255, 240, 140, 0.5));
        background-color: rgba(255, 255, 255, 0.98);
    }
    25% {
        opacity: 0.96;
        filter: drop-shadow(0 0 5.6px rgba(255, 240, 140, 0.72)) drop-shadow(0 0 10.5px rgba(255, 240, 140, 0.5));
        background-color: rgba(255, 248, 210, 0.62);
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 7.5px rgba(255, 240, 140, 0.82)) drop-shadow(0 0 12.5px rgba(255, 240, 140, 0.58));
        background-color: rgba(255, 246, 195, 0.68);
    }
    75% {
        opacity: 0.86;
        filter: drop-shadow(0 0 4.5px rgba(255, 240, 140, 0.62)) drop-shadow(0 0 9px rgba(255, 240, 140, 0.45));
        background-color: rgba(255, 248, 210, 0.62);
    }
}

@keyframes drift-right {
    0% {
        transform: translateX(0px) translateY(0px);
    }
    100% {
        transform: translateX(200vw) translateY(0px);
    }
}

@keyframes drift-left {
    0% {
        transform: translateX(0px) translateY(0px);
    }
    100% {
        transform: translateX(-200vw) translateY(0px);
    }
}

@keyframes drift-up {
    0% {
        transform: translateX(0px) translateY(0px);
    }
    100% {
        transform: translateX(0px) translateY(-200vh);
    }
}

@keyframes drift-down {
    0% {
        transform: translateX(0px) translateY(0px);
    }
    100% {
        transform: translateX(0px) translateY(200vh);
    }
}

.nebula {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: -1;
    opacity: 0;
}