/* === LAYER GLOBAL === */
.snow-wrap {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 9999;
}

/* kilatan langit sesekali (petir ambient) — lebih terang & luas */
.snow-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%,
            rgba(255, 255, 255, 1) 0%,
            rgba(210, 235, 255, 0.75) 25%,
            rgba(160, 200, 255, 0.35) 55%,
            transparent 80%);
    opacity: 0;
    animation: sky-flash 8s ease-in-out infinite;
    z-index: 1;
}

.snow-wrap#snow::before {
    animation-delay: 4s;
}

/* === HUJAN — kemiringan & arah jatuh selaras === */
.snowflake {
    position: absolute;
    top: -12vh;
    width: 1.5px;
    height: 18px;
    border-radius: 1px;
    background: linear-gradient(to bottom,
            rgba(210, 230, 255, 0) 0%,
            rgba(190, 220, 255, 0.55) 40%,
            rgba(160, 200, 255, 0.9) 100%);
    box-shadow: 0 0 4px rgba(150, 200, 255, 0.35);
    filter: none;
    opacity: 0.75;
    will-change: transform, opacity;
    --rain-angle: 16deg;
    --rain-x: 30vw;
    animation: rain-fall 0.85s linear infinite;
    animation-delay: var(--delay, 0s);
}

.snowflake.-sm {
    width: 1px;
    height: 12px;
    opacity: 0.45;
    --rain-angle: 14deg;
    --rain-x: 26vw;
    animation-duration: 1.05s;
}

.snowflake.-lg {
    width: 2px;
    height: 26px;
    opacity: 0.9;
    --rain-angle: 18deg;
    --rain-x: 34vw;
    animation-duration: 0.65s;
}

/*
  rotate & translate ke arah yang sama (kanan-bawah),
  supaya tetesan tidak terlihat miring tapi jatuh lurus.
*/
@keyframes rain-fall {
    from {
        transform: translate3d(-8vw, -10vh, 0) rotate(var(--rain-angle));
        opacity: 0;
    }

    8% {
        opacity: 0.8;
    }

    to {
        transform: translate3d(var(--rain-x), 120vh, 0) rotate(var(--rain-angle));
        opacity: 0.35;
    }
}

@keyframes sky-flash {

    0%,
    86%,
    100% {
        opacity: 0;
    }

    87% {
        opacity: 0.75;
    }

    88% {
        opacity: 0.12;
    }

    89.5% {
        opacity: 1;
    }

    91% {
        opacity: 0.2;
    }

    92% {
        opacity: 0;
    }
}

/* === PETIR TEBAL (versi yang bagus) === */
.firework {
    position: absolute;
    width: 10px;
    height: 220px;
    border-radius: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 10000;
    background: linear-gradient(to bottom,
            #ffffff 0%,
            #e8f4ff 35%,
            #b8d8ff 100%);
    box-shadow:
        0 0 14px 4px rgba(220, 240, 255, 1),
        0 0 36px 10px rgba(160, 210, 255, 0.75),
        0 0 60px 18px rgba(120, 180, 255, 0.4);
    clip-path: polygon(38% 0%,
            62% 0%,
            55% 32%,
            82% 32%,
            30% 100%,
            42% 52%,
            18% 52%);
    animation: lightning-bolt 0.65s ease-out forwards;
    transform: translate(-50%, -20%) rotate(var(--bolt-rot, -8deg));
}

/* cabang petir tebal */
.firework::before {
    content: "";
    position: absolute;
    top: 22%;
    left: 50%;
    width: 7px;
    height: 100px;
    border-radius: 0;
    background: linear-gradient(to bottom, #fff, #b8d8ff);
    box-shadow:
        0 0 12px 3px rgba(220, 240, 255, 0.95),
        0 0 28px 8px rgba(150, 200, 255, 0.55);
    clip-path: polygon(30% 0%,
            70% 0%,
            78% 42%,
            100% 42%,
            35% 100%,
            50% 52%,
            12% 52%);
    transform: rotate(30deg);
    inset: auto;
}

.firework::after {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    width: 320px;
    height: 320px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(200, 230, 255, 0.45) 30%,
            rgba(150, 200, 255, 0.15) 55%,
            transparent 75%);
    pointer-events: none;
}

@keyframes lightning-bolt {
    0% {
        opacity: 0;
        filter: brightness(1);
    }

    6% {
        opacity: 1;
        filter: brightness(2.8);
    }

    16% {
        opacity: 0.2;
    }

    26% {
        opacity: 1;
        filter: brightness(2.4);
    }

    40% {
        opacity: 0.85;
    }

    70% {
        opacity: 0.35;
    }

    100% {
        opacity: 0;
        filter: brightness(1);
    }
}

/* HORMATI prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {

    .snow-wrap::before,
    .snowflake,
    .firework,
    .firework::before,
    .firework::after {
        animation: none !important;
        opacity: 0 !important;
    }
}