.hearts-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

.heart {
    position: absolute;
    bottom: -100px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ff6b6b' d='M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.8;
    animation: float-up var(--duration) linear infinite;
}

@keyframes float-up {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translateY(-25vh) rotate(var(--rotate)) scale(var(--scale));
        opacity: 0.7;
    }
    50% {
        transform: translateY(-50vh) rotate(calc(var(--rotate) * 2)) scale(var(--scale));
        opacity: 0.5;
    }
    75% {
        transform: translateY(-75vh) rotate(calc(var(--rotate) * 3)) scale(var(--scale));
        opacity: 0.3;
    }
    100% {
        transform: translateY(-100vh) rotate(calc(var(--rotate) * 4)) scale(var(--scale));
        opacity: 0;
    }
}