/* Stars Container */
#starsContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2000;
}

/* Individual star — translucent glass fill (matches leaves) */
.star {
    position: absolute;
    width: var(--star-size, 17px);
    height: var(--star-size, 17px);
    background: radial-gradient(
        circle at 32% 28%,
        rgba(255, 255, 255, 0.65) 0%,
        rgba(var(--primary-color-rgb), 0.35) 42%,
        rgba(var(--primary-color-rgb), 0.14) 100%
    );
    mask-image: url('assets/star.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('assets/star.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    transform-origin: center;
    will-change: transform, opacity;
    opacity: 0;
    filter: drop-shadow(0 0 6px rgba(var(--primary-color-rgb), 0.35));
}

/* Twinkling animation */
@keyframes twinkle {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: var(--star-twinkle-peak, 0.68);
    }
    100% {
        transform: scale(0.8);
        opacity: 0;
    }
}

/* Star animations */
.star {
    animation: twinkle var(--twinkle-duration, 3s) ease-in-out infinite;
    animation-delay: var(--twinkle-delay, 0s);
}