/* El Zulo Casino - Professional Animations */
/* Stake/Rainbet Style Effects */

/* ============================================
   CORE ANIMATIONS
   ============================================ */

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

/* Glow Pulse */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.4); }
    50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.8); }
}

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

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

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

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

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

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Down */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale In */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

/* ============================================
   SLOT SPECIFIC ANIMATIONS
   ============================================ */

/* Reel Blur During Spin */
@keyframes reelBlur {
    0% { filter: blur(0); }
    50% { filter: blur(3px); }
    100% { filter: blur(0); }
}

/* Symbol Bounce on Stop */
@keyframes symbolBounce {
    0% { transform: translateY(-10px); }
    25% { transform: translateY(5px); }
    50% { transform: translateY(-3px); }
    75% { transform: translateY(2px); }
    100% { transform: translateY(0); }
}

/* Symbol Highlight */
@keyframes symbolHighlight {
    0%, 100% {
        filter: brightness(1) saturate(1);
        transform: scale(1);
    }
    50% {
        filter: brightness(1.3) saturate(1.2);
        transform: scale(1.05);
    }
}

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

/* Jackpot Text */
@keyframes jackpotText {
    0% {
        background-position: 0% center;
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        background-position: 200% center;
        transform: scale(1);
    }
}

/* ============================================
   WIN CELEBRATION ANIMATIONS
   ============================================ */

/* Confetti */
@keyframes confettiFall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

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

/* Ring Expand */
@keyframes ringExpand {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

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

/* ============================================
   CRASH GAME ANIMATIONS
   ============================================ */

/* Rocket Launch */
@keyframes rocketLaunch {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(-100%) rotate(-5deg);
    }
}

/* Rocket Shake */
@keyframes rocketShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px) rotate(-1deg); }
    75% { transform: translateX(3px) rotate(1deg); }
}

/* Multiplier Grow */
@keyframes multiplierGrow {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Explosion */
@keyframes explosion {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Graph Line Draw */
@keyframes graphDraw {
    from { stroke-dashoffset: 1000; }
    to { stroke-dashoffset: 0; }
}

/* ============================================
   ROULETTE ANIMATIONS
   ============================================ */

/* Wheel Spin */
@keyframes wheelSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(var(--spin-degrees, 1800deg)); }
}

/* Ball Roll */
@keyframes ballRoll {
    0% { transform: rotate(0deg) translateX(120px) rotate(0deg); }
    100% { transform: rotate(-1440deg) translateX(120px) rotate(1440deg); }
}

/* Ball Drop */
@keyframes ballDrop {
    0% { transform: translateY(0); }
    100% { transform: translateY(10px); }
}

/* Number Highlight */
@keyframes numberHighlight {
    0%, 100% {
        background: var(--bg-card);
        transform: scale(1);
    }
    50% {
        background: var(--accent-warning);
        transform: scale(1.1);
    }
}

/* ============================================
   BLACKJACK ANIMATIONS
   ============================================ */

/* Card Deal */
@keyframes cardDeal {
    0% {
        transform: translateX(300px) translateY(-200px) rotate(180deg) scale(0.5);
        opacity: 0;
    }
    100% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* Card Flip */
@keyframes cardFlip {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }
}

/* Card Slide */
@keyframes cardSlide {
    from { transform: translateX(-50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ============================================
   DICE ANIMATIONS
   ============================================ */

/* Dice Roll */
@keyframes diceRoll {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    25% { transform: rotateX(90deg) rotateY(90deg); }
    50% { transform: rotateX(180deg) rotateY(180deg); }
    75% { transform: rotateX(270deg) rotateY(270deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* Dice Bounce */
@keyframes diceBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-30px) rotate(90deg); }
    50% { transform: translateY(0) rotate(180deg); }
    70% { transform: translateY(-15px) rotate(270deg); }
    85% { transform: translateY(0) rotate(320deg); }
}

/* ============================================
   MINES ANIMATIONS
   ============================================ */

/* Mine Reveal */
@keyframes mineReveal {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.2) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Gem Sparkle */
@keyframes gemSparkle {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
}

/* Mine Explode */
@keyframes mineExplode {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.5);
        filter: brightness(2);
    }
    100% {
        transform: scale(0);
        filter: brightness(3);
    }
}

/* ============================================
   PLINKO ANIMATIONS
   ============================================ */

/* Ball Drop Physics */
@keyframes plinkoBall {
    0% { transform: translateY(0); }
    100% { transform: translateY(var(--drop-distance, 500px)); }
}

/* Pin Bounce */
@keyframes pinBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Bucket Highlight */
@keyframes bucketHighlight {
    0%, 100% {
        background: var(--bucket-color);
        transform: scale(1);
    }
    50% {
        filter: brightness(1.5);
        transform: scale(1.05);
    }
}

/* ============================================
   UI ELEMENT ANIMATIONS
   ============================================ */

/* Button Ripple */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: rippleEffect 0.6s linear;
    pointer-events: none;
}

@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Loading Dots */
@keyframes loadingDots {
    0%, 20% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.loading-dots span {
    animation: loadingDots 1.4s infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

/* Progress Bar */
@keyframes progressBar {
    from { width: 0; }
    to { width: var(--progress, 100%); }
}

/* Shimmer Effect */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.shimmer {
    background: linear-gradient(
        90deg,
        var(--bg-card) 25%,
        var(--bg-tertiary) 50%,
        var(--bg-card) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ============================================
   PARTICLE EFFECTS
   ============================================ */

/* Particle Container */
.particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    overflow: hidden;
}

/* Single Particle */
.particle {
    position: absolute;
    pointer-events: none;
}

/* Coin Particle */
.particle-coin {
    width: 30px;
    height: 30px;
    background: var(--gradient-gold);
    border-radius: 50%;
    animation: particleFall var(--duration, 2s) linear forwards;
}

@keyframes particleFall {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg) scale(0.5);
        opacity: 0;
    }
}

/* Star Particle */
.particle-star {
    width: 20px;
    height: 20px;
    background: var(--accent-warning);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: particleStar var(--duration, 1.5s) ease-out forwards;
}

@keyframes particleStar {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(1.5) rotate(180deg) translateY(-100px);
        opacity: 0;
    }
}

/* Confetti Particle */
.particle-confetti {
    width: 10px;
    height: 10px;
    animation: confettiDrop var(--duration, 3s) linear forwards;
}

@keyframes confettiDrop {
    0% {
        transform: translateY(-10px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ============================================
   UTILITY ANIMATION CLASSES
   ============================================ */

.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-shake { animation: shake 0.5s ease-in-out; }
.animate-bounce { animation: bounce 1s ease infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-fade-in { animation: fadeIn 0.3s ease forwards; }
.animate-fade-in-up { animation: fadeInUp 0.3s ease forwards; }
.animate-fade-in-down { animation: fadeInDown 0.3s ease forwards; }
.animate-scale-in { animation: scaleIn 0.3s ease forwards; }
.animate-pop-in { animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; }

/* Delay Classes */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* Duration Classes */
.duration-fast { animation-duration: 0.15s; }
.duration-normal { animation-duration: 0.3s; }
.duration-slow { animation-duration: 0.5s; }

/* ============================================
   HOVER EFFECTS
   ============================================ */

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 30px var(--accent-primary);
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-bright {
    transition: filter 0.3s ease;
}

.hover-bright:hover {
    filter: brightness(1.2);
}