.path-card-img {
    max-height: 180px;
    object-fit: cover;
    width: 100%;
}
:root{
    --petal:rgba(247,163,200,0.6);
    --petal-dark:rgba(232,127,177,0.6);
    --petal-gloss:rgba(255,216,234,0.6);
}

.sakura{
    position:fixed;
    inset:0;
    pointer-events:none;
    perspective:800px;
    z-index:-1;
}
.petal{
    --size:14px;
    --dur:20s;
    --delay:0s;
    --amp: 18px;
    --spin: 1turn;
    position:absolute;
    top:-12vh;
    width:var(--size);
    height:calc(var(--size) * 1.45);
    transform-origin:50% 10%;
    animation:
        fall var(--dur) linear var(--delay) infinite,
        spin calc(var(--dur) * .9) linear var(--delay) infinite;
    opacity:1;
}
.petal::before,
.petal::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius: 45% 55% 70% 30% / 45% 35% 65% 55%;
    background: radial-gradient(60% 50% at 40% 30%, var(--petal-gloss), transparent 55%),
                radial-gradient(90% 90% at 60% 70%, var(--petal-dark), transparent 70%),
                var(--petal);
}
.petal::after{
    mask:
        radial-gradient(30% 20% at 50% 5%, transparent 45%, #000 46%);
}
@keyframes fall{
    0%{
        transform: translateX(var(--x, 50vw)) translateY(-20vh);
        opacity: 1;
    }
    50%{
        transform: translateX(calc(var(--x, 50vw) + var(--amp))) translateY(45vh);
        opacity: 0.9;
    }
    80%{
        transform: translateX(calc(var(--x, 50vw) - (var(--amp) / 2))) translateY(80vh);
        opacity: 0.7;
    }
    100%{
        transform: translateX(calc(var(--x, 50vw) + var(--amp))) translateY(112vh);
        opacity: 0;
    }
}
@keyframes spin{ to{ transform: rotateZ(var(--spin)); } }