/* css/utilities/animations.css */

/* -----------------------------------
   1. Entrance Animations
   ----------------------------------- */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes revealFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-40px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Utility classes to attach to elements via JS IntersectionObserver */
.animate-up {
    opacity: 0;
    will-change: transform, opacity;
}

.animate-up.is-visible {
    animation: fadeInUp 0.8s var(--ease-premium) forwards;
}

/* Stagger delays for grids */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* -----------------------------------
   2. Micro-Interactions (Continuous)
   ----------------------------------- */
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.7; }
}

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

.float-element {
    animation: float 6s ease-in-out infinite;
}

/* -----------------------------------
   3. Loading Skeletons
   ----------------------------------- */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.skeleton-pulse {
    background: linear-gradient(
        90deg, 
        var(--bg-elevated) 0%, 
        var(--border-color) 50%, 
        var(--bg-elevated) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
    border-radius: 8px;
    width: 100%;
    height: 100%;
    min-height: 200px;
}