/* ==========================================================================
   Animations - Keyframes
   ========================================================================== */

/* Slide up and fade in - for flash messages, modals, etc. */
@keyframes slide-up-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Shake - for errors, warnings */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-4px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(4px);
  }
}

/* Pulse - for attention */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Comic Book BAM Animation - Quick Scale */
@keyframes bam-scale {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bam-text {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(-20px);
  }
  30% {
    opacity: 1;
    transform: scale(1.2) translateY(0);
  }
  70% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.8) translateY(-10px);
  }
}

/* Animation utility classes */
.animate-slide-up {
  animation: slide-up-fade-in 0.3s ease-out;
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

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

.animate-bam {
  animation: bam-scale 0.2s ease-out forwards;
}

.animate-bam-text {
  animation: bam-text 0.4s ease-out forwards;
}