/* ==========================================================
   Stars – Parallax stars and shooting stars
   ========================================================== */

/* Individual star element */
.parallax-star {
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
    pointer-events: none;
    animation: twinkle 3s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1);   filter: brightness(1); }
    25%       { opacity: 0.7; transform: scale(1.1); filter: brightness(1.2); }
    50%       { opacity: 1;   transform: scale(1.2); filter: brightness(1.5); }
    75%       { opacity: 0.8; transform: scale(1.1); filter: brightness(1.3); }
}

/* Star size variants */
.parallax-star.small {
    width: 1px;
    height: 1px;
    animation-duration: 2s;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.6);
}
.parallax-star.medium {
    width: 2px;
    height: 2px;
    animation-duration: 3s;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
}
.parallax-star.large {
    width: 3px;
    height: 3px;
    animation-duration: 4s;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 12px rgba(0, 163, 255, 0.3);
}

/* Shooting star (rare, desktop only – hidden on mobile via responsive.css) */
.shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: linear-gradient(45deg, #ffffff, #00a3ff);
    border-radius: 50%;
    opacity: 0;
    animation: shootingStar 4s linear infinite;
    animation-delay: var(--delay);
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

@keyframes shootingStar {
    0% {
        opacity: 0;
        transform: translateX(-100px) translateY(100px) scale(0);
    }
    5% {
        opacity: 1;
        transform: translateX(-80px) translateY(80px) scale(1);
        box-shadow: 0 0 10px #ffffff, -10px 10px 20px rgba(255,255,255,0.3);
    }
    15% {
        opacity: 1;
        transform: translateX(0px) translateY(0px) scale(1);
        box-shadow: 0 0 10px #ffffff, -20px 20px 30px rgba(255,255,255,0.3);
    }
    25% {
        opacity: 0.8;
        transform: translateX(80px) translateY(-80px) scale(0.8);
        box-shadow: 0 0 8px #ffffff, -30px 30px 40px rgba(255,255,255,0.2);
    }
    100% {
        opacity: 0;
        transform: translateX(200px) translateY(-200px) scale(0);
        box-shadow: none;
    }
}