/* Hujan Scatter KL108 */
.kl108-scatter-rain {
    position: fixed;
    inset: 0;
    z-index: 8;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

.kl108-scatter-rain span {
    position: absolute;
    top: -100px;
    left: var(--x);
    width: var(--size);
    aspect-ratio: 1;
    opacity: 0;

    background:
        url("https://ik.imagekit.io/kl108/mahjong-scatter.png")
        center / contain no-repeat;

    filter:
        drop-shadow(0 0 5px rgba(255, 215, 90, 0.9))
        drop-shadow(0 0 12px rgba(255, 174, 0, 0.65));

    will-change: transform, opacity;

    animation:
        kl108-scatter-fall var(--duration) linear infinite,
        kl108-scatter-glow 2.4s ease-in-out infinite alternate;

    animation-delay: var(--delay);
}

@keyframes kl108-scatter-fall {
    0% {
        opacity: 0;
        transform:
            translate3d(0, -120px, 0)
            rotate(0deg)
            scale(0.8);
    }

    10% {
        opacity: 0.9;
    }

    85% {
        opacity: 0.85;
    }

    100% {
        opacity: 0;
        transform:
            translate3d(var(--drift), calc(100vh + 180px), 0)
            rotate(320deg)
            scale(1);
    }
}

@keyframes kl108-scatter-glow {
    from {
        filter:
            drop-shadow(0 0 4px rgba(255, 224, 120, 0.7))
            drop-shadow(0 0 8px rgba(212, 143, 0, 0.45));
    }

    to {
        filter:
            drop-shadow(0 0 7px rgba(255, 235, 150, 1))
            drop-shadow(0 0 16px rgba(255, 174, 0, 0.78));
    }
}

/* Optimasi tablet dan mobile */
@media (max-width: 768px) {
    .kl108-scatter-rain span {
        width: min(var(--size), 44px);
        filter:
            drop-shadow(0 0 4px rgba(255, 215, 90, 0.8))
            drop-shadow(0 0 8px rgba(255, 174, 0, 0.5));
    }

    /* Kurangi jumlah objek pada perangkat kecil */
    .kl108-scatter-rain span:nth-child(n + 11) {
        display: none;
    }
}

/* Optimasi layar sangat kecil */
@media (max-width: 480px) {
    .kl108-scatter-rain span {
        width: min(var(--size), 36px);
    }

    .kl108-scatter-rain span:nth-child(n + 9) {
        display: none;
    }
}

/* Hormati pengaturan pengurangan animasi pengguna */
@media (prefers-reduced-motion: reduce) {
    .kl108-scatter-rain {
        display: none;
    }
}