/* =========================================================
   BRAVE TRADER — DIZU WEATHER EXPERIENCE
========================================================= */

#dizu-weather {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 9000;

    pointer-events: none;

    overflow: hidden;

    opacity: 0;

    transition:
        opacity 1.2s ease;

    contain: strict;

}


#dizu-weather.weather-active {

    opacity: 1;

}


/* =========================================================
   SKY
========================================================= */

.weather-sky {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(180, 205, 225, 0.14),
            rgba(225, 235, 242, 0.06)
        );

    opacity: 0;

    transition:
        opacity 2s ease;

}


.weather-clouding .weather-sky {

    opacity: 1;

}


/* =========================================================
   SUN
========================================================= */

.weather-sun {

    position: absolute;

    top: 7%;

    right: 10%;

    width: 105px;
    height: 105px;

    opacity: 0;

    transform:
        translateY(-15px)
        scale(0.8);

    transition:
        opacity 2s ease,
        transform 3s ease;

    will-change:
        transform,
        opacity;

}


.weather-active .weather-sun {

    opacity: 0.95;

    transform:
        translateY(0)
        scale(1);

}


.sun-core {

    position: absolute;

    inset: 22px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #fffdf0 0%,
            #f7d77a 45%,
            #e6b84e 100%
        );

    box-shadow:
        0 0 30px
        rgba(238, 196, 91, 0.45),

        0 0 80px
        rgba(238, 196, 91, 0.25);

}


.sun-glow {

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(239, 197, 89, 0.22),
            transparent 68%
        );

}


.weather-clouding .weather-sun {

    transform:
        translateY(18px)
        scale(0.88);

    opacity: 0.58;

}


.weather-sunny .weather-sun {

    transform:
        translateY(0)
        scale(1.05);

    opacity: 1;

}


/* =========================================================
   CLOUDS
========================================================= */

.weather-cloud {

    position: absolute;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.94),
            rgba(190,202,212,0.76)
        );

    opacity: 0;

    transition:
        opacity 2.5s ease;

    will-change:
        transform;

    animation:
        cloudWind 22s ease-in-out infinite alternate;

}


.weather-cloud::before,
.weather-cloud::after {

    content: "";

    position: absolute;

    border-radius: 50%;

    background: inherit;

}


.cloud-one {

    width: 250px;
    height: 58px;

    top: 10%;

    right: 5%;

}


.cloud-one::before {

    width: 105px;
    height: 105px;

    left: 38px;
    bottom: 8px;

}


.cloud-one::after {

    width: 78px;
    height: 78px;

    right: 35px;
    bottom: 8px;

}


.cloud-two {

    width: 300px;
    height: 68px;

    top: 19%;

    left: -50px;

    animation-duration:
        27s;

}


.cloud-two::before {

    width: 115px;
    height: 115px;

    left: 48px;
    bottom: 5px;

}


.cloud-two::after {

    width: 90px;
    height: 90px;

    right: 45px;
    bottom: 5px;

}


.cloud-three {

    width: 210px;
    height: 48px;

    top: 28%;

    right: 24%;

    animation-duration:
        31s;

}


.cloud-three::before {

    width: 82px;
    height: 82px;

    left: 35px;
    bottom: 4px;

}


.cloud-three::after {

    width: 68px;
    height: 68px;

    right: 30px;
    bottom: 4px;

}


.weather-clouding .weather-cloud {

    opacity: 0.78;

}


@keyframes cloudWind {

    from {

        transform:
            translate3d(-18px, 0, 0);

    }

    to {

        transform:
            translate3d(24px, 4px, 0);

    }

}


/* =========================================================
   MIST
========================================================= */

.weather-mist {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            ellipse at 50% 45%,
            rgba(220,231,238,0.10),
            transparent 62%
        );

    opacity: 0;

    filter:
        blur(8px);

    transition:
        opacity 2s ease;

}


.weather-raining .weather-mist {

    opacity: 0.45;

}


/* =========================================================
   RAIN
========================================================= */

.weather-rain {

    position: absolute;

    inset: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        opacity 1s ease;

}


.weather-raining .weather-rain {

    opacity: 1;

}


.rain-drop {

    position: absolute;

    top: -70px;

    width: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0),
            rgba(145,190,225,0.78)
        );

    box-shadow:
        0 0 5px
        rgba(130,180,215,0.15);

    animation:
        dizuRainFall
        1.15s
        linear
        infinite;

    will-change:
        transform;

}


@keyframes dizuRainFall {

    from {

        transform:
            translate3d(
                0,
                -70px,
                0
            );

    }

    to {

        transform:
            translate3d(
                -18px,
                115vh,
                0
            );

    }

}


/* =========================================================
   GLASS
========================================================= */

.weather-glass {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255,255,255,0.06),
            transparent 28%
        ),

        radial-gradient(
            circle at 70% 60%,
            rgba(170,205,225,0.06),
            transparent 32%
        );

    opacity: 0;

    transition:
        opacity 1.5s ease;

}


.weather-raining .weather-glass {

    opacity: 1;

}


/* =========================================================
   LIGHTNING
========================================================= */

.weather-lightning {

    position: absolute;

    inset: 0;

    background:
        rgba(255,255,255,0.7);

    opacity: 0;

}


.lightning-flash {

    animation:
        lightningFlash
        0.32s
        ease-out;

}


@keyframes lightningFlash {

    0% {

        opacity: 0;

    }

    25% {

        opacity: 0.22;

    }

    45% {

        opacity: 0;

    }

    65% {

        opacity: 0.12;

    }

    100% {

        opacity: 0;

    }

}


/* =========================================================
   CLEARING
========================================================= */

.weather-clearing .weather-rain {

    opacity: 0;

}


.weather-clearing .weather-mist {

    opacity: 0;

}


.weather-clearing .weather-glass {

    opacity: 0;

}


.weather-clearing .weather-cloud {

    opacity: 0.28;

}


.weather-sunny .weather-sky {

    opacity: 0;

}


.weather-sunny .weather-cloud {

    opacity: 0.20;

}


.weather-sunny .weather-sun {

    filter:
        brightness(1.08);

}


/* =========================================================
   PAUSED
========================================================= */

.weather-paused *,
.weather-paused *::before,
.weather-paused *::after {

    animation-play-state:
        paused !important;

}


/* =========================================================
   FINISHED / SAFETY
========================================================= */

#dizu-weather.weather-finished {

    opacity: 0;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .weather-sun {

        width: 92px;
        height: 92px;

        top: 6%;

        right: 8%;

    }


    .cloud-one {

        top: 11%;

        right: -60px;

        transform:
            scale(0.82);

    }


    .cloud-two {

        top: 20%;

        left: -90px;

        transform:
            scale(0.80);

    }


    .cloud-three {

        top: 28%;

        right: 8%;

        transform:
            scale(0.72);

    }


    .rain-drop {

        width: 2.5px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    #dizu-weather *,
    #dizu-weather *::before,
    #dizu-weather *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}