/* animations.css - Centralized CSS animations */
/* This file consolidates all @keyframes to eliminate duplication across the codebase */

/* Fade In Animation - Standard upward fade */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Fade In (Simple) - Only opacity, no transform */
@keyframes fadeInSimple {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Fade In Popup - Scale animation */
@keyframes fadeInPop {
    from { 
        transform: scale(0.92); 
        opacity: 0; 
    }
    to { 
        transform: scale(1); 
        opacity: 1; 
    }
}

/* Pop In - Stronger scale effect */
@keyframes popIn {
    0% { 
        transform: scale(0.7); 
        opacity: 0; 
    }
    100% { 
        transform: scale(1); 
        opacity: 1; 
    }
}

/* Pulse Animation - Opacity based */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Pulse Scale - Transform based */
@keyframes pulseScale {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Glow Animation - Box shadow based */
@keyframes glow {
    from {
        box-shadow: 0 0 5px #ff00ff;
    }
    to {
        box-shadow: 0 0 20px #ff00ff;
    }
}

/* Glow Text - Text shadow based */
@keyframes glowText {
    from {
        text-shadow: 0 0 5px var(--neon-purple, #9f00ff),
                     0 0 10px var(--neon-purple, #9f00ff),
                     0 0 15px var(--neon-purple, #9f00ff);
    }
    to {
        text-shadow: 0 0 10px var(--neon-purple, #9f00ff),
                     0 0 20px var(--neon-purple, #9f00ff),
                     0 0 30px var(--neon-purple, #9f00ff);
    }
}

/* Neon Flicker - Text shadow flickering */
@keyframes neonFlicker {
    0% { text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff; }
    50% { text-shadow: 0 0 2px #ff00ff, 0 0 5px #ff00ff; }
    100% { text-shadow: 0 0 8px #ff00ff, 0 0 15px #ff00ff; }
}

/* Loading Animation */
@keyframes loading {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}

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

/* Background Scroll */
@keyframes backgroundScroll {
    from { background-position-y: 0; }
    to { background-position-y: 1000px; }
}

/* Animate Background - Scale effect */
@keyframes animateBg {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Slide In Animation */
@keyframes slideIn {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Notification Fade In */
@keyframes notifFadeIn {
    from { 
        opacity: 0; 
        transform: translateY(-8px) scale(0.97); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* Progress Shine Effect */
@keyframes progressShine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Popup Appear */
@keyframes popup-appear {
    0% {
        opacity: 0;
        transform: translate(-50%, -60%);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Neon Pulse - Cosmetic effect */
@keyframes neonPulse {
    0%, 100% { 
        filter: drop-shadow(0 0 8px #00ffff) drop-shadow(0 0 15px #ff00ff); 
    }
    50% { 
        filter: drop-shadow(0 0 15px #ff00ff) drop-shadow(0 0 25px #00ffff); 
    }
}

/* Wing Flap - Cosmetic effect */
@keyframes wingFlap {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Crown Float - Cosmetic effect */
@keyframes crownFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Fire Flicker - Cosmetic effect */
@keyframes fireFlicker {
    0% { 
        filter: drop-shadow(0 0 10px #ff4500) drop-shadow(0 0 20px #ff6600); 
    }
    100% { 
        filter: drop-shadow(0 0 15px #ff6600) drop-shadow(0 0 30px #ff8c00); 
    }
}

/* Ice Sparkle - Cosmetic effect */
@keyframes iceSparkle {
    0%, 100% { 
        filter: drop-shadow(0 0 10px #00bfff) drop-shadow(0 0 20px rgba(135, 206, 250, 0.8)); 
    }
    50% { 
        filter: drop-shadow(0 0 20px rgba(135, 206, 250, 0.9)) drop-shadow(0 0 30px #00bfff); 
    }
}

/* Neon Border Animation */
@keyframes neonBorder {
    0% { 
        box-shadow: 0 0 24px #ff00ff66, 0 2px 0 #e8e8f1; 
        border-color: #ff00ff; 
    }
    100% { 
        box-shadow: 0 0 36px #8707ff88, 0 2px 0 #e8e8f1; 
        border-color: #8707ff; 
    }
}

/* Neon Button Flicker */
@keyframes neonBtnFlicker {
    0% { box-shadow: 0 0 18px #ff00ff44, 0 0 4px #fff2; }
    50% { box-shadow: 0 0 28px #ff00ff, 0 0 14px #1e90ff; }
    100% { box-shadow: 0 0 18px #ff00ff44, 0 0 4px #fff2; }
}

/* Cast Magnet - Game specific */
@keyframes castMagnet {
    0% { transform: translateY(-120px); }
    70% { transform: translateY(20px); }
    100% { transform: translateY(0); }
}

/* Wheel Animations */
@keyframes fadeInWheelBg {
    from { background: rgba(10,0,22,0); }
    to { background: rgba(10,0,22,0.88); }
}

@keyframes popIn {
    0% { 
        transform: scale(0.7); 
        opacity: 0; 
    }
    80% { 
        transform: scale(1.1); 
    }
    100% { 
        transform: scale(1); 
        opacity: 1; 
    }
}

/* Glitch Effect */
@keyframes glitch {
    0% {
        clip-path: var(--slice-1);
        transform: translate(-20px, -10px);
    }
    10% {
        clip-path: var(--slice-3);
        transform: translate(10px, 10px);
    }
    20% {
        clip-path: var(--slice-1);
        transform: translate(-10px, 10px);
    }
    30% {
        clip-path: var(--slice-3);
        transform: translate(0px, 5px);
    }
    40% {
        clip-path: var(--slice-2);
        transform: translate(-5px, 0px);
    }
    50% {
        clip-path: var(--slice-3);
        transform: translate(5px, 0px);
    }
    60% {
        clip-path: var(--slice-4);
        transform: translate(5px, 10px);
    }
    70% {
        clip-path: var(--slice-2);
        transform: translate(-10px, 10px);
    }
    80% {
        clip-path: var(--slice-5);
        transform: translate(20px, -10px);
    }
    90% {
        clip-path: var(--slice-1);
        transform: translate(-10px, 0px);
    }
    100% {
        clip-path: var(--slice-1);
        transform: translate(0);
    }
}

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

/* Shadow Mist - Cosmetic effect */
@keyframes mistSwirl {
    0%, 100% { filter: drop-shadow(0 0 15px rgba(75, 0, 130, 0.8)) drop-shadow(0 0 30px rgba(0, 0, 0, 0.5)); }
    50% { filter: drop-shadow(0 0 20px rgba(138, 43, 226, 0.9)) drop-shadow(0 0 40px rgba(75, 0, 130, 0.6)); }
}

/* Starfield Twinkle - Cosmetic effect */
@keyframes starTwinkle {
    0%, 100% { filter: drop-shadow(0 0 5px #ffffff); }
    50% { filter: drop-shadow(0 0 15px #ffffff) drop-shadow(0 0 25px #00ffff); }
}

/* Holographic Shift - Cosmetic effect */
@keyframes holoShift {
    0% { filter: hue-rotate(0deg) drop-shadow(0 0 10px #ff00ff); }
    100% { filter: hue-rotate(360deg) drop-shadow(0 0 10px #00ffff); }
}

/* Champion Glow - Cosmetic effect */
@keyframes championGlow {
    0%, 100% { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 30px rgba(255, 165, 0, 0.4)); }
    50% { filter: drop-shadow(0 0 25px rgba(255, 215, 0, 1)) drop-shadow(0 0 50px rgba(255, 165, 0, 0.6)); }
}

/* Rainbow Text - Chat cosmetic */
@keyframes rainbowText {
    0% { color: #ff0000; }
    17% { color: #ff8000; }
    33% { color: #ffff00; }
    50% { color: #00ff00; }
    67% { color: #0080ff; }
    83% { color: #8000ff; }
    100% { color: #ff0000; }
}

/* Spin - Simple rotation */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Gradient Border - Layout effect */
@keyframes gradientBorder {
    0% { border-image-source: linear-gradient(45deg, #240016, purple); }
    50% { border-image-source: linear-gradient(45deg, rgba(20, 20, 40, 0.8), #1a1a2e); }
    100% { border-image-source: linear-gradient(45deg, #0a0a0f, #240016); }
}

/* Shooting Star Tail */
@keyframes sh02 {
    from {
        opacity: 0;
        left: 0%;
    }
    50% {
        opacity: 1;
    }
    to {
        opacity: 0;
        left: 100%;
    }
}

/* Casino Background Move */
@keyframes bg-move {
    0% { background-position: 0 0; }
    100% { background-position: 100% 100%; }
}

/* Casino Neon Glow */
@keyframes neon-glow {
    0% { text-shadow: 0 0 10px #fc9dfc, 0 0 20px #fc9dfc77; }
    100% { text-shadow: 0 0 20px #ff80ff, 0 0 40px #fc9dfc; }
}

/* Casino Button Glow */
@keyframes button-glow {
    0% { box-shadow: 0 5px 25px #fc9dfc44; }
    100% { box-shadow: 0 5px 35px #ff80ff88, 0 0 15px #fc9dfc99; }
}

/* Casino Card Fade In */
@keyframes card-fadein {
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Casino Card Float */
@keyframes card-float {
    0% { box-shadow: 0 0 8px #fc9dfc33, 0 0 0 #fff0; }
    100% { box-shadow: 0 0 18px #ff80ff99, 0 0 8px #fc9dfc77; }
}

/* Shooting Star Animation */
@keyframes animate {
    from {
        transform: rotate(315deg) translateX(0);
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    to {
        transform: rotate(315deg) translateX(-1000px);
        opacity: 0;
    }
}