/* ==================================================
   CHIBI'S SAKURA RAIN
   ================================================== */


#sakura-rain {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: 50;
}


/* ==================================================
   PETAL
   ================================================== */

.sakura-petal {
    position: absolute;

    top: -45px;

    left: 0;

    width: var(--petal-size);
    height: calc(var(--petal-size) * 0.72);

    opacity: var(--petal-opacity);

    background:
        linear-gradient(
            135deg,
            #fff4f7 0%,
            #ffd6e2 35%,
            #ffb7c5 72%,
            #e96c99 100%
        );

    border:
        1px solid rgba(151, 43, 80, 0.42);

    border-radius:
        80% 18% 75% 22%;

    transform-origin:
        center;

    box-shadow:
        0 0 3px rgba(255, 183, 197, 0.35);

    animation:
        sakura-drop
        var(--fall-speed)
        linear
        var(--fall-delay)
        infinite;

    will-change:
        transform;
}


/* little notch so it reads more like a blossom petal */

.sakura-petal::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 44%;

    width: 22%;
    height: 25%;

    background:
        #ffb7c5;

    border-radius:
        0 0 70% 70%;
}


/* pale highlight */

.sakura-petal::after {
    content: "";

    position: absolute;

    left: 21%;
    top: 18%;

    width: 24%;
    height: 16%;

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

    border-radius:
        50%;

    transform:
        rotate(-25deg);
}


/* ==================================================
   FALLING
   ================================================== */

@keyframes sakura-drop {

    0% {

        transform:
            translate3d(
                var(--start-x),
                -60px,
                0
            )
            rotate(0deg)
            rotateY(0deg);

    }


    20% {

        transform:
            translate3d(
                calc(
                    var(--start-x)
                    + var(--drift-one)
                ),
                20vh,
                0
            )
            rotate(90deg)
            rotateY(100deg);

    }


    40% {

        transform:
            translate3d(
                calc(
                    var(--start-x)
                    + var(--drift-two)
                ),
                42vh,
                0
            )
            rotate(175deg)
            rotateY(190deg);

    }


    60% {

        transform:
            translate3d(
                calc(
                    var(--start-x)
                    + var(--drift-three)
                ),
                64vh,
                0
            )
            rotate(260deg)
            rotateY(280deg);

    }


    80% {

        transform:
            translate3d(
                calc(
                    var(--start-x)
                    + var(--drift-four)
                ),
                86vh,
                0
            )
            rotate(355deg)
            rotateY(365deg);

    }


    100% {

        transform:
            translate3d(
                calc(
                    var(--start-x)
                    + var(--drift-five)
                ),
                112vh,
                0
            )
            rotate(470deg)
            rotateY(480deg);

    }

}


/* ==================================================
   SMALLER SCREEN
   ================================================== */

@media (max-width: 700px) {

    .sakura-petal {
        box-shadow: none;
    }

}


/* ==================================================
   ACCESSIBILITY
   ================================================== */

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

    .sakura-petal {
        animation: none;

        display: none;
    }

}