/**
 * Global motion, required on every page of the site.
 *
 * Two effects only: the drawer slide and the soft section reveal. Both are
 * switched off under prefers-reduced-motion.
 */

/* ----------------------------------------------------------------------------
   1. GLOBAL MOTION - required on every page of the site
   1) drawer slide, keyframes below;
   2) soft section reveal: any block with data-reveal, .65s, 16px shift.
   Direction depends on where the block enters from: below rises,
   above descends. Repeats on every pass, in both directions.
   HOOK: IntersectionObserver adds and removes data-reveal-in.
   ------------------------------------------------------------------------- */
@keyframes drawerIn {
    from {
        transform: translateX(-101%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes drawerOut {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-101%);
    }
}

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

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

[data-reveal] {
    transition: opacity .65s ease, transform .65s cubic-bezier(.22, .61, .36, 1);
}

[data-reveal="below"] {
    opacity: 0;
    transform: translateY(16px);
}

/* enters from below */
[data-reveal="above"] {
    opacity: 0;
    transform: translateY(-16px);
}

/* enters from above */
[data-reveal-in] {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .drawer, .veil, .drawer[data-state="closing"], .veil[data-state="closing"] {
        animation: none;
    }
    [data-reveal], [data-reveal="below"], [data-reveal="above"] {
        transition: none;
        opacity: 1;
        transform: none;
    }
}