/* Layer 2: Stars (z-index 2) */

.stars-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* Allow interaction through stars */
    pointer-events: none;
}

/* Base style for all stars */
.star {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(closest-side, white 0%, transparent 70%);
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* Size variants */
.star-5 {
    width: 5px;
    height: 5px;
}

.star-6 {
    width: 6px;
    height: 6px;
}

.star-7 {
    width: 7px;
    height: 7px;
}

.star-8 {
    width: 8px;
    height: 8px;
}

/* Color-change animation (white <-> yellow) */
.color-cycle {
    background: radial-gradient(closest-side, white 0%, transparent 70%);
    animation: star-color-cycle 0.5s infinite alternate;
}

/* Flicker animation (smooth fade-out & in) */
.flicker {
    animation: star-flicker 2s infinite;
    animation-timing-function: ease-in-out;
}