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

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

    to {
        opacity: 1;
    }
}

/* Slide In Up */
@keyframes slideInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Slide In Down */
@keyframes slideInDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Pulse */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

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

    to {
        transform: rotate(360deg);
    }
}

/* Shake (for errors) */
@keyframes shake {

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

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

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

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Bounce In */
@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

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

/* Glow Pulse */
@keyframes glowPulse {

    0%,
    100% {
        box-shadow: 0 0 5px var(--glow-color, rgba(99, 102, 241, 0.3));
    }

    50% {
        box-shadow: 0 0 20px var(--glow-color, rgba(99, 102, 241, 0.6));
    }
}

/* Progress Fill */
@keyframes fillProgress {
    from {
        width: 0%;
    }

    to {
        width: var(--progress-width, 100%);
    }
}

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

.animate-fadeIn {
    animation: fadeIn var(--duration-normal) var(--ease-out);
}

.animate-slideInUp {
    animation: slideInUp var(--duration-normal) var(--ease-out);
}

.animate-pulse {
    animation: pulse 2s infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

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

.animate-bounceIn {
    animation: bounceIn 0.5s var(--ease-out);
}

/* Spinner SVG Animation */
.spinner {
    animation: spin 1s linear infinite;
}

/* Delay Classes */
.animation-delay-100 {
    animation-delay: 100ms;
}

.animation-delay-200 {
    animation-delay: 200ms;
}

.animation-delay-300 {
    animation-delay: 300ms;
}

.animation-delay-500 {
    animation-delay: 500ms;
}