:root {
  --primary-pink: #ff4d8d;
  --soft-pink: #ff85a2;
  --sweet-red: #e63946;
  --bg-gradient-1: #ffe6ea;
  --bg-gradient-2: #ffc2d1;
  --bg-gradient-3: #ffb3c6;
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.8);
  --text-color: #4a1525;
  --font-romantic: 'Dancing Script', cursive;
  --font-sans: 'Poppins', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  color: var(--text-color);
  min-height: 100vh;
  background: linear-gradient(-45deg, var(--bg-gradient-1), var(--bg-gradient-2), var(--bg-gradient-3), #ffccd5);
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
  overflow-x: hidden;
  position: relative;
}

/* Animazione di sfondo sfumato */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Contenitore Cuori Fluttuanti sullo Sfondo */
.hearts-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.floating-heart {
  position: absolute;
  color: var(--primary-pink);
  opacity: 0.6;
  filter: drop-shadow(0 0 5px rgba(255, 77, 141, 0.4));
  animation: floatUp linear infinite;
}

@keyframes floatUp {
  0% {
    transform: translateY(105vh) scale(0.3) rotate(0deg);
    opacity: 0;
  }
  20% { opacity: 0.8; }
  80% { opacity: 0.8; }
  100% {
    transform: translateY(-10vh) scale(1.2) rotate(360deg);
    opacity: 0;
  }
}