/* ======================================================================
   CROSS-DOCUMENT PAGE TRANSITIONS — View Transitions API
   ----------------------------------------------------------------------
   One shared layer for the whole site. Every page that links this file
   opts into same-origin cross-document transitions, and the named
   elements below morph instead of cross-fading.

   Both the outgoing and the incoming document must carry
   `@view-transition { navigation: auto }`, which is why this lives in
   assets/ and gets linked from each page rather than pasted per page.

   Selectors that don't exist on a given page simply don't match, so the
   whole system is one file: the landing page owns .cat-preview, the case
   study owns .case-hero, and the site chrome is shared by both.

   Progressive enhancement — browsers without the API (Safari <18.2,
   Firefox today) ignore every rule here and navigate normally.
   ====================================================================== */

@view-transition { navigation: auto; }

/* ---------- PERSISTENT CHROME ----------
   These are sticky/fixed, so they're in the viewport at every scroll
   position — safe to name (a named element that's offscreen in one
   document and onscreen in the other flies in from wherever it was).
   Naming them keeps the wordmark, its magenta plate, and the CTA planted
   while the page body underneath swaps. When the visitor clicks a
   catalogue row from mid-page, the header is in its .scrolled state
   (0.6 scale) and the incoming page loads at scroll 0 — so the wordmark
   grows back to full size instead of blinking. */
.site-head    { view-transition-name: vt-head; }
.logo-magenta { view-transition-name: vt-mag; }
.cta-fixed    { view-transition-name: vt-cta; }

/* The footer is deliberately NOT named: it sits below the fold on both
   pages, and offscreen-to-offscreen groups travel a long way for no
   visual gain. */

/* ---------- THE SHARED-ELEMENT MORPH ----------
   Outgoing (landing): the cursor-following preview pane — or, on mobile,
   the row's inline thumbnail — is tagged `vt-hero` by JS at click time.
   It has to be JS because only the CLICKED row's media may hold the
   name; a name must be unique per document.
   Incoming (case study): the hero slot answers to the same name, so the
   little pane under the cursor expands into the hero. */
.case-hero { view-transition-name: vt-hero; }

/* the morph itself — long and eased, this is the moment worth watching */
::view-transition-group(vt-hero){
  animation-duration: .62s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
/* cross-fade the two media frames across the whole travel, so the pane's
   still and the hero's poster blend rather than hard-cut at the end */
::view-transition-old(vt-hero),
::view-transition-new(vt-hero){
  animation-duration: .62s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  height: 100%;              /* fill the morphing group instead of */
  object-fit: cover;         /* letterboxing at intermediate sizes */
}

/* chrome moves on the same clock as the hero, so nothing races */
::view-transition-group(vt-head),
::view-transition-group(vt-mag),
::view-transition-group(vt-cta){
  animation-duration: .62s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- THE PAGE BODY UNDERNEATH ----------
   Old content leaves quickly; new content fades in with a small rise, so
   the swap reads as forward motion rather than a dissolve. */
::view-transition-old(root){ animation: vt-out .30s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root){ animation: vt-in  .52s cubic-bezier(.22, 1, .36, 1) both; }

@keyframes vt-out{ to  { opacity: 0; } }
@keyframes vt-in { from{ opacity: 0; transform: translateY(18px); } }

/* ---------- REDUCED MOTION ----------
   No travel, no morph: drop the names so everything collapses to the
   root group, and make that a near-instant fade. */
@media (prefers-reduced-motion: reduce){
  .site-head, .logo-magenta, .cta-fixed, .case-hero{ view-transition-name: none; }
  ::view-transition-old(root){ animation: vt-out .12s linear both; }
  ::view-transition-new(root){ animation: vt-in-flat .12s linear both; }
  @keyframes vt-in-flat{ from{ opacity: 0; } }
}