#storm-effect {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 999999;
    opacity: 1;
    visibility: visible;
    isolation: isolate;

    
    animation: none;
}


#storm-effect::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(162,73,150,0.22),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            rgba(18,5,16,0.72),
            rgba(0,0,0,0.48)
        );

    backdrop-filter: brightness(0.58) contrast(1.08);
    -webkit-backdrop-filter: brightness(0.58) contrast(1.08);

    transition: background 0.15s ease;
}


#storm-effect.flash::before {
    animation: screenLightning 0.42s ease-out;
}


#storm-effect.shake {
    animation: stormShake 0.28s linear;
}




.storm-cloud {
    position: absolute;
    z-index: 2;

    top: -15%;
    left: -25%;

    width: 150%;
    height: 65%;

    opacity: 0.65;
    filter: blur(35px);

    background:
        radial-gradient(
            ellipse at 20% 50%,
            rgba(106,47,97,0.78),
            transparent 37%
        ),
        radial-gradient(
            ellipse at 50% 30%,
            rgba(72,32,66,0.85),
            transparent 42%
        ),
        radial-gradient(
            ellipse at 80% 45%,
            rgba(124,56,113,0.55),
            transparent 35%
        );

    animation: cloudMove 7s ease-in-out infinite alternate;
}

.storm-fog {
    position: absolute;
    z-index: 3;

    left: -30%;
    bottom: -8%;

    width: 160%;
    height: 45%;

    opacity: 0.27;
    filter: blur(25px);

    background:
        radial-gradient(
            ellipse at center,
            rgba(235,210,232,0.48),
            transparent 65%
        );

    animation: fogMove 5s linear infinite;
}




.rain-drop {
    position: absolute;
    z-index: 5;

    top: -180px;

    width: 1px;

    border-radius: 50px;

    transform: rotate(13deg);
    transform-origin: center;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(253,217,248,0.95)
    );

    filter:
        drop-shadow(
            0 0 2px rgba(251,189,245,0.55)
        );

    animation: rainFall linear infinite;
}



.rain-drop.rain-heavy {
    z-index: 7;

    width: 2px;

    filter:
        blur(0.25px)
        drop-shadow(
            0 0 3px rgba(253,212,249,0.7)
        );
}



.rain-drop.rain-light {
    z-index: 4;

    width: 1px;

    opacity: 0.35;

    filter: blur(0.5px);
}




.lightning-bolt {
    position: absolute;
    z-index: 10;

    top: -5%;

    width: 7px;
    height: 62vh;

    opacity: 0;

    transform-origin: top center;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,1),
        rgba(251,184,244,0.95),
        rgba(249,136,233,0)
    );

    clip-path: polygon(
        46% 0%,
        100% 0%,
        60% 29%,
        92% 29%,
        36% 63%,
        68% 63%,
        0% 100%,
        25% 57%,
        4% 57%,
        41% 25%,
        18% 25%
    );

    filter:
        drop-shadow(0 0 5px rgba(255,255,255,1))
        drop-shadow(0 0 14px rgba(248,132,234,0.95))
        drop-shadow(0 0 30px rgba(247,98,224,0.75));
}

.lightning-bolt.active {
    animation: boltFlash 0.48s ease-out;
}



.lightning-branch {
    position: absolute;
    z-index: 9;

    width: 3px;
    height: 25vh;

    opacity: 0;

    transform-origin: top center;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.95),
        rgba(250,155,238,0)
    );

    clip-path: polygon(
        40% 0,
        100% 0,
        58% 35%,
        90% 35%,
        12% 100%,
        42% 48%,
        0 48%
    );

    filter:
        drop-shadow(0 0 4px white)
        drop-shadow(
            0 0 12px rgba(247,108,231,0.8)
        );
}

.lightning-branch.active {
    animation: branchFlash 0.42s ease-out;
}




.rain-splash {
    position: absolute;
    z-index: 8;

    bottom: 0;

    width: 16px;
    height: 5px;

    opacity: 0;

    border:
        1px solid rgba(253,212,248,0.75);

    border-top-color: transparent;

    border-radius: 50%;

    animation:
        splashEffect 0.65s ease-out forwards;
}




@keyframes rainFall {

    0% {
        transform:
            translate3d(-80px, -180px, 0)
            rotate(13deg);
    }

    100% {
        transform:
            translate3d(110px, 125vh, 0)
            rotate(13deg);
    }
}




@keyframes screenLightning {

    0% {
        background:
            rgba(255,255,255,0.85);

        backdrop-filter:
            brightness(1.8);
    }

    12% {
        background:
            rgba(251,184,244,0.45);
    }

    25% {
        background:
            rgba(18,5,16,0.72);
    }

    38% {
        background:
            rgba(255,255,255,0.55);

        backdrop-filter:
            brightness(1.35);
    }

    55% {
        background:
            rgba(72,33,66,0.6);
    }

    100% {
        background:
            linear-gradient(
                180deg,
                rgba(18,5,16,0.72),
                rgba(0,0,0,0.48)
            );

        backdrop-filter:
            brightness(0.58);
    }
}




@keyframes boltFlash {

    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    14% {
        opacity: 0.2;
    }

    22% {
        opacity: 1;
    }

    42% {
        opacity: 0.85;
    }

    100% {
        opacity: 0;
    }
}




@keyframes branchFlash {

    0%,
    8% {
        opacity: 0;
    }

    14% {
        opacity: 0.95;
    }

    34% {
        opacity: 0.35;
    }

    48% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}




@keyframes cloudMove {

    from {
        transform:
            translate3d(-3%, 0, 0)
            scale(1);
    }

    to {
        transform:
            translate3d(5%, 4%, 0)
            scale(1.08);
    }
}




@keyframes fogMove {

    from {
        transform:
            translateX(-4%);
    }

    to {
        transform:
            translateX(10%);
    }
}




@keyframes splashEffect {

    0% {
        opacity: 0.9;

        transform:
            scale(0.25)
            translateY(4px);
    }

    100% {
        opacity: 0;

        transform:
            scale(2.1)
            translateY(-10px);
    }
}




@keyframes stormShake {

    0%,
    100% {
        transform:
            translate(0, 0);
    }

    20% {
        transform:
            translate(-3px, 2px);
    }

    40% {
        transform:
            translate(3px, -2px);
    }

    60% {
        transform:
            translate(-2px, -1px);
    }

    80% {
        transform:
            translate(2px, 1px);
    }
}




@media (max-width: 768px) {

    .storm-cloud {
        opacity: 0.5;
        filter: blur(25px);
    }

    .lightning-bolt {
        height: 48vh;
        width: 6px;
    }

}




@media (prefers-reduced-motion: reduce) {

    .rain-drop,
    .storm-cloud,
    .storm-fog {
        animation-duration: 2s !important;
    }

}