/* ============================================
   FOREST MAGIC — CSS Keyframe Animations
   ============================================ */

/* ----- Spin Button Glow Pulse ----- */
@keyframes spinPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.3),
                    0 4px 15px rgba(0, 0, 0, 0.4),
                    inset 0 2px 4px rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.6),
                    0 4px 20px rgba(0, 0, 0, 0.4),
                    inset 0 2px 4px rgba(255, 255, 255, 0.4);
    }
}

/* ----- Gold Shimmer Effect ----- */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* ----- Floating Particle Effect ----- */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
}

@keyframes floatSlow {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    33% {
        transform: translateY(-8px) rotate(2deg);
    }
    66% {
        transform: translateY(-4px) rotate(-1deg);
    }
}

/* ----- Slide Transitions ----- */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes slideRight {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideLeft {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* ----- Fade ----- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeOutScale {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* ----- Coin Rain (Win Celebration) ----- */
@keyframes coinRain {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

@keyframes coinSpin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* ----- Text Glow Pulse ----- */
@keyframes glowPulse {
    0%, 100% {
        opacity: 0.6;
        filter: brightness(1);
    }
    50% {
        opacity: 1;
        filter: brightness(1.3);
    }
}

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

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

@keyframes shakeHard {
    0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
    10% { transform: translateX(-8px) translateY(4px) rotate(-1deg); }
    20% { transform: translateX(8px) translateY(-4px) rotate(1deg); }
    30% { transform: translateX(-6px) translateY(6px) rotate(-0.5deg); }
    40% { transform: translateX(6px) translateY(-3px) rotate(0.5deg); }
    50% { transform: translateX(-4px) translateY(4px) rotate(-0.3deg); }
    60% { transform: translateX(4px) translateY(-3px) rotate(0.3deg); }
    70% { transform: translateX(-3px) translateY(2px) rotate(-0.2deg); }
    80% { transform: translateX(2px) translateY(-2px) rotate(0.1deg); }
    90% { transform: translateX(-1px) translateY(1px) rotate(0deg); }
}

/* ----- Number Count Up ----- */
@keyframes countUp {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ----- Loading Spinner ----- */
@keyframes spinLoader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ----- Pulse ----- */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

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

/* ----- Rotate ----- */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

/* ----- Win Line Flash ----- */
@keyframes lineFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ----- Symbol Highlight ----- */
@keyframes symbolHighlight {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 0 transparent);
    }
    50% {
        filter: brightness(1.5) drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
    }
}

/* ----- Bounce In ----- */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

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

/* ----- Ambient Background Gradient ----- */
@keyframes ambientGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ----- Jackpot Rainbow ----- */
@keyframes rainbowGlow {
    0% { filter: hue-rotate(0deg) brightness(1.2); }
    25% { filter: hue-rotate(90deg) brightness(1.4); }
    50% { filter: hue-rotate(180deg) brightness(1.2); }
    75% { filter: hue-rotate(270deg) brightness(1.4); }
    100% { filter: hue-rotate(360deg) brightness(1.2); }
}

/* ----- Win Amount Pop ----- */
@keyframes winPop {
    0% {
        transform: scale(0) translateY(20px);
        opacity: 0;
    }
    60% {
        transform: scale(1.2) translateY(-5px);
        opacity: 1;
    }
    80% {
        transform: scale(0.9) translateY(0);
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* ----- Sparkle ----- */
@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}