/* ===========================
   倍倍FIGHT! - Animations
   =========================== */

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

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

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

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

/* Logo Animations */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

@keyframes neonBorder {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 0.8;
    }
}

/* Background Animations */
@keyframes moveStars {
    from {
        transform: translateX(0) translateY(0);
    }
    to {
        transform: translateX(-100px) translateY(-100px);
    }
}

@keyframes aurora {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }
    50% {
        transform: translateX(0%) rotate(180deg);
    }
    100% {
        transform: translateX(-50%) rotate(360deg);
    }
}

/* Button Animations */
@keyframes particleBurst {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(20);
        opacity: 0;
    }
}

@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}

/* Chip Animations */
@keyframes floatChip1 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(100px, -50px) rotate(90deg);
    }
    50% {
        transform: translate(50px, 30px) rotate(180deg);
    }
    75% {
        transform: translate(-30px, -20px) rotate(270deg);
    }
}

@keyframes floatChip2 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-80px, 40px) rotate(-90deg);
    }
    50% {
        transform: translate(-120px, -60px) rotate(-180deg);
    }
    75% {
        transform: translate(40px, 20px) rotate(-270deg);
    }
}

@keyframes floatChip3 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(60px, 80px) rotate(120deg);
    }
    50% {
        transform: translate(-40px, 100px) rotate(240deg);
    }
    75% {
        transform: translate(20px, -40px) rotate(360deg);
    }
}

/* Card Animations */
@keyframes cardEntrance {
    0% {
        opacity: 0;
        transform: translateY(50px) rotateX(90deg);
    }
    50% {
        opacity: 1;
        transform: translateY(0) rotateX(45deg);
    }
    100% {
        transform: translateY(0) rotateX(0);
    }
}

@keyframes cardHover {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

@keyframes cardFlip {
    0% {
        transform: perspective(1000px) rotateY(0);
    }
    50% {
        transform: perspective(1000px) rotateY(90deg);
    }
    100% {
        transform: perspective(1000px) rotateY(180deg);
    }
}

@keyframes cardSuccess {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.2) rotate(5deg);
    }
    50% {
        transform: scale(1.1) rotate(-5deg);
    }
    75% {
        transform: scale(1.15) rotate(3deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

@keyframes cardFail {
    0% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1) saturate(1);
    }
    25% {
        transform: scale(0.95) rotate(-5deg);
        filter: brightness(0.5) saturate(0);
    }
    50% {
        transform: scale(0.9) rotate(5deg);
        filter: brightness(0.3) saturate(0);
    }
    100% {
        transform: scale(0.8) rotate(0deg);
        filter: brightness(0.1) saturate(0);
        opacity: 0.3;
    }
}

/* Particle Effects */
@keyframes goldRain {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

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

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

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

@keyframes heavyShake {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    10% {
        transform: translate(-20px, -20px) rotate(-1deg);
    }
    20% {
        transform: translate(20px, 20px) rotate(1deg);
    }
    30% {
        transform: translate(-15px, 15px) rotate(-1deg);
    }
    40% {
        transform: translate(15px, -15px) rotate(1deg);
    }
    50% {
        transform: translate(-10px, -10px) rotate(-0.5deg);
    }
    60% {
        transform: translate(10px, 10px) rotate(0.5deg);
    }
    70% {
        transform: translate(-5px, 5px) rotate(-0.5deg);
    }
    80% {
        transform: translate(5px, -5px) rotate(0.5deg);
    }
    90% {
        transform: translate(-2px, -2px) rotate(0deg);
    }
}

/* Fire/Burn Effect */
@keyframes burn {
    0% {
        filter: brightness(1) contrast(1);
    }
    20% {
        filter: brightness(1.5) contrast(1.2) hue-rotate(20deg);
    }
    40% {
        filter: brightness(2) contrast(1.5) hue-rotate(40deg);
    }
    60% {
        filter: brightness(1.2) contrast(1.8) hue-rotate(60deg) saturate(2);
    }
    80% {
        filter: brightness(0.8) contrast(2) hue-rotate(80deg) saturate(3);
    }
    100% {
        filter: brightness(0) contrast(10) hue-rotate(120deg) saturate(0);
        transform: scale(0.9);
        opacity: 0;
    }
}

/* Fireworks */
@keyframes firework {
    0% {
        transform: translate(0, 100vh) scale(0);
        opacity: 1;
    }
    50% {
        transform: translate(0, 50vh) scale(0);
        opacity: 1;
    }
    75% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0) scale(1.5);
        opacity: 0;
    }
}

@keyframes fireworkParticle {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--x), var(--y)) scale(0);
        opacity: 0;
    }
}

/* Money Counter */
@keyframes countUp {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    50% {
        transform: translateY(-10px);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes moneyGlow {
    0%, 100% {
        text-shadow: 
            0 0 20px rgba(255, 215, 0, 0.5),
            0 0 40px rgba(255, 215, 0, 0.3),
            0 0 60px rgba(255, 215, 0, 0.1);
    }
    50% {
        text-shadow: 
            0 0 30px rgba(255, 215, 0, 0.8),
            0 0 50px rgba(255, 215, 0, 0.6),
            0 0 70px rgba(255, 215, 0, 0.4);
    }
}

/* Result Screen */
@keyframes victoryGlow {
    0% {
        box-shadow: 0 0 50px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 100px rgba(255, 215, 0, 0.8);
    }
    100% {
        box-shadow: 0 0 50px rgba(255, 215, 0, 0.5);
    }
}

@keyframes defeatDim {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

/* Holographic Effect */
@keyframes holographic {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Neon Glow */
@keyframes neonGlow {
    0%, 100% {
        box-shadow: 
            0 0 10px rgba(0, 255, 255, 0.8),
            0 0 20px rgba(0, 255, 255, 0.6),
            0 0 30px rgba(0, 255, 255, 0.4),
            0 0 40px rgba(0, 255, 255, 0.2);
    }
    50% {
        box-shadow: 
            0 0 20px rgba(255, 0, 255, 0.8),
            0 0 30px rgba(255, 0, 255, 0.6),
            0 0 40px rgba(255, 0, 255, 0.4),
            0 0 50px rgba(255, 0, 255, 0.2);
    }
}

/* Lightning Strike */
@keyframes lightning {
    0%, 95%, 100% {
        opacity: 0;
    }
    96%, 99% {
        opacity: 1;
    }
}

/* Wave Effect */
@keyframes wave {
    0% {
        transform: translateX(-100%) translateZ(0);
    }
    100% {
        transform: translateX(100%) translateZ(0);
    }
}

/* Spin Animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes spinReverse {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

/* Bounce Animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

/* Glitch Effect */
@keyframes glitch {
    0%, 100% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
    20% {
        transform: translate(-2px, 2px);
        filter: hue-rotate(90deg);
    }
    40% {
        transform: translate(-2px, -2px);
        filter: hue-rotate(180deg);
    }
    60% {
        transform: translate(2px, 2px);
        filter: hue-rotate(270deg);
    }
    80% {
        transform: translate(2px, -2px);
        filter: hue-rotate(360deg);
    }
}

/* Rainbow Animation */
@keyframes rainbow {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

/* Morph Animation */
@keyframes morph {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}