/* ==========================================================================
   Romantic Memories Portal - Floating Background Balloons & Particles
   ========================================================================== */

/* Floating CSS Heart Background Elements */
.bg-decorations {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.floating-balloon {
  position: absolute;
  bottom: -60px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  opacity: 0.75;
  filter: drop-shadow(0 8px 12px rgba(233, 30, 99, 0.15));
  animation: floatUpward linear infinite;
}

.floating-balloon::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5px;
  height: 18px;
  background: rgba(141, 110, 99, 0.4);
}

.floating-balloon::before {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 4px solid currentColor;
}

@keyframes floatUpward {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.75;
  }
  90% {
    opacity: 0.75;
  }
  100% {
    transform: translateY(-115vh) rotate(15deg);
    opacity: 0;
  }
}

/* Click Sparkle Heart Animation */
.click-heart {
  position: fixed;
  pointer-events: none;
  font-size: 20px;
  z-index: 9999;
  user-select: none;
  animation: popAndFade 1.2s forwards cubic-bezier(0.12, 0.84, 0.5, 1.2);
}

@keyframes popAndFade {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
  }
  40% {
    opacity: 0.95;
    transform: translate(-50%, -80px) scale(1.4) rotate(var(--rot, 0deg));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -150px) scale(0.8) rotate(var(--rot, 0deg));
  }
}