/* =========================================
   LAVA RAIN - LAVA PIJAR JATUH
   Tidak mengubah layout utama
   ========================================= */

.lava-rain {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 999999;
}

/* Setiap batu lava */
.lava-rain i {
    position: absolute;
    top: -100px;

    width: 18px;
    height: 38px;

    border-radius: 50% 50% 60% 60%;

    background:
        radial-gradient(
            circle at 45% 65%,
            #fff7a0 0%,
            #ffd000 18%,
            #ff5a00 45%,
            #e00000 68%,
            #3b0800 100%
        );

    box-shadow:
        0 0 8px #ffef63,
        0 0 18px #ff7300,
        0 0 32px rgba(255, 20, 0, .8);

    animation:
        lava-fall 4.5s linear infinite,
        lava-fire .25s ease-in-out infinite alternate;
}


/* =========================================
   EKOR API
   ========================================= */

.lava-rain i::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 65%;

    width: 9px;
    height: 75px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: linear-gradient(
        to top,
        #ff3b00 0%,
        #ff8a00 25%,
        rgba(255, 200, 0, .65) 50%,
        transparent 100%
    );

    filter: blur(4px);

    z-index: -1;
}


/* Glow tambahan */
.lava-rain i::after {
    content: "";

    position: absolute;
    inset: -12px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(255, 90, 0, .35),
        transparent 70%
    );

    filter: blur(6px);
}


/* =========================================
   GERAK JATUH
   ========================================= */

@keyframes lava-fall {

    0% {
        transform:
            translate3d(0, -120px, 0)
            rotate(0deg);

        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    50% {
        transform:
            translate3d(80px, 55vh, 0)
            rotate(180deg);
    }

    95% {
        opacity: 1;
    }

    100% {
        transform:
            translate3d(140px, 115vh, 0)
            rotate(360deg);

        opacity: 0;
    }
}


/* Api berkedip */
@keyframes lava-fire {

    from {
        filter: brightness(.9);
    }

    to {
        filter: brightness(1.5);
    }
}


/* =========================================
   POSISI RANDOM
   ========================================= */

.lava-rain i:nth-child(1) {
    left: 3%;
    animation-delay: -1s;
    animation-duration: 4.2s;
}

.lava-rain i:nth-child(2) {
    left: 10%;
    animation-delay: -3.2s;
    animation-duration: 5.1s;
}

.lava-rain i:nth-child(3) {
    left: 17%;
    animation-delay: -.4s;
    animation-duration: 3.8s;
}

.lava-rain i:nth-child(4) {
    left: 24%;
    animation-delay: -2.6s;
    animation-duration: 5.4s;
}

.lava-rain i:nth-child(5) {
    left: 31%;
    animation-delay: -4s;
    animation-duration: 4.4s;
}

.lava-rain i:nth-child(6) {
    left: 38%;
    animation-delay: -1.8s;
    animation-duration: 5.7s;
}

.lava-rain i:nth-child(7) {
    left: 45%;
    animation-delay: -3.7s;
    animation-duration: 4.1s;
}

.lava-rain i:nth-child(8) {
    left: 52%;
    animation-delay: -.8s;
    animation-duration: 5.2s;
}

.lava-rain i:nth-child(9) {
    left: 59%;
    animation-delay: -2.1s;
    animation-duration: 4.6s;
}

.lava-rain i:nth-child(10) {
    left: 66%;
    animation-delay: -4.4s;
    animation-duration: 5.5s;
}

.lava-rain i:nth-child(11) {
    left: 73%;
    animation-delay: -1.3s;
    animation-duration: 4s;
}

.lava-rain i:nth-child(12) {
    left: 80%;
    animation-delay: -3.4s;
    animation-duration: 5.8s;
}

.lava-rain i:nth-child(13) {
    left: 87%;
    animation-delay: -.2s;
    animation-duration: 4.7s;
}

.lava-rain i:nth-child(14) {
    left: 93%;
    animation-delay: -2.8s;
    animation-duration: 5.3s;
}

.lava-rain i:nth-child(15) {
    left: 97%;
    animation-delay: -4.6s;
    animation-duration: 4.3s;
}


/* Variasi ukuran */

.lava-rain i:nth-child(3n) {
    width: 10px;
    height: 24px;
}

.lava-rain i:nth-child(4n) {
    width: 25px;
    height: 48px;
}

.lava-rain i:nth-child(5n) {
    width: 14px;
    height: 30px;
}


/* Mobile */

@media (max-width: 768px) {
    .lava-rain i {
        width: 12px;
        height: 28px;
    }
}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .lava-rain {
        display: none;
    }
}