/* ==========================================================================
   ANIMATIONS — 4WRD
   Scroll-triggered reveal animations via IntersectionObserver (animations.js)
   Add the animation attribute to any element to trigger on scroll.

   Usage:
     <div animation="fade-in">...</div>
     <div animation="fade-in-up">...</div>
     <div animation="fade-in-left">...</div>
   ========================================================================== */

:root {

    /* ---- Animation tokens ---- */
    --anim-duration: 400ms;
    --anim-distance: 20px;
    --anim-ease: ease-out;

}

/* ==========================================================================
   BASE
   ========================================================================== */

[animation] {
    transition:
        opacity var(--anim-duration) var(--anim-ease),
        transform var(--anim-duration) var(--anim-ease);
}

/* ==========================================================================
   HIDDEN STATES
   ========================================================================== */

[animation="fade-in"] {
    opacity: 0;
}

[animation="fade-in-up"] {
    opacity: 0;
    transform: translateY(var(--anim-distance));
}

[animation="fade-in-down"] {
    opacity: 0;
    transform: translateY(calc(var(--anim-distance) * -1));
}

[animation="fade-in-left"] {
    opacity: 0;
    transform: translateX(calc(var(--anim-distance) * -1));
}

[animation="fade-in-right"] {
    opacity: 0;
    transform: translateX(var(--anim-distance));
}

[animation="scale-in"] {
    opacity: 0;
    transform: scale(0.95);
}

/* ==========================================================================
   VISIBLE STATE
   ========================================================================== */

[animation].is-visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    [animation] {
        opacity: 1;
        transform: none;
        transition: none !important;
    }
}