/* ========================================
   RISE OF LEGENDS: MYSTIC FORGE
   Animations & Visual Effects
   ======================================== */

/* === BREATHING GLOW ANIMATION === */
@keyframes breathingGlow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.3),
            0 0 40px rgba(255, 215, 0, 0.2),
            inset 0 0 20px rgba(255, 215, 0, 0.1);
    }

    50% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.6),
            0 0 60px rgba(255, 215, 0, 0.4),
            inset 0 0 30px rgba(255, 215, 0, 0.2);
    }
}

.breathing-glow {
    animation: breathingGlow 3s ease-in-out infinite;
}

/* === PULSE ANIMATION === */
@keyframes pulse {

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

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

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

/* === GOLD PARTICLE EXPLOSION === */
@keyframes particleExplosion {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #ffd700, #ffea00);
    border-radius: 50%;
    pointer-events: none;
    animation: particleExplosion 1s ease-out forwards;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

/* === SCREEN SHAKE === */
@keyframes screenShake {

    0%,
    100% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-5px, 5px);
    }

    20% {
        transform: translate(5px, -5px);
    }

    30% {
        transform: translate(-5px, -5px);
    }

    40% {
        transform: translate(5px, 5px);
    }

    50% {
        transform: translate(-5px, 5px);
    }

    60% {
        transform: translate(5px, -5px);
    }

    70% {
        transform: translate(-5px, -5px);
    }

    80% {
        transform: translate(5px, 5px);
    }

    90% {
        transform: translate(-5px, -5px);
    }
}

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

/* === RED FLASH (Item Break) === */
@keyframes redFlash {

    0%,
    100% {
        background: transparent;
        opacity: 0;
    }

    50% {
        background: radial-gradient(circle,
                rgba(255, 0, 64, 0.6) 0%,
                rgba(139, 0, 0, 0.4) 50%,
                transparent 100%);
        opacity: 1;
    }
}

.flash-red {
    animation: redFlash 0.6s ease-out;
}

/* === GREEN FLASH (Success) === */
@keyframes greenFlash {

    0%,
    100% {
        background: transparent;
        opacity: 0;
    }

    50% {
        background: radial-gradient(circle,
                rgba(0, 255, 136, 0.4) 0%,
                rgba(0, 139, 139, 0.2) 50%,
                transparent 100%);
        opacity: 1;
    }
}

.flash-green {
    animation: greenFlash 0.6s ease-out;
}

/* === SHATTER EFFECT === */
@keyframes shatter {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translate(var(--sx), var(--sy)) rotate(var(--sr));
        opacity: 0;
    }
}

.shatter-piece {
    position: absolute;
    background-size: cover;
    animation: shatter 0.8s ease-out forwards;
}

/* === FLOAT IN ANIMATION === */
@keyframes floatIn {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }

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

.float-in {
    animation: floatIn 0.5s ease-out forwards;
}

/* === FADE IN ANIMATION === */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

/* === FADE OUT ANIMATION === */
@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

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

/* === SLIDE UP ANIMATION === */
@keyframes slideUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

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

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

/* === TOAST SLIDE IN === */
@keyframes toastSlideIn {
    0% {
        transform: translateX(400px);
        opacity: 0;
    }

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

.toast {
    animation: toastSlideIn 0.3s ease-out forwards;
}

/* === TOAST SLIDE OUT === */
@keyframes toastSlideOut {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(400px);
        opacity: 0;
    }
}

.toast.removing {
    animation: toastSlideOut 0.3s ease-out forwards;
}

/* === SPARKLE EFFECT === */
@keyframes sparkle {

    0%,
    100% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }

    50% {
        transform: scale(1) rotate(180deg);
        opacity: 1;
    }
}

.sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    animation: sparkle 1s ease-in-out infinite;
    box-shadow: 0 0 5px #fff, 0 0 10px #fff;
}

/* === GLOW PULSE === */
@keyframes glowPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1));
    }
}

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

/* === ROTATE ANIMATION === */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

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

/* === BOUNCE ANIMATION === */
@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

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

/* === ZOOM IN ANIMATION === */
@keyframes zoomIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

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

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

/* === LOADING SPINNER === */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 215, 0, 0.2);
    border-top-color: var(--clr-gold-neon);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* === PARALLAX EFFECT === */
.parallax-layer {
    transition: transform 0.1s ease-out;
}

/* === TEXT SHIMMER === */
@keyframes textShimmer {
    0% {
        background-position: -1000px;
    }

    100% {
        background-position: 1000px;
    }
}

.shimmer-text {
    background: linear-gradient(90deg,
            var(--clr-gold-neon) 0%,
            var(--clr-gold-bright) 50%,
            var(--clr-gold-neon) 100%);
    background-size: 1000px 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 3s linear infinite;
}

/* === RIPPLE EFFECT === */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }

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

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.5);
    pointer-events: none;
    animation: ripple 0.6s ease-out;
}

/* === HOVER LIFT === */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
}

/* === NUMBER COUNT UP ANIMATION === */
@keyframes countUp {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }

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

.count-up {
    animation: countUp 0.3s ease-out;
}

/* === GRADIENT ANIMATION === */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

.gradient-animate {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

/* === BORDER GLOW ANIMATION === */
@keyframes borderGlow {

    0%,
    100% {
        border-color: rgba(255, 215, 0, 0.3);
    }

    50% {
        border-color: rgba(255, 215, 0, 1);
    }
}

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