/* ============================================================
   Motion — the site's motion tokens, and its page transition.

   Cross-document View Transitions: on every same-origin navigation
   (a link click to another page) the browser snapshots the outgoing
   and incoming pages and animates between them — a left-to-right
   gradient "page turn" where the NEW page reveals over the OLD
   behind a soft gradient edge.

   This is the same mechanism guglieri.com uses (the View Transitions
   API), adapted to a static multi-page site: the *cross-document*
   variant needs no SPA, no router, no framework, no JS — just this
   CSS. It's opt-in per document, so BOTH the page you leave and the
   page you arrive at must load this stylesheet; link it on every page
   that should participate. Browsers without support (e.g. Firefox
   today) simply navigate instantly — graceful degradation.

   Note: this fires on navigations *between* pages, not on a cold
   first load (there's no outgoing page to transition from).

   The wipe itself is the same trick as before: --wipe (a registered
   @property <percentage>) drives a linear-gradient MASK on the new
   page's snapshot — black = revealed, transparent = still hidden —
   with a 28%-wide soft edge travelling across the width. The old
   snapshot holds still underneath and shows through the unrevealed
   part, giving the page-turn.

   Knobs:  softness = 28% band   ·   duration = 0.5s   ·   ease-out
   ============================================================ */

/* --- Motion tokens ------------------------------------------------
   Two durations and one curve, the same way the type scale is a few
   sizes rather than a size per use. Anything that moves in the DLS
   should reach for these rather than inventing a number, so the whole
   site decelerates at the same rate.

     --motion-fast   a change of STATE the eye reads rather than
                     follows: a scrim darkening, a card fading in.
     --motion-base   TRAVEL — something moving from somewhere to
                     somewhere: a dialog scaling into place, a sheet
                     sliding up. Long enough to be followed, short
                     enough that dismissing and reopening isn't a wait.
     --motion-ease   the travel curve: leaves fast, lands slow, no
                     overshoot. iOS's sheet curve, and the reason a
                     dialog and a sheet feel like one system even
                     though one scales and the other slides.

   FADES DELIBERATELY DO NOT USE --motion-ease. The eye reads a change
   in brightness as linear, so an eased fade reads as a stall; opacity
   stays on a plain `ease`. The curve is for things that MOVE.

   Anything using these must also answer `prefers-reduced-motion` —
   there is no token that does that for you.
   ------------------------------------------------------------------ */
:root {
  --motion-fast: 180ms;
  --motion-base: 260ms;
  --motion-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Opt this document into cross-document view transitions. */
@view-transition {
  navigation: auto;
}

@property --wipe {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 140%;
}

@media (prefers-reduced-motion: no-preference) {
  /* The old page holds still underneath; the new page wipes over it.
     Override the UA default (old fades out / new fades in, blended
     with plus-lighter) — we want a plain opaque reveal. */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    mix-blend-mode: normal;
  }

  ::view-transition-old(root) {
    animation: none;                        /* stays put, full opacity */
  }

  ::view-transition-new(root) {
    animation: page-wipe 0.5s ease-out;
    /* Forward navigation (link click): reveal left → right. */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 28%), transparent var(--wipe));
            mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 28%), transparent var(--wipe));
  }

  /* Back button (scripts/transitions.js sets data-transition): same
     wipe, gradient axis flipped to 270deg so it reveals right → left —
     the page slides back the way it came. */
  html[data-transition="backwards"]::view-transition-new(root) {
    -webkit-mask-image: linear-gradient(270deg, #000 calc(var(--wipe) - 28%), transparent var(--wipe));
            mask-image: linear-gradient(270deg, #000 calc(var(--wipe) - 28%), transparent var(--wipe));
  }

  @keyframes page-wipe {
    from { --wipe: 0%; }
    to   { --wipe: 140%; }
  }
}

/* Reduced motion → instant swap, no animation on either snapshot. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}