/* ============================================================ */
/* All @keyframes Animations */
/* ============================================================ */

/* Base Animations */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Roasty Character Animations */
@keyframes sway {
  0%, 100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
}

@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(-2px) rotate(-1deg);
  }
  75% {
    transform: translateX(2px) rotate(1deg);
  }
}

/* Loading Effects */
@keyframes progressFill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes progressSlide {
  0% {
    left: -30%;
  }
  100% {
    left: 100%;
  }
}

@keyframes spinOnly {
  to {
    transform: rotate(360deg);
  }
}

/* Lightning and Smoke Effects */
@keyframes lightning-flash {
  0%, 45%, 55%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@keyframes smoke-pulse {
  0%, 100% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@keyframes boltFlash {
  0%, 45%, 55%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* Modal Animations */
@keyframes slideUpModal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Button Pulse Animation */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 20px var(--glow-orange);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 8px 40px var(--glow-orange);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 20px var(--glow-orange);
  }
}

/* Spinner Animation (for buttons) */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}