#sakura-container {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}


.sakura {
    position: absolute;

    top: -10%;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        #f9c2c2 40%,
        transparent 70%
    );

    opacity: 0.8;

    pointer-events: none;

    animation: fall var(--duration) linear;
}


@keyframes fall {

    0% {
        transform:
            translateX(0)
            translateY(0)
            rotate(0deg);

        opacity: 0.5;
    }

    25% {
        transform:
            translateX(calc(var(--sway) * 0.25))
            translateY(25vh)
            rotate(calc(var(--spin) * 0.5));

        opacity: 0.4;
    }

    50% {
        transform:
            translateX(calc(var(--sway) * 0.5))
            translateY(55vh)
            rotate(var(--spin));

        opacity: 0.3;
    }

    75% {
        transform:
            translateX(calc(var(--sway) * 0.75))
            translateY(85vh)
            rotate(calc(var(--spin) * 1.5));

        opacity: 0.1;
    }

    100% {
        transform:
            translateX(var(--sway))
            translateY(130vh)
            rotate(calc(var(--spin) * 2));

        opacity: 0;
    }
}