/* Playful and Micro-Animations */

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

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

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

@keyframes slideUp {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
}

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

.anim-float {
  animation: float 3s ease-in-out infinite;
}

.anim-pulse {
  animation: pulse 2s infinite;
}

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

.anim-slide-up {
  animation: slideUp 0.3s ease-out forwards;
}

.anim-shake {
  animation: shake 0.4s ease-in-out;
}

/* Transition Utilities */
.transition-all {
  transition: all 0.3s ease;
}

.transition-transform {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hover-scale:hover {
  transform: scale(1.03);
}

.hover-scale:active {
  transform: scale(0.97);
}