.mp-heart-cascade {
    position:fixed;
    z-index:9999;
    width:1px;
    height:1px;
    pointer-events:none;
}

.mp-heart {
    position:absolute;
    left:0;
    top:0;
    color:#ff5a8a;
    font-size:var(--heart-size);
    font-weight:900;
    text-shadow:0 10px 22px rgba(255,90,138,.34);
    animation:mp-heart-fall 1s ease-out forwards;
    animation-delay:var(--heart-delay);
}

@keyframes mp-heart-fall {
    0% {
        opacity:0;
        transform:translate(-50%, -10px) scale(.72) rotate(0deg);
    }

    18% {
        opacity:1;
    }

    100% {
        opacity:0;
        transform:translate(calc(-50% + var(--heart-x)), 220px) scale(1.1) rotate(22deg);
    }
}