/* Star field container */
.star-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none; /* Allows clicks to pass through to other elements */
}

/* Individual stars */
.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%; /* Make stars circular */
    box-shadow: 0 0 2px white, 0 0 20px white; /* Add glow effect */
}

/* Optional twinkling animation */
@keyframes twinkling {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.twinkling {
    animation: twinkling 2s infinite ease-in-out;
}

.shooting-star {
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 6px 3px white; /* Creates initial glow effect */
    opacity: 1;
}

/* Shooting star animation */
@keyframes shoot {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    80% {
        transform: translate(var(--translateX), var(--translateY)) scale(1.5);
        opacity: 0.7;
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--translateX) * 1.5), calc(var(--translateY) * 1.5)) scale(1.8);
    }
}

.shooting-star.shoot {
    animation: shoot 0.25s ease-out forwards;
}