/* All @keyframes animation definitions */

/* Loading screen animation */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Slide up animation */
@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Pulse ring animation */
@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Coin bounce animation */
@keyframes coinBounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
}

/* Subtle bounce for hints */
@keyframes bounce-subtle {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-4px);
    }
}

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

/* Slide in from bottom for tips */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Floating reward text */
@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-40px) scale(1.2);
    }
}

/* Product reveal animation */
@keyframes productReveal {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    60% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Product glow effect */
@keyframes productGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 8px 32px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 255, 255, 0.5), 0 8px 32px rgba(0, 0, 0, 0.3);
    }
}

/* Shop button pulse */
@keyframes shopPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 6px 25px rgba(37, 99, 235, 0.6);
    }
}

/* Achievement popup */
@keyframes achievementSlide {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    10% {
        transform: translateX(0);
        opacity: 1;
    }
    90% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Level up popup */
@keyframes levelUpPop {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-10deg);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes levelUpPopReverse {
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0) rotate(10deg);
        opacity: 0;
    }
}

/* Tutorial popup */
@keyframes tutorialPop {
    0% {
        transform: scale(0.8) translateY(20px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Rush hour pulse */
@keyframes rushPulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Rush hour glow */
@keyframes rushGlow {
    0% {
        box-shadow: 0 4px 20px rgba(220, 38, 38, 0.4);
    }
    100% {
        box-shadow: 0 4px 30px rgba(249, 115, 22, 0.6);
    }
}

/* Weather slide */
@keyframes weatherSlide {
    0% {
        transform: translate(-50%, -80%) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Weather fade */
@keyframes weatherFade {
    0%, 80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Fuel pulse */
@keyframes fuelPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Slide down for fuel banner */
@keyframes slideDown {
    0% {
        transform: translateX(-50%) translateY(-20px);
        opacity: 0;
    }
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* Fuel banner fade */
@keyframes fuelBannerFade {
    0%, 80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* District popup */
@keyframes districtPop {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-10deg);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}

/* Achievement flash effect */
@keyframes achievementFlash {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Confetti fall animation */
@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(200px) rotate(720deg);
    }
}

/* Reward float up animation */
@keyframes rewardFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateY(-30px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(1);
    }
}

/* Fade in animation */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Pop in animation */
@keyframes pop-in {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Fade out animation */
@keyframes fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Slide down animation (for banners) */
@keyframes slide-down {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Slide up animation (for hiding banners) */
@keyframes slide-up {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

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

/* Utility classes for animations */
.animate-fade-in {
    animation: fade-in 0.3s ease-out forwards;
}

.animate-pop-in {
    animation: pop-in 0.4s ease-out forwards;
}

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