/* =====================================================
   ANIMATIONS.CSS – REUSABLE ANIMATIONS (FINAL)
   Depends on: base.css
===================================================== */

/* -----------------------------
   KEYFRAMES
------------------------------ */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

/* -----------------------------
   ANIMATION UTIL CLASSES
------------------------------ */
.fade-up {
    animation: fadeUp 0.9s ease forwards;
}

.fade-in {
    animation: fadeIn 0.9s ease forwards;
}

.slide-left {
    animation: slideLeft 0.9s ease forwards;
}

.slide-right {
    animation: slideRight 0.9s ease forwards;
}

/* -----------------------------
   STAGGER HELPERS
------------------------------ */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.6s; }

/* -----------------------------
   HOVER MICRO-ANIMATIONS
------------------------------ */
.hover-lift {
    transition: transform var(--transition-normal),
                box-shadow var(--transition-normal);
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}