/* Animations */

/* Pulse animation for Lv10 swords */
@keyframes pulse {
    0%, 100% {
        filter: drop-shadow(0 0 5px currentColor);
    }
    50% {
        filter: drop-shadow(0 0 15px currentColor);
    }
}

/* Merge animation */
@keyframes mergeEffect {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.merge-effect {
    animation: mergeEffect 0.5s ease-out;
}

/* Pop in animation (new sword) */
@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.pop-in {
    animation: popIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Shake animation (error) */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(10px);
    }
}

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

/* Glow animation (selection) */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
    }
}

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

/* Float up and fade (gold effect) */
@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(1.2);
    }
}

.float-up {
    animation: floatUp 1s ease-out forwards;
}

/* Rotate animation (loading) */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.rotate {
    animation: rotate 1s linear infinite;
}

/* Fade in */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

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

/* Fade out */
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

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

/* Bounce */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.bounce {
    animation: bounce 0.5s ease;
}

/* Sparkle effect (for merge/upgrade) */
@keyframes sparkle {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.5) rotate(180deg);
    }
}

.sparkle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, white, transparent);
    border-radius: 50%;
    pointer-events: none;
    animation: sparkle 0.6s ease-out forwards;
}

/* Explosion effect (for destroy) */
@keyframes explode {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

.explode {
    animation: explode 0.5s ease-out forwards;
}

/* Red flash (for destroy warning) */
@keyframes redFlash {
    0%, 100% {
        box-shadow: 0 0 0px rgba(255, 0, 0, 0);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 0, 0, 0.8);
    }
}

.red-flash {
    animation: redFlash 0.3s ease-in-out 2;
}