.fade-in { opacity: 0; animation: fadeIn 1s ease forwards; }
.delay-1 { animation-delay: 0.4s; }
.delay-2 { animation-delay: 0.8s; }
.delay-3 { animation-delay: 1.2s; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

/* Floating hearts background */
#floating-hearts { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.heart {
  position: absolute;
  width: 12px; height: 12px;
  background: linear-gradient(135deg, #ff92c2, #ffd2e5);
  transform: rotate(45deg);
  border-radius: 2px;
  opacity: 0.7;
  filter: drop-shadow(0 3px 8px rgba(255,146,194,0.28));
  animation: floatUp linear forwards;
  will-change: transform, opacity;
}
.heart::before, .heart::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  background: inherit;
  border-radius: 50%;
}
.heart::before { left: -6px; }
.heart::after { top: -6px; }

@keyframes floatUp {
  0% {
    transform: translate3d(var(--x0, 0px), 10vh, 0) rotate(45deg) scale(var(--scale, 1));
    opacity: 0;
  }
  25% {
    transform: translate3d(var(--x1, 6px), -15vh, 0) rotate(45deg) scale(var(--scale, 1));
    opacity: 0.75;
  }
  50% {
    transform: translate3d(var(--x2, -8px), -45vh, 0) rotate(45deg) scale(var(--scale, 1));
    opacity: 0.85;
  }
  75% {
    transform: translate3d(var(--x3, 10px), -80vh, 0) rotate(45deg) scale(var(--scale, 1.02));
    opacity: 0.75;
  }
  100% {
    transform: translate3d(var(--x4, 0px), -120vh, 0) rotate(45deg) scale(var(--scale, 1.06));
    opacity: 0;
  }
}