/* ==========================================================================
   ROMANTIC ANIMATIONS & ATMOSPHERES
   Floating petals, subtle sparkles, heart pulses, and rain effects.
   ========================================================================== */

/* Heart Pulse */
@keyframes heartPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255, 77, 121, 0.4)); }
  50% { transform: scale(1.12); filter: drop-shadow(0 0 24px rgba(255, 77, 121, 0.8)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255, 77, 121, 0.4)); }
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
}

@keyframes softGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(255, 77, 121, 0.25); }
  50% { box-shadow: 0 0 35px rgba(255, 77, 121, 0.55); }
}

/* Floating Rose Petal Particle */
.floating-petal {
  position: fixed;
  pointer-events: none;
  z-index: 99;
  width: 18px;
  height: 24px;
  background: radial-gradient(circle at 35% 35%, #ffd2dc, #ff8ba7 70%, #ff527b);
  border-radius: 50% 0 50% 50%;
  opacity: 0.65;
  filter: drop-shadow(0 2px 6px rgba(255, 77, 121, 0.2));
  animation: fallPetal linear infinite;
}

@keyframes fallPetal {
  0% {
    top: -5%;
    transform: translateX(0) rotate(0deg) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 0.75;
  }
  90% {
    opacity: 0.65;
  }
  100% {
    top: 105%;
    transform: translateX(60px) rotate(360deg) scale(1.05);
    opacity: 0;
  }
}

/* Sparkling Star Particle */
.sparkle-particle {
  position: absolute;
  pointer-events: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px #ff7597, 0 0 20px #ffd6e0;
  animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { transform: scale(0.3); opacity: 0.2; }
  50% { transform: scale(1.2); opacity: 0.9; }
}

/* Subtle Rain Effect for Milestone 7 (First Kiss) */
.rain-atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

.raindrop {
  position: absolute;
  width: 1.5px;
  height: 22px;
  background: linear-gradient(to bottom, transparent, rgba(214, 60, 105, 0.25), rgba(255, 255, 255, 0.7));
  opacity: 0.7;
  animation: rainfall linear infinite;
}

@keyframes rainfall {
  0% {
    transform: translateY(-30px) rotate(15deg);
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(380px) rotate(15deg);
    opacity: 0;
  }
}

/* Rain Ripple on Card Bottom */
.rain-ripple {
  position: absolute;
  bottom: 12px;
  width: 14px;
  height: 5px;
  border: 1px solid rgba(255, 133, 162, 0.4);
  border-radius: 50%;
  animation: rippleSpread 1.6s ease-out infinite;
}

@keyframes rippleSpread {
  0% { transform: scale(0.2); opacity: 0.9; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* Shake Animation for Passcode Error */
@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

.is-shaking {
  animation: errorShake 0.45s ease-in-out;
}

/* Unlock Celebration Burst */
@keyframes unlockBurst {
  0% { transform: scale(0.9); opacity: 0; filter: brightness(1.3); }
  50% { transform: scale(1.04); opacity: 1; filter: brightness(1.1); }
  100% { transform: scale(1); opacity: 1; filter: brightness(1); }
}

/* Milestone Unlock Pop */
@keyframes milestonePop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Screen Reveal Fade */
.fade-in {
  animation: fadeInScreen 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInScreen {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}