/* ==========================================================================
   RUNQIX Animations - Micro-interactions & Visual Delight
   Making every moment feel special and screenshot-worthy
   ========================================================================== */

/* ==========================================================================
   GPS Marker Pulsing - "You are here"
   ========================================================================== */
@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  70% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

@keyframes pulseIntense {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5), 0 0 40px rgba(0, 255, 136, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.7), 0 0 60px rgba(0, 255, 136, 0.5), 0 0 80px rgba(0, 255, 136, 0.3);
  }
}

/* ==========================================================================
   Territory Claim Glow - "It's yours now!"
   ========================================================================== */
@keyframes glow {
  0% {
    filter: drop-shadow(0 0 5px currentColor);
    opacity: 0.8;
  }
  50% {
    filter: drop-shadow(0 0 20px currentColor) drop-shadow(0 0 40px currentColor);
    opacity: 1;
  }
  100% {
    filter: drop-shadow(0 0 5px currentColor);
    opacity: 0.8;
  }
}

@keyframes glowGreen {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 25px rgba(0, 255, 136, 0.8)) drop-shadow(0 0 50px rgba(0, 255, 136, 0.5));
  }
}

@keyframes glowPink {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(255, 0, 102, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 25px rgba(255, 0, 102, 0.8)) drop-shadow(0 0 50px rgba(255, 0, 102, 0.5));
  }
}

@keyframes glowGold {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 50px rgba(255, 215, 0, 0.5));
  }
}

@keyframes territoryPulse {
  0% {
    stroke-opacity: 0.8;
    stroke-width: 3;
  }
  50% {
    stroke-opacity: 1;
    stroke-width: 5;
  }
  100% {
    stroke-opacity: 0.8;
    stroke-width: 3;
  }
}

/* ==========================================================================
   Celebration - XP Gain / Achievement / Victory
   ========================================================================== */
