* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Poppins", sans-serif;
}

.romantic-bg {
  background: linear-gradient(135deg, #ffe4ef 0%, #ffd4e5 35%, #ffc1da 65%, #ffb1ce 100%);
}

.card-shell {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
}

.heart-beat {
  animation: heartbeat 1.1s ease-in-out infinite;
}

@keyframes heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.05);
  }
  40% {
    transform: scale(0.98);
  }
  60% {
    transform: scale(1.08);
  }
}

.floating-hearts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.floating-hearts span {
  position: absolute;
  bottom: -10%;
  font-size: 1.3rem;
  opacity: 0.25;
  animation-name: float-up;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.floating-hearts span:nth-child(1) {
  left: 8%;
  animation-duration: 9s;
  animation-delay: 0s;
}

.floating-hearts span:nth-child(2) {
  left: 22%;
  animation-duration: 12s;
  animation-delay: 1.5s;
}

.floating-hearts span:nth-child(3) {
  left: 38%;
  animation-duration: 10s;
  animation-delay: 0.5s;
}

.floating-hearts span:nth-child(4) {
  left: 58%;
  animation-duration: 13s;
  animation-delay: 2s;
}

.floating-hearts span:nth-child(5) {
  left: 76%;
  animation-duration: 11s;
  animation-delay: 1s;
}

.floating-hearts span:nth-child(6) {
  left: 90%;
  animation-duration: 14s;
  animation-delay: 2.5s;
}

@keyframes float-up {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.35;
  }
  100% {
    transform: translateY(-120vh) scale(1.2);
    opacity: 0;
  }
}