/* Animation classes */
.animate-float {
    animation: float 6s ease-in-out infinite;
  }
  
  .animate-pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  .animate-bounce-slow {
    animation: bounce 2s ease-in-out infinite;
  }
  
  .fade-in-text {
    animation: fadeIn 2s ease-in;
  }
  
  .floating-with-music {
    animation: floatControlsNav 4s ease-in-out infinite;
  }
  
  .button-glow {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    animation: buttonGlow 3s ease-in-out infinite;
  }
  
  .music-controls-container {
    animation: floatControls 4s ease-in-out infinite;
  }
  
  .music-control-btn {
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
  }
  
  .music-control-slider {
    animation: fadeInOut 3s ease-in-out infinite;
  }
  
  .music-control-counter {
    transition: all 0.3s ease;
    animation: counterGlow 4s infinite alternate;
  }
  
  .magic-shine::after {
    animation: shineEffect 6s ease-in-out infinite;
  }
  
  .counter-update {
    animation: counterUpdate 0.3s ease-in-out;
  }
  
  .shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
  }
  
  .page-appear {
    animation: page-appear 0.8s ease-out forwards;
  }
  
  /* Keyframes definitions */
  @keyframes float {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-15px);
    }
    100% {
      transform: translateY(0px);
    }
  }
  
  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
    }
  }
  
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-12px);
    }
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes textPulse {
    0% {
      text-shadow: 0 0 10px rgba(106, 90, 205, 0.5), 
                   0 0 20px rgba(106, 90, 205, 0.3),
                   0 0 30px rgba(106, 90, 205, 0.1);
    }
    100% {
      text-shadow: 0 0 15px rgba(106, 90, 205, 0.7), 
                   0 0 25px rgba(106, 90, 205, 0.4),
                   0 0 35px rgba(106, 90, 205, 0.2);
    }
  }
  
  @keyframes shimmer {
    to {
      background-position: 200% center;
    }
  }
  
  @keyframes buttonGlow {
    0%, 100% {
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
    50% {
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(106, 90, 205, 0.4);
    }
  }
  
  @keyframes magicalShadow {
    0%, 100% {
      box-shadow: 0 5px 15px rgba(106, 90, 205, 0.4), 0 3px 5px rgba(0, 0, 0, 0.1);
    }
    50% {
      box-shadow: 0 8px 20px rgba(106, 90, 205, 0.6), 0 5px 10px rgba(0, 0, 0, 0.15);
    }
  }
  
  @keyframes floatControls {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  
  @keyframes fadeInOut {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
  }
  
  @keyframes counterGlow {
    from { box-shadow: 0 0 5px rgba(106, 90, 205, 0.3); }
    to { box-shadow: 0 0 15px rgba(106, 90, 205, 0.7); }
  }
  
  @keyframes floatingParticles {
    0% {
      transform: translateY(0) rotate(0deg);
    }
    100% {
      transform: translateY(-100px) rotate(360deg);
    }
  }
  
  @keyframes coverGlow {
    0% {
      opacity: 0.5;
      background-position: 0% 0%;
    }
    100% {
      opacity: 0.8;
      background-position: 100% 100%;
    }
  }
  
  @keyframes twinkling {
    0% { opacity: 0.3; }
    50% { opacity: 0.8; }
    100% { opacity: 0.3; }
  }
  
  @keyframes dateLabelShine {
    0% {
      transform: scale(0.5) rotate(45deg) translateX(-100%);
    }
    20%, 100% {
      transform: scale(0.5) rotate(45deg) translateX(100%);
    }
  }
  
  @keyframes floatControlsNav {
    0%, 100% {
      transform: translateY(-50%);
    }
    50% {
      transform: translateY(calc(-50% - 10px));
    }
  }
  
  @keyframes buttonGlitter {
    0% {
      transform: scale(0.5) rotate(45deg) translateX(-100%);
    }
    100% {
      transform: scale(0.5) rotate(45deg) translateX(100%);
    }
  }
  
  @keyframes floatButtons {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  
  @keyframes gradientFlow {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  @keyframes riseBubble {
    0% {
      transform: translateY(0) rotate(0);
      opacity: 0.1;
    }
    50% {
      transform: translateY(-50vh) rotate(180deg);
      opacity: 0.2;
    }
    100% {
      transform: translateY(-100vh) rotate(360deg);
      opacity: 0;
    }
  }
  
  @keyframes floatHeart {
    0% { 
      transform: translateY(0) translateX(0) rotate(0deg) scale(1);
      opacity: 0.2;
    }
    25% {
      transform: translateY(-30vh) translateX(20vw) rotate(90deg) scale(1.1);
      opacity: 0.7;
    }
    50% {
      transform: translateY(-50vh) translateX(-10vw) rotate(180deg) scale(1);
      opacity: 0.5;
    }
    75% {
      transform: translateY(-70vh) translateX(15vw) rotate(270deg) scale(0.9);
      opacity: 0.7;
    }
    100% { 
      transform: translateY(-100vh) translateX(0) rotate(360deg) scale(1);
      opacity: 0.2;
    }
  }
  
  @keyframes shineEffect {
    from {
      transform: rotate(45deg) translateX(-100%);
    }
    to {
      transform: rotate(45deg) translateX(100%);
    }
  }
  
  @keyframes counterUpdate {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
  
  @keyframes textShimmer {
    to {
      background-position: 200% center;
    }
  }
  
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
  }
  
  @keyframes page-appear {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }