/*
================================================================================
| ROOBUX - NEW DESIGN SYSTEM v3.0 | animations.css
================================================================================
| This file contains all global animations for the site.
| - Page load animations (fadeIn, fadeInUp)
| - Interactive animations (spin, pulse, glow)
| - Utility classes (.animate-...)
================================================================================
*/

/* --- 1. FADE & SLIDE ANIMATIONS --- */

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- 2. SCALE & POP ANIMATIONS --- */

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    70% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- 3. LOADING & ROTATION ANIMATIONS --- */

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

@keyframes rotate-gradient {
    from { transform: rotate(0deg); }
    to { transform: rotate(36Fdeg); }
}

/* --- 4. GLOW & PULSE ANIMATIONS --- */

@keyframes glowPulse-primary {
    0%, 100% {
        box-shadow: 0 0 15px var(--color-primary-glow);
    }
    50% {
        box-shadow: 0 0 30px var(--color-primary-glow);
    }
}

@keyframes glowPulse-accent {
    0%, 100% {
        box-shadow: 0 0 15px var(--color-accent-glow);
    }
    50% {
        box-shadow: 0 0 30px var(--color-accent-glow);
    }
}

@keyframes glowPulse-error {
    0%, 100% {
        box-shadow: 0 0 15px var(--color-error-glow);
    }
    50% {
        box-shadow: 0 0 30px var(--color-error-glow);
    }
}

@keyframes pulse-badge {
    0% {
        box-shadow: 0 0 0 0 var(--color-error-glow);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(255, 73, 92, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 73, 92, 0);
    }
}

/* --- 5. GRADIENT & BACKGROUND ANIMATIONS --- */

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes pan-grid {
    from { background-position: 0 0; }
    to { background-position: -400px -400px; }
}

@keyframes scroll-ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); } /* Scrolls one copy */
}

/* --- 6. INTERACTIVE ANIMATIONS --- */

@keyframes shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

/* --- 7. SKELETON LOADER --- */

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.skeleton-loader {
    animation: shimmer 2s infinite linear;
    background: linear-gradient(
        90deg,
        var(--color-bg-card) 25%,
        var(--color-bg-elevated) 50%,
        var(--color-bg-card) 75%
    );
    background-size: 2000px 100%;
    border-radius: var(--radius-md);
    color: transparent;
    user-select: none;
}


/* --- 8. ANIMATION UTILITY CLASSES --- */

.animate-fade-in {
    animation: fadeIn 0.4s ease-out;
}

.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out;
}

.animate-pop-in {
    animation: popIn 0.4s ease-out;
}

/* --- 9. FAQ ACCORDION ANIMATIONS --- */

@keyframes open-faq {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 500px; /* Assumes content is less than 500px */
    }
}

@keyframes close-faq {
    from {
        opacity: 1;
        max-height: 500px;
    }
    to {
        opacity: 0;
        max-height: 0;
    }
}