@keyframes celebrate {
  0% {
    transform: scale(0) rotate(-10deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(5deg);
    opacity: 1;
  }
  70% {
    transform: scale(0.95) rotate(-2deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes celebrateBounce {
  0% {
    transform: translateY(50px) scale(0);
    opacity: 0;
  }
  60% {
    transform: translateY(-20px) scale(1.1);
    opacity: 1;
  }
  80% {
    transform: translateY(10px) scale(0.95);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes xpPop {
  0% {
    transform: scale(0) translateY(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.3) translateY(-10px);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(-20px);
    opacity: 0;
  }
}

@keyframes starBurst {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(2) rotate(180deg);
    opacity: 0;
  }
}

/* ==========================================================================
   Shake - Territory Lost Warning / Error
   ========================================================================== */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

@keyframes shakeIntense {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-8px) rotate(-1deg);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(8px) rotate(1deg);
  }
}

@keyframes warningFlash {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(255, 51, 102, 0.2);
  }
}

/* ==========================================================================
   Slide Up - Bottom Sheet / Modals
   ========================================================================== */
@keyframes slideUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes slideOutDown {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* ==========================================================================
   Count Up - Stats Counter Animation
   ========================================================================== */
@keyframes countUp {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes numberPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes incrementFlash {
  0% {
    color: var(--gold);
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
  }
  100% {
    color: var(--white);
    text-shadow: none;
  }
}

/* ==========================================================================
   Ripple - Button Click Effect
   ========================================================================== */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes rippleGreen {
  0% {
    transform: scale(0);
    opacity: 0.6;
    background: rgba(0, 255, 136, 0.4);
  }
  100% {
    transform: scale(4);
    opacity: 0;
    background: rgba(0, 255, 136, 0);
  }
}

/* ==========================================================================
   Confetti Particles - Victory Celebration
   ========================================================================== */
@keyframes confettiFall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

@keyframes confettiSway {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(30px);
  }
  75% {
    transform: translateX(-30px);
  }
}

@keyframes particleExplode {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx, 100px), var(--ty, -100px)) scale(0);
    opacity: 0;
  }
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   Countdown - 3-2-1-GO!
   ========================================================================== */
@keyframes countdownNumber {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  20% {
    transform: scale(1);
    opacity: 1;
  }
  80% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}

@keyframes goText {
  0% {
    transform: scale(0) rotate(-20deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.3) rotate(5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* ==========================================================================
   Achievement Badge - Slide In & Glow
   ========================================================================== */
@keyframes achievementSlideIn {
  0% {
    transform: translateX(120%);
    opacity: 0;
  }
  20% {
    transform: translateX(-10%);
    opacity: 1;
  }
  30% {
    transform: translateX(5%);
  }
  40% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes achievementGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 215, 0, 0.4);
  }
}

@keyframes badgeShine {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* ==========================================================================
   Level Up - Full Screen Celebration
   ========================================================================== */
@keyframes levelUpZoom {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes levelUpGlow {
  0% {
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  }
  50% {
    text-shadow: 0 0 60px rgba(255, 215, 0, 1), 0 0 100px rgba(255, 215, 0, 0.8);
  }
  100% {
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  }
}

@keyframes levelUpRays {
  0% {
    transform: rotate(0deg);
    opacity: 0.3;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0.3;
  }
}

/* ==========================================================================
   Territory Claiming - Animated Border
   ========================================================================== */
@keyframes claimingBorder {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes claimingFill {
  0% {
    fill-opacity: 0;
  }
  100% {
    fill-opacity: 0.3;
  }
}

@keyframes territoryConquered {
  0% {
    fill: rgba(255, 0, 102, 0.3);
  }
  50% {
    fill: rgba(255, 255, 255, 0.5);
  }
  100% {
    fill: rgba(0, 255, 136, 0.3);
  }
}

/* ==========================================================================
   Loop Detected - Flash Effect
   ========================================================================== */
@keyframes loopDetected {
  0% {
    background: radial-gradient(circle at center, rgba(0, 255, 136, 0) 0%, transparent 50%);
  }
  50% {
    background: radial-gradient(circle at center, rgba(0, 255, 136, 0.4) 0%, rgba(0, 255, 136, 0.2) 30%, transparent 70%);
  }
  100% {
    background: radial-gradient(circle at center, rgba(0, 255, 136, 0) 0%, transparent 50%);
  }
}

@keyframes loopTextFlash {
  0%, 100% {
    opacity: 0;
    transform: scale(0.8);
  }
  20%, 80% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   Breathing / Idle Animations
   ========================================================================== */
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

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

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

/* ==========================================================================
   Loading Animations
   ========================================================================== */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinGlow {
  0% {
    transform: rotate(0deg);
    filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.8));
  }
  100% {
    transform: rotate(360deg);
    filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.5));
  }
}

@keyframes skeletonPulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes dotPulse {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes progressStripe {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 0;
  }
}

/* ==========================================================================
   Entrance Animations
   ========================================================================== */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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

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

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes zoomInBounce {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    transform: scale(1.1);
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   Exit Animations
   ========================================================================== */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

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

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

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

/* ==========================================================================
   Streak Fire Animation
   ========================================================================== */
@keyframes fireFlicker {
  0%, 100% {
    transform: scale(1) rotate(-2deg);
    filter: brightness(1);
  }
  25% {
    transform: scale(1.1) rotate(2deg);
    filter: brightness(1.2);
  }
  50% {
    transform: scale(0.95) rotate(-1deg);
    filter: brightness(0.9);
  }
  75% {
    transform: scale(1.05) rotate(1deg);
    filter: brightness(1.1);
  }
}

/* ==========================================================================
   XP Bar Fill Animation
   ========================================================================== */
@keyframes xpBarFill {
  0% {
    width: var(--from-width, 0%);
  }
  100% {
    width: var(--to-width, 100%);
  }
}

@keyframes xpBarShine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* ==========================================================================
   Button Hover Effects
   ========================================================================== */
@keyframes buttonShine {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}

@keyframes buttonPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(0, 255, 136, 0);
  }
}

/* ==========================================================================
   Territory Polygon Animations
   ========================================================================== */
@keyframes polygonDraw {
  0% {
    stroke-dashoffset: var(--path-length, 1000);
    fill-opacity: 0;
  }
  70% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 0.3;
  }
}

@keyframes polygonPulse {
  0%, 100% {
    stroke-width: 2;
    filter: drop-shadow(0 0 5px currentColor);
  }
  50% {
    stroke-width: 4;
    filter: drop-shadow(0 0 15px currentColor);
  }
}

/* ==========================================================================
   Notification Badge Bounce
   ========================================================================== */
@keyframes badgeBounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

