@media (prefers-reduced-motion: no-preference) {

    /* ---------- 1. Scroll fade-in ---------- */
    html.has-js .reveal-target:not(.no-reveal) {
        opacity: 0;
        transform: translateY(24px);
        transition:
            opacity 0.8s ease,
            transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }
    html.has-js .reveal-target.is-visible {
        opacity: 1;
        transform: none;
    }

    /* ---------- 2. Header: slide down on load, up on leaving ---------- */
    @keyframes header-in {
        from { transform: translateY(-100%); opacity: 0; }
        to   { transform: none; opacity: 1; }
    }

    .site-header { /* swap for your header block's class if needed */
        animation: header-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }

    html.is-leaving .site-header {
        transform: translateY(-100%);
        opacity: 0;
        transition: transform 0.45s ease, opacity 0.45s ease;
    }

    /* ---------- 3. Off-canvas: lines slide up and fade in, one after another ---------- */
    @keyframes slideout-item-in {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: none; }
    }

    #generate-slideout-menu {
        --slideout-start: 300ms;  /* wait for the panel to slide in */
        --slideout-step: 80ms;    /* gap between lines */
        --slideout-fade: 450ms;   /* duration per line */
    }

    body.offside-js--is-open #generate-slideout-menu .main-nav li > a,
    body.offside-js--is-open #generate-slideout-menu .inside-navigation > :not(.main-nav):not(.slideout-menu) {
        animation: slideout-item-in var(--slideout-fade) cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-delay: calc(var(--slideout-start) + var(--i, 0) * var(--slideout-step));
    }
}