/* Birthday Page Animations */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

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

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes rainbow {
  0% { color: #ff0000; }
  14% { color: #ff7f00; }
  28% { color: #ffff00; }
  42% { color: #00ff00; }
  57% { color: #0000ff; }
  71% { color: #4b0082; }
  85% { color: #9400d3; }
  100% { color: #ff0000; }
}

.birthday-title {
  animation: bounce 2s infinite, rainbow 3s infinite;
}

.birthday-gif {
  animation: pulse 2s ease-in-out infinite;
}

.confetti {
  animation: confetti-fall 4s linear infinite;
}

/* Responsive design for different screen sizes */
@media (max-width: 768px) {
  .birthday-title {
    font-size: 24px !important;
  }
  
  .birthday-subtitle {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .birthday-title {
    font-size: 20px !important;
  }
  
  .birthday-subtitle {
    font-size: 14px !important;
  }
}