#hearts-snow{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 999999;
}

.heart{
  position: absolute;
  top: -10vh;
  left: 0;
  font-size: 18px;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.15));
  opacity: 0.9;
  animation-name: fall, sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: 1, infinite;
}

@keyframes fall{
  to { transform: translate3d(var(--x-drift, 0px), 115vh, 0) rotate(var(--rot, 0deg)); }
}

@keyframes sway{
  0%,100% { margin-left: 0; }
  50% { margin-left: calc(var(--sway, 12px) * 1); }
}

@media (prefers-reduced-motion: reduce){
  .heart{ animation: none !important; display:none; }
}