.cherry_blossom {
    overflow: hidden;
    position: relative;
    width: auto;
    height: 450px;

    perspective: 1000px;
}

.cherry_blossom .petal {
    position: absolute;
    background: linear-gradient(-45deg, #ffb6c1 0%, #ffc5d0 40%, #ffdfe6 80%);
    border-radius: 0% 92% 31% 59% / 7% 61% 28% 86%;


    z-index: 1;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    pointer-events: none;
    transform-style: preserve-3d;
    transition: transform 1000ms linear;
}

@keyframes fall {
    0% {
        top: 0;
        opacity: 1;
    }


    80% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0.2;
    }
}