/* Cross-document view transitions.
 *
 * Only possible since the site left Google Sites: these work same-origin, and
 * every page was previously an iframe inside a Sites shell. Browsers without
 * support navigate exactly as before — there is no fallback to maintain.
 *
 * @view-transition must sit at the top level. It was originally nested inside a
 * prefers-reduced-motion query, which parses without complaint and then does
 * nothing at all: the opt-in never takes effect and every navigation is an
 * ordinary one. Motion preference is honoured further down instead, by removing
 * the animations rather than the transition.
 */
@view-transition { navigation: auto; }

/* The element a page hands across a navigation: its lead artwork, declared in
   the markup. Declared rather than detected — picking "the largest image near
   the top" at runtime chose a 20px bot icon on /cents and found nothing at all
   on three pages whose lead is lazy-loaded. Exactly one per page: a
   view-transition-name must be unique, and duplicates make the browser drop the
   pairing silently rather than complain. Pages that build their artwork as a
   grid in script deliberately declare none, and cross-fade instead. */
.vt-lead { view-transition-name: art; }

/* The page as a whole: a short cross-fade, deliberately quicker than the paired
   element so the surrounding furniture settles first and the artwork leads. */
::view-transition-old(root) { animation-duration: .22s; }
::view-transition-new(root) { animation-duration: .28s; }

/* The artwork travelling between card and page. */
::view-transition-old(art),
::view-transition-new(art),
::view-transition-group(art) {
  animation-duration: .42s;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

/* Asked for less motion: keep the transition, drop the movement. The swap is
   then instant, which is steadier than the white flash of a plain navigation. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* What each collection hands across.
 *
 * The rule above says which element travels; this is about making sure every
 * collection page has one, near the top, and that it is the collection's own
 * work rather than whatever image happened to come first. It was not: on most of
 * these pages the first artwork sat 700 to 1500px down, so the navigation worked
 * and flew the artwork off the bottom of the screen to reach it.
 *
 * Two arrangements, because these pages are not built alike:
 *
 * 1. Eight pages open with a banner, and the banner is what travels — the
 *    header itself carries the name, so the card opens out into it. A banner is
 *    a CSS background rather than an element, which is why the *header* is named
 *    and not the image: naming the box takes the background with it.
 *
 * 2. The rest have no banner to grow into, so they show a plate instead:
 *    figure.vt-plate, one work from the collection, under the title block and
 *    set in the reading column, since those pages are set left.
 *
 * The plate is deliberately the same file the homepage card shows, which makes
 * that pairing a morph of one picture rather than a cross-fade between two, and
 * means the image is already in cache on arrival. It is not cropped to the
 * card's square: a centre crop on Latent Couture takes the headpieces off, and
 * the morph survives a change of aspect ratio where the artwork would not
 * survive the crop.
 *
 * Whichever arrangement a page uses, it must name exactly one element. Two
 * elements under one name make the browser drop the pairing silently. */
.vt-plate { margin: clamp(20px, 3.2vh, 32px) auto 0; width: clamp(140px, 20vh, 220px); }
.vt-plate picture,
.vt-plate img { display: block; width: 100%; height: auto; }
.vt-plate img { border-radius: 2px; }
.hero .vt-plate img { border: 1px solid rgba(255, 255, 255, .34); }

/* On a page with no banner the plate sits in the reading column rather than
   centred: these pages are set left, and a centred plate floats away from the
   text with nothing to hold it. */
.wrap > .vt-plate { margin-left: 0; margin-bottom: clamp(20px, 3.2vh, 32px); }
.wrap > .vt-plate img { border: 1px solid var(--rule); }

/* A card and a banner are nothing like the same shape, so the two snapshots are
   told to cover rather than stretch. Left to fill, a square work visibly squashes
   itself into a wide banner for the length of the animation. */
::view-transition-old(art),
::view-transition-new(art) { object-fit: cover; }