/* ==========================================================================
   Animations
   ========================================================================== */

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

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

.animate-fade-in {
    animation: fadeIn var(--transition-slow) forwards;
}

.animate-slide-up {
    animation: slideUp var(--transition-slow) forwards;
}

/* Staggered delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* Skeleton Loader Animation */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.skeleton {
    background: var(--bg-secondary);
    background-image: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0, 
        rgba(255, 255, 255, 0.2) 20%, 
        rgba(255, 255, 255, 0) 40%, 
        rgba(255, 255, 255, 0)
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear forwards;
    border-radius: var(--radius-sm);
}

[data-theme="dark"] .skeleton {
    background-image: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0, 
        rgba(255, 255, 255, 0.05) 20%, 
        rgba(255, 255, 255, 0) 40%, 
        rgba(255, 255, 255, 0)
    );
}