/* dragon wiggle animation */
@keyframes dragon-wiggle-key {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }

  25% {
    transform: translateX(-50%) rotate(2deg);
  }

  50% {
    transform: translateX(-50%) rotate(0deg);
  }

  75% {
    transform: translateX(-50%) rotate(-2deg);
  }

  100% {
    transform: translateX(-50%) rotate(0deg);
  }
}

.dragon-wiggle {
  animation: dragon-wiggle-key 0.7s ease-in-out;
}

/* ================================
   Timer & Text Animations
   ================================ */

/* Timer pulse with colorful glow */
@keyframes timer-pulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25),
      inset 0 0 0 6px rgba(255, 210, 100, .22),
      0 0 20px rgba(255, 210, 100, .3);
  }

  50% {
    transform: scale(1.02);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .3),
      inset 0 0 0 6px rgba(255, 210, 100, .35),
      0 0 35px rgba(255, 210, 100, .6);
  }
}

/* Timer value update animation */
@keyframes timer-value-update {
  0% {
    opacity: 0.6;
    transform: translateY(-2px) scale(0.98);
  }

  50% {
    opacity: 1;
    transform: translateY(0) scale(1.05);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Timer label colorful shift */
@keyframes timer-label-shift {
  0% {
    opacity: 0;
    transform: translateY(-5px);
    filter: hue-rotate(0deg);
  }

  60% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: hue-rotate(0deg);
  }
}

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Fade out animation */
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Slide fade in from top */
@keyframes slideInFadeTop {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide fade out to top */
@keyframes slideOutFadeTop {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Slide fade in from bottom */
@keyframes slideInFadeBottom {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale fade in */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Scale fade out */
@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Colorful text glow */
@keyframes textGlow {

  0%,
  100% {
    text-shadow: 0 0 8px rgba(255, 210, 100, .4);
  }

  50% {
    text-shadow: 0 0 16px rgba(255, 210, 100, .7),
      0 0 24px rgba(255, 180, 50, .4);
  }
}

/* Panel reveal animation */
@keyframes panelReveal {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Dialog backdrop fade */
@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes backdropFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Shimmer effect for special elements */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* ================================
   Animation Classes
   ================================ */

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

.timer-value-update {
  animation: timer-value-update 0.4s ease-out;
}

.timer-label-shift {
  animation: timer-label-shift 0.5s ease-out;
}

.fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

.slide-in-top {
  animation: slideInFadeTop 0.4s ease-out forwards;
}

.slide-out-top {
  animation: slideOutFadeTop 0.3s ease-in forwards;
}

.slide-in-bottom {
  animation: slideInFadeBottom 0.4s ease-out forwards;
}

.scale-in {
  animation: scaleIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.scale-out {
  animation: scaleOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.text-glow {
  animation: textGlow 2s ease-in-out infinite;
}

.panel-reveal {
  animation: panelReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.backdrop-fade-in {
  animation: backdropFadeIn 0.25s ease-out forwards;
}

.backdrop-fade-out {
  animation: backdropFadeOut 0.25s ease-out forwards;
}

.shimmer {
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, .3) 50%,
      transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}