@keyframes badgePing {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* ==========================================================================
   Utility Animation Classes
   ========================================================================== */
.animate-pulse {
  animation: pulse 2s ease-out infinite;
}

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

.animate-glow-green {
  animation: glowGreen 2s ease-in-out infinite;
}

.animate-glow-pink {
  animation: glowPink 2s ease-in-out infinite;
}

.animate-glow-gold {
  animation: glowGold 2s ease-in-out infinite;
}

.animate-celebrate {
  animation: celebrate 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

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

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

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

.animate-slide-down {
  animation: slideDown 0.3s ease-out forwards;
}

.animate-slide-in-left {
  animation: slideInLeft 0.3s ease-out forwards;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out forwards;
}

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

.animate-fade-in-up {
  animation: fadeInUp 0.3s ease-out forwards;
}

.animate-fade-in-down {
  animation: fadeInDown 0.3s ease-out forwards;
}

.animate-zoom-in {
  animation: zoomIn 0.3s ease-out forwards;
}

.animate-zoom-in-bounce {
  animation: zoomInBounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-breathe {
  animation: breathe 3s ease-in-out infinite;
}

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

.animate-fire {
  animation: fireFlicker 0.5s ease-in-out infinite;
}

/* Delay utilities */
.animation-delay-100 { animation-delay: 100ms; }
.animation-delay-200 { animation-delay: 200ms; }
.animation-delay-300 { animation-delay: 300ms; }
.animation-delay-400 { animation-delay: 400ms; }
.animation-delay-500 { animation-delay: 500ms; }
.animation-delay-700 { animation-delay: 700ms; }
.animation-delay-1000 { animation-delay: 1000ms; }

/* Duration utilities */
.animation-duration-fast { animation-duration: 150ms; }
.animation-duration-normal { animation-duration: 300ms; }
.animation-duration-slow { animation-duration: 500ms; }
.animation-duration-slower { animation-duration: 700ms; }
.animation-duration-slowest { animation-duration: 1000ms; }

/* Fill mode utilities */
.animation-fill-forwards { animation-fill-mode: forwards; }
.animation-fill-backwards { animation-fill-mode: backwards; }
.animation-fill-both { animation-fill-mode: both; }

/* Iteration utilities */
.animation-infinite { animation-iteration-count: infinite; }
.animation-once { animation-iteration-count: 1; }
.animation-twice { animation-iteration-count: 2; }

/* ==========================================================================
   Onboarding Specific Animations
   ========================================================================== */

/* Logo Pulse - Welcome Screen */
@keyframes logoPulseRing {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Loop Path Drawing Animation */
@keyframes loopPathDraw {
  0% {
    stroke-dashoffset: 300;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Runner Dot Movement Along Path */
@keyframes runnerDotMove {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

/* Territory Fill Animation */
@keyframes territoryFillIn {
  0% {
    fill-opacity: 0;
    transform: scale(0.95);
  }
  100% {
    fill-opacity: 0.3;
    transform: scale(1);
  }
}

/* Battle Clash Animation */
@keyframes battleClash {
  0% {
    transform: translateX(-20px);
    opacity: 0;
  }
  50% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Overlap Flash */
@keyframes overlapFlash {
  0%, 100% {
    fill: rgba(255, 215, 0, 0.4);
  }
  50% {
    fill: rgba(255, 255, 255, 0.6);
  }
}

/* Leaderboard Bar Grow */
@keyframes leaderboardBarGrow {
  0% {
    transform: scaleY(0);
  }
  60% {
    transform: scaleY(1.1);
  }
  100% {
    transform: scaleY(1);
  }
}

/* Crown Drop */
@keyframes crownDrop {
  0% {
    transform: translateY(-30px) scale(0);
    opacity: 0;
  }
  60% {
    transform: translateY(5px) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* Location Pin Drop */
@keyframes locationPinDrop {
  0% {
    transform: translateY(-50px) scale(0);
    opacity: 0;
  }
  60% {
    transform: translateY(5px) scale(1.05);
    opacity: 1;
  }
  80% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* Location Ring Expand */
@keyframes locationRingExpand {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
}

/* ==========================================================================
   Tutorial Animations
   ========================================================================== */

/* Spotlight Reveal */
@keyframes spotlightReveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Target Highlight Pulse */
@keyframes targetHighlightPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.4);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(0, 255, 136, 0);
  }
}

/* Tooltip Enter */
@keyframes tooltipEnter {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Hand Tap Gesture Hint */
@keyframes handTapGesture {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}

/* ==========================================================================
   Celebration Animations
   ========================================================================== */

/* Confetti Rain */
@keyframes confettiRain {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0.5;
  }
}

/* Confetti Sway */
@keyframes confettiSway {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(25px);
  }
  75% {
    transform: translateX(-25px);
  }
}

/* XP Counter Increment */
@keyframes xpCounterIncrement {
  0% {
    transform: scale(1);
    color: var(--gold);
  }
  50% {
    transform: scale(1.1);
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
  }
  100% {
    transform: scale(1);
  }
}

/* Badge Unlock */
@keyframes badgeUnlock {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(10deg);
  }
  70% {
    transform: scale(0.95) rotate(-5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Victory Flash */
@keyframes victoryFlash {
  0% {
    background: radial-gradient(circle at center, rgba(0, 255, 136, 0.5) 0%, transparent 50%);
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    background: radial-gradient(circle at center, rgba(0, 255, 136, 0) 0%, transparent 50%);
    transform: scale(2);
  }
}

/* Text Reveal */
@keyframes textReveal {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

/* Staggered Fade In Up */
@keyframes staggeredFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Party Popper Burst */
@keyframes partyPopperBurst {
  0% {
    transform: scale(0) rotate(-45deg);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(2) rotate(0deg);
    opacity: 0;
  }
}

/* Utility classes for onboarding animations */
.animate-logo-pulse {
  animation: logoPulseRing 2s ease-out infinite;
}

.animate-loop-draw {
  animation: loopPathDraw 2s ease-in-out forwards;
}

.animate-territory-fill {
  animation: territoryFillIn 0.5s ease-out forwards;
}

.animate-battle-clash {
  animation: battleClash 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-bar-grow {
  animation: leaderboardBarGrow 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-crown-drop {
  animation: crownDrop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-pin-drop {
  animation: locationPinDrop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-ring-expand {
  animation: locationRingExpand 1s ease-out forwards;
}

.animate-badge-unlock {
  animation: badgeUnlock 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-confetti-rain {
  animation: confettiRain 4s linear forwards, confettiSway 2s ease-in-out infinite;
}

.animate-victory-flash {
  animation: victoryFlash 0.6s ease-out forwards;
}

.animate-text-reveal {
  animation: textReveal 0.5s ease-out forwards;
}

.animate-staggered-fade {
  animation: staggeredFadeInUp 0.5s ease-out forwards;
}

/* Delay utilities for staggered animations */
.animation-delay-600 { animation-delay: 600ms; }
.animation-delay-800 { animation-delay: 800ms; }
.animation-delay-1200 { animation-delay: 1200ms; }
.animation-delay-1500 { animation-delay: 1500ms; }
.animation-delay-2000 { animation-delay: 2000ms; }

/* ==========================================================================
   Runner Mode Animations
   ========================================================================== */

/* Pace Bar Fill Animation */
@keyframes paceBarSlide {
  0% {
    width: 0%;
  }
  100% {
    width: var(--pace-width, 50%);
  }
}

/* Parallax Float - Hero Layer Movement */
@keyframes parallaxFloat {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  25% {
    transform: translateY(-10px) translateX(5px);
  }
  50% {
    transform: translateY(-5px) translateX(-5px);
  }
  75% {
    transform: translateY(-15px) translateX(3px);
  }
}

/* Conquest Flash - Territory Claim Effect */
@keyframes conquestFlash {
  0% {
    background: radial-gradient(circle at center, rgba(0, 255, 136, 0) 0%, transparent 50%);
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    background: radial-gradient(circle at center, rgba(0, 255, 136, 0.5) 0%, rgba(0, 255, 136, 0.2) 40%, transparent 70%);
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    background: radial-gradient(circle at center, rgba(0, 255, 136, 0) 0%, transparent 50%);
    transform: scale(1.5);
    opacity: 0;
  }
}

/* GPS Pulse Animation */
@keyframes gpsPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
}

/* Swipe Up Indicator */
@keyframes swipeUpIndicator {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-12px);
    opacity: 1;
  }
}

/* Victory Pop Animation */
@keyframes victoryPop {
  0% {
    transform: scale(0) rotate(-10deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.2) rotate(5deg);
    opacity: 1;
  }
  80% {
    transform: scale(0.95) rotate(-2deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Milestone Toast Slide */
@keyframes milestoneSlideIn {
  0% {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) translateY(20px);
    opacity: 1;
  }
}

@keyframes milestoneSlideOut {
  0% {
    transform: translateX(-50%) translateY(20px);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
  }
}

/* Orbital Pulse for Hero Button */
@keyframes orbitalPulseGlow {
  0%, 100% {
    box-shadow:
      0 0 30px rgba(0, 255, 136, 0.4),
      0 8px 32px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow:
      0 0 50px rgba(0, 255, 136, 0.6),
      0 0 80px rgba(0, 255, 136, 0.3),
      0 12px 40px rgba(0, 0, 0, 0.5);
  }
}

/* Runner Mode Utility Classes */
.animate-pace-bar {
  animation: paceBarSlide 0.5s ease-out forwards;
}

.animate-parallax-float {
  animation: parallaxFloat 8s ease-in-out infinite;
}

.animate-conquest-flash {
  animation: conquestFlash 0.6s ease-out forwards;
}

.animate-gps-pulse {
  animation: gpsPulse 1.5s ease-in-out infinite;
}

.animate-swipe-up {
  animation: swipeUpIndicator 1.5s ease-in-out infinite;
}

.animate-victory-pop {
  animation: victoryPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-milestone-in {
  animation: milestoneSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-milestone-out {
  animation: milestoneSlideOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}