/* =====================================================
   FALLING FLOWER BACKGROUND
   ===================================================== */

#flower-background {
    position: fixed;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: 5;
}


/* Individual petals */

.flower-petal {

    position: absolute;

    top: -100px;

    width: var(--size);
    height: auto;

    opacity: var(--opacity);

    pointer-events: none;

    user-select: none;

    filter:
        drop-shadow(
            0 4px 7px rgba(80, 40, 20, 0.10)
        );

    animation:

        flowerFall
        var(--duration)
        linear
        var(--delay)
        infinite,

        flowerSway
        var(--sway-duration, 4s)
        ease-in-out
        var(--delay)
        infinite alternate;

}


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

@keyframes flowerFall {

    0% {

        transform:
            translate3d(0, -150px, 0)
            rotate(var(--rotation-start));

    }

    25% {

        transform:
            translate3d(
                calc(var(--wind) * 0.4),
                25vh,
                0
            )
            rotate(100deg);

    }

    50% {

        transform:
            translate3d(
                calc(var(--wind) * -0.3),
                50vh,
                0
            )
            rotate(190deg);

    }

    75% {

        transform:
            translate3d(
                calc(var(--wind) * 0.5),
                75vh,
                0
            )
            rotate(280deg);

    }

    100% {

        transform:
            translate3d(
                calc(var(--wind) * -0.3),
                115vh,
                0
            )
            rotate(380deg);

    }

}


/* =====================================================
   SIDE-TO-SIDE MOVEMENT
   ===================================================== */

@keyframes flowerSway {

    from {
        margin-left: -15px;
    }

    to {
        margin-left: 15px;
    }

}


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

@media (max-width: 767px) {

    #flower-background {
        z-index: 5;
    }

    .flower-petal {

        width: var(--size);

        filter: none;

    }

}


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

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

    #flower-background {
        display: none;
    }

}