/*
 ====================================================================
 ✨ ROMANTIC KEYFRAMES & MICRO-ANIMATIONS
 ====================================================================
*/

@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.14); }
  28% { transform: scale(1); }
  42% { transform: scale(1.14); }
  70% { transform: scale(1); }
}

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

@keyframes candleFlicker {
  0% {
    transform: scale(1) rotate(-1deg);
    filter: drop-shadow(0 0 6px rgba(255, 165, 0, 0.7));
  }
  25% {
    transform: scale(1.08, 0.95) rotate(2deg);
    filter: drop-shadow(0 0 10px rgba(255, 140, 0, 0.9));
  }
  50% {
    transform: scale(0.96, 1.05) rotate(-2deg);
    filter: drop-shadow(0 0 8px rgba(255, 200, 0, 0.8));
  }
  75% {
    transform: scale(1.04, 0.98) rotate(1deg);
    filter: drop-shadow(0 0 12px rgba(255, 120, 0, 0.85));
  }
  100% {
    transform: scale(1) rotate(-1deg);
    filter: drop-shadow(0 0 7px rgba(255, 165, 0, 0.7));
  }
}

@keyframes smokePuff {
  0% {
    opacity: 0.8;
    transform: translateY(0) scale(0.5);
  }
  50% {
    opacity: 0.5;
    transform: translateY(-24px) translateX(6px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-48px) translateX(-4px) scale(1.8);
  }
}

@keyframes floatUp {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.9;
  }
  100% {
    transform: translateY(-340px) rotate(25deg);
    opacity: 0;
  }
}

@keyframes floatFade {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.9);
  }
  50% {
    opacity: 1;
    transform: translateY(-20px) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(1);
  }
}

@keyframes sparkleTwinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.7) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.3) rotate(45deg);
    filter: drop-shadow(0 0 6px #ffd700);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    text-shadow: 0 0 12px rgba(255, 107, 139, 0.4), 0 0 24px rgba(245, 175, 25, 0.3);
  }
  50% {
    text-shadow: 0 0 24px rgba(255, 107, 139, 0.8), 0 0 36px rgba(245, 175, 25, 0.7);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

@keyframes progressFill {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Enter Animation Utilities */
.animate-fade-in-up {
  animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

.animate-pop-in {
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}