/* ============================================
   SHARED KEYFRAME ANIMATIONS
   ============================================ */

@keyframes slideUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes nameReveal {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

@keyframes heartPulse {
  0%, 100% { transform: scale(1); }
  15%      { transform: scale(1.3); }
  30%      { transform: scale(1); }
  45%      { transform: scale(1.15); }
  60%      { transform: scale(1); }
}

@keyframes bounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50%      { transform: rotate(45deg) translateY(10px); }
}

@keyframes bgFloat {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-60px); }
}

@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0; }
}

@keyframes sparkleAnim {
  0%   { transform: scale(0) rotate(0); opacity: 1; }
  50%  { transform: scale(1.2) rotate(180deg); opacity: 1; }
  100% { transform: scale(0) rotate(360deg) translateY(-30px); opacity: 0; }
}

@keyframes confettiFall {
  0%   { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

@keyframes surpriseFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes musicBar {
  0%   { height: 6px; }
  100% { height: 20px; }
}

@keyframes heartBurst {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.5); opacity: 0; }
}

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