/* Optimized Sparkle Effect */
.sparkle {
    position: fixed;
    width: 15px;  
    aspect-ratio: 1;
    background: #F8CA00;
    clip-path: polygon(50% 0,79% 90%,2% 35%,98% 35%,21% 90%); 
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: sparkleAnim 7s linear forwards;
}

@keyframes sparkleAnim {
    0% {
        opacity: 0;
    }
    30% {
        opacity: var(--sparkle-opacity, 1); /* Each sparkle gets its own brightness */
    }
    60% {
        opacity: calc(var(--sparkle-opacity, 1) * 0.6); /* Gradually dim */
    }
    100% {
        opacity: 0; /* Fade out completely */
    }
}