/* ==========================================================================
   Motion layer
   Loaded on every page after workflows.css. Pairs with assets/js/motion.js.
   It changes how pages move, not how they look: the Solid Core layout,
   colours and type stay as brand.css defines them.
   .has-motion is set on <html> before first paint (header.php) only for
   visitors who have not asked for reduced motion, so nothing here can hide
   content from anyone else.
   ========================================================================== */

:root {
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Page to page transitions (same-origin navigations) ---------- */
@view-transition { navigation: auto; }

.site-header { view-transition-name: site-header; }

::view-transition-old(root) { animation: 200ms var(--ease-in-out) both vt-leave; }
::view-transition-new(root) { animation: 460ms var(--ease-out) both vt-enter; }

@keyframes vt-leave { to { opacity: 0; } }
@keyframes vt-enter { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Reveals ---------- */
.has-motion .rv {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.has-motion .rv.is-in { opacity: 1; transform: none; }

/* Headlines stay hidden until SplitText has measured their lines. */
.has-motion [data-split],
.has-motion .page-hero h1 { visibility: hidden; }
.has-motion.split-ready [data-split],
.has-motion.split-ready .page-hero h1 { visibility: visible; }

/* ---------- Header: tucks away reading down, returns reading up ---------- */
/* A transform would trap the mobile menu sheet, so motion.js never tucks while the menu is open. */
.site-header { transition: transform 0.45s var(--ease-out), background-color 0.3s ease, box-shadow 0.3s ease; }
.site-header.is-tucked { transform: translateY(-100%); }

/* ---------- Buttons ---------- */
.btn svg { transition: transform 0.3s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .site-header,
    .btn svg { transition: none; }
}