/* Weaver Audio — what happens between pages.

   Loaded by every page, with js/wa-transitions.js (the generators and the
   hand-written pages all carry the pair). Nothing here is a single-page app:
   every page still loads on its own and runs its own scripts, which is the
   point, because tangle.js, lander.js and account.js have no teardown and
   never needed one. The browser does the blending.

   1. Every same-origin navigation is a cross-document view transition: the
      old page is snapshotted, the new one loads, the two crossfade. No white
      flash. Chrome and Safari animate; Firefox gets an ordinary navigation.

   2. The faceplate flight. A click on a module card (the store wall, a family
      page, a module page's "more in" row) names that card's faceplate image
      `wa-plate` just before the page swaps (wa-transitions.js, pageswap), and
      every module page's hero panel is named `wa-plate` below. Same name on
      both sides, so the browser animates one into the other: the plate lifts
      out of the wall and lands as the hero. Going back runs it in reverse.

   The opt-in rule is ALSO inlined in every page's <head>, right before the
   link to this file, and that copy is the one that counts. Chrome reads the
   rule during the style update it forces when the parser inserts <body>; an
   external stylesheet can still be loading at that moment, and when it is,
   the new page's transition is dropped ("ViewTransition opt-in disabled").
   Measured on the store page: dropped 3 times in 4 with the rule only here,
   0 in 8 with the inline copy. The copy below stays so the rule is in one
   obvious place for anyone reading the stylesheet. */

@view-transition { navigation: auto; }

/* ── the page crossfade ──────────────────────────────────────────────────── */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 240ms; }

/* ── the faceplate flight ────────────────────────────────────────────────── */
/* Every module page's hero panel. The matching card on the page you came
   from is named by script at the moment of leaving. */
.ln-panel.ln-audio > svg { view-transition-name: wa-plate; }

::view-transition-group(wa-plate) {
  animation-duration: 480ms;
  animation-timing-function: cubic-bezier(0.22, 0.72, 0.16, 1);
  z-index: 2;
}
/* The card art and the hero are the same drawing, so the pair can crossfade
   quickly inside the moving box instead of over its whole flight. */
::view-transition-old(wa-plate),
::view-transition-new(wa-plate) {
  animation-duration: 480ms;
  height: 100%;
  object-fit: contain;
}

/* ── the homepage's two doors ────────────────────────────────────────────── */
/* Home → tangle: the flagship card's live rig (.hm-flag-rack, named by script
   on the way out) grows into the walkthrough's hero stage. tangle.html builds
   the stage with script, so that page's tangle.js tag is blocking="render":
   the first frame already holds the stage for the flight to land on.
   Home → modules: the card's wall picture (a.hm-wall-store) grows into the
   store's wall (.cs-wall, named on arrival by the inline head script). Both
   run in reverse on the way back. */
.tg-stage-in { view-transition-name: wa-rig; }

::view-transition-group(wa-rig),
::view-transition-group(wa-wall) {
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(0.22, 0.72, 0.16, 1);
  z-index: 2;
}
::view-transition-old(wa-rig),
::view-transition-new(wa-rig),
::view-transition-old(wa-wall),
::view-transition-new(wa-wall) { animation-duration: 560ms; }
/* The rig is a window: fit the whole picture inside the moving box. The wall
   keeps the default (full width, own height) because the store's wall box is
   far taller than the viewport and only its top rows are in the picture. */
::view-transition-old(wa-rig),
::view-transition-new(wa-rig) { height: 100%; object-fit: contain; }

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