/* ===================== PAGE TRANSITIONS =====================
   The content itself carries the movement between pages: it settles up
   and out on the way off one page, and rises into place on the next.

   There is deliberately no overlay, curtain, veil or colour fill here —
   nothing is ever painted over the page — so the site's light background
   is uninterrupted from one page to the next and a navigation reads as
   a continuation rather than a reload.

   Only opacity and a small translate are animated, both cheap for the
   compositor, so this stays smooth on a phone.
   ============================================================= */

:root {
  --pt-exit: 320ms;
  /* A decelerating curve: quick to commit, unhurried to settle. */
  --pt-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- leaving ----------
   The nav is fixed chrome and stays put; only the page body moves, so
   the header reads as continuous across the navigation. */

.pt-leaving main {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  transition:
    opacity var(--pt-exit) var(--pt-ease),
    transform var(--pt-exit) var(--pt-ease);
}

/* Clicks during the hand-off would queue a second navigation behind the
   first; the script guards it, and this stops the hover states flickering
   underneath a page that is already on its way out. */
.pt-leaving main {
  pointer-events: none;
}

/* ---------- arriving ----------
   Nothing here on purpose. The entrance belongs to motion.css, which
   fades and lifts <main> on every page load. Defining a second entrance
   here ran both animations on the same element, so an arriving page
   played its entrance twice — which reads as the page reloading itself
   the moment it finishes loading. */

/* ---------- reduced motion ----------
   Movement is decoration over a navigation that already works, so it is
   removed outright rather than softened. */

@media (prefers-reduced-motion: reduce) {
  .pt-leaving main {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
    pointer-events: auto;
  }
}