.subscribe-hearts {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 12px;
  pointer-events: none;
  z-index: 1;
}

.subscribe-hearts span {
  position: absolute;
  top: -18px;
  font-size: 12px;
  opacity: 0.55;
  animation-name: fallHeart;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.subscribe-hearts span:nth-child(1) { left: 8%;  animation-delay: 0s;   animation-duration: 3.6s; transform: rotate(-18deg); }
.subscribe-hearts span:nth-child(2) { left: 24%; animation-delay: 0.8s; animation-duration: 4.1s; transform: rotate(12deg); }
.subscribe-hearts span:nth-child(3) { left: 39%; animation-delay: 1.6s; animation-duration: 3.9s; transform: rotate(-30deg); }
.subscribe-hearts span:nth-child(4) { left: 56%; animation-delay: 0.4s; animation-duration: 4.3s; transform: rotate(20deg); }
.subscribe-hearts span:nth-child(5) { left: 73%; animation-delay: 1.2s; animation-duration: 3.7s; transform: rotate(-10deg); }
.subscribe-hearts span:nth-child(6) { left: 88%; animation-delay: 2s;   animation-duration: 4.0s; transform: rotate(28deg); }

@keyframes fallHeart {
  0% {
    top: -18px;
    opacity: 0;
  }
  15% {
    opacity: 0.5;
  }
  85% {
    opacity: 0.5;
  }
  100% {
    top: 70px;
    opacity: 0;
  }
}