/* ── PAGE TRANSITIONS: every page-to-page navigation ─────────────────────
   Loaded by every page, so any link, menu item or button that moves to
   another page dissolves into it rather than cutting - the same quick
   dissolve that Explore Canonis -> Who We Are introduced. Both pages must
   opt in for the browser to run a cross-document view transition, hence
   the one file shared by all.

   The outgoing page is held at full strength and the new one fades in over
   it, so there is never a see-through frame of both pages half-faded.

   The longer homepage -> Explore Canonis crossfade lives in
   css/intro-transition.css and overrides these when js/intro-transition.js
   marks it on <html> (data-intro-leaving / data-intro-arrival).

   Browsers without cross-document view transitions (Firefox at present)
   simply navigate as before. */
@view-transition { navigation: auto; }

::view-transition-group(root) { animation-duration: 450ms; }
::view-transition-old(root) {
  animation: none;
  opacity: 1;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  animation: page-crossfade 450ms cubic-bezier(.4, 0, .2, 1) both;
  mix-blend-mode: normal;
}
@keyframes page-crossfade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The header is its own layer so the destination's header is there, steady,
   from the first frame. The outgoing header is NOT held with it: headers
   differ in height (Explore Canonis carries the taller globe header), and
   held at full strength the old one's foot stuck out under the new header
   as a teal strip for the whole dissolve. It fades out in the first 180ms
   instead. The group does not morph between the two heights either - the
   new header simply sits in place.

   Named only during a transition (html.vt-header, set by
   js/page-transition.js): a named element is a backdrop root, and the
   phone menu inside the header needs its backdrop-filter to blur the page. */
html.vt-header .site-header { view-transition-name: site-header; }
html[data-intro-leaving] .site-header,
html[data-intro-arrival] .site-header { view-transition-name: none; }
::view-transition-group(site-header) { animation: none; }
::view-transition-old(site-header) {
  animation: page-header-out 180ms ease-out both;
}
::view-transition-new(site-header) { animation: none; }
@keyframes page-header-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Destination cue: a gold rule that draws under the new page's title,
   holds, and withdraws (js/page-transition.js places it). */
.page-arrival-cue {
  position: fixed;
  height: 2px;
  background: #b99a55;
  pointer-events: none;
  z-index: 999;
  transform-origin: left center;
  animation: page-arrival-cue 1800ms ease-out both;
}
@keyframes page-arrival-cue {
  0% { transform: scaleX(0); }
  25%, 75% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
  .page-arrival-cue { animation: none; }
}