/**
 * view-transition.css — cross-document shared-element page transitions.
 *
 * Clicking a featured case study card morphs that card's frame into the hero
 * frame on the case study page, so the navigation reads as one continuous
 * surface rather than a page swap.
 *
 * Loaded site-wide via a <link> in Site settings → Custom code → Head. It has
 * to be present on BOTH the outgoing and incoming document — a cross-document
 * transition is opted into by each page independently.
 *
 * No JavaScript. The pairing is declarative: the outgoing element is matched by
 * its href, the incoming one by a data-vt attribute set in the Designer.
 *
 * Support: Chrome/Edge 126+, Safari 18.2+. Firefox does not support
 * cross-document view transitions and simply navigates normally — nothing
 * degrades, the morph is just absent.
 */

@view-transition {
  navigation: auto;
}

/* ------------------------------------------------------------- PAIRING ---
 * A view-transition-name must be unique within a document, not across the
 * site. The home page carries all three names at once (one per card, all
 * different); each case study page carries exactly one. The browser matches
 * old to new by name across the navigation.
 *
 * Adding a fourth case study means adding a matching pair here and setting
 * data-vt on that page's .card-frame.full — nothing else.
 */

.project[href*="case-study-01"] .card-frame { view-transition-name: cs-01; }
.project[href*="case-study-02"] .card-frame { view-transition-name: cs-02; }
.project[href*="case-study-03"] .card-frame { view-transition-name: cs-03; }

[data-vt="cs-01"] { view-transition-name: cs-01; }
[data-vt="cs-02"] { view-transition-name: cs-02; }
[data-vt="cs-03"] { view-transition-name: cs-03; }

/* There is deliberately no view-transition-name on the nav.
 *
 * An earlier version named `.site-nav` so the nav would persist rather than
 * cross-fade with the root snapshot. That class no longer exists — the nav was
 * rebuilt as the `nav` component, whose root is an unclassed <div> — so the
 * rule had been dead for some time. Removed 2026-09-15 rather than re-pointed,
 * for two reasons:
 *
 *   1. It is no longer needed. The nav went onto the case study pages on
 *      2026-09-15, so it now exists on BOTH ends of a home → case study
 *      navigation and cross-fades to an identical nav, which is invisible.
 *      The visible fade-out it was written to prevent only happened because
 *      the incoming page had no nav at all.
 *
 *   2. Naming it would risk the blend. `.nav-top` and `.nav-bottom` carry
 *      `mix-blend-mode: difference`, which composites against whatever is
 *      behind them. A named element is snapshotted and composited separately
 *      from the root, so the thing it blends against changes mid-transition.
 *      Untested, but the wrong kind of surprise to court for no gain.
 *
 * The small cost: the cycling role label and the clock differ between the two
 * snapshots, so those two bits of text cross-fade instead of sitting still.
 */

/* -------------------------------------------------------------- TIMING ---
 * Matches the easing used by the hero panels so the site has one motion
 * vocabulary. Longer than a micro-interaction on purpose: this one carries
 * spatial meaning rather than feedback.
 */

::view-transition-group(cs-01),
::view-transition-group(cs-02),
::view-transition-group(cs-03) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* The whole-page cross-fade on every navigation. The browser default is
 * 0.25s, which Katie saw as a flash leaving the menu: its tinted panel
 * (surface/secondary) jumped to the new page's white, near-empty hero in a
 * quarter second. Same length as the card morph so the site keeps one
 * duration. Symmetric ease-in-out rather than the morph's ease-out, because
 * a cross-fade that front-loads its change reads as a flash again. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}

/* ------------------------------------------------------ REDUCED MOTION ---
 * The global guard in reset.css cannot reach these. It sets animation-duration
 * on `*`, and the ::view-transition-* pseudo-elements live in a separate tree
 * off the root that `*` does not match — so they need their own rule.
 *
 * Killing the animations leaves the navigation instant rather than broken.
 */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}