/* 4. SPARKLES (JS Generated) */
.sparkle-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 12;
    pointer-events: none;
}
.sparkle {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px 2px #fff, 0 0 16px 4px #9333ea66;
    animation: twinkle var(--duration) ease-in-out infinite;
    opacity: 0.85;
    z-index: 3;
    transition: opacity 0.2s;
}
@media (max-width: 600px) {
    .sparkle {
        min-width: 6px;
        min-height: 6px;
        box-shadow: 0 0 8px 2px #fff, , 0 0 16px 4px #9333ea66;
        opacity: 0.9;
    }
}
@keyframes twinkle { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(0); opacity: 0; } }