/* motion-vt.css: page-to-page transitions (native cross-document View
   Transitions). Injected into every page's <head> by deploy step 3.9, after
   Instatic's stylesheet, so these rules win over the older "curtain lift" in
   Instatic's motion-site.css. It has to be a render-blocking sheet: the new
   page's transition starts at its first render, before any script runs.

   The old page keeps animating until the next page is ready (no exit curtain
   holding the click), then recedes softly while the new page rises in. The
   nav is its own transition group, so it stays put instead of flashing. The
   new page's entrance animations wait out the fade (motion-boot.js holds them
   ~300ms on an arrival), so headline motion plays in full view.

   Browsers without cross-document View Transitions (Firefox today) and
   reduced-motion visitors get a plain page load.

   The opt-in that actually counts is the inline <style> step 3.9 puts first
   in <head>: from an external sheet alone Chrome cancelled about half of all
   transitions (it styles a big page before its sheets arrive and sees no
   opt-in). The @view-transition below is kept as a second copy. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  #site-nav { view-transition-name: avm-nav; }

  /* The old page is mostly gone before the new one starts rising, so the two
     never sit on top of each other as a double exposure. */
  ::view-transition-old(root) {
    animation: avm-page-out .24s cubic-bezier(.4, 0, 1, 1) both;
    z-index: 1;
  }
  ::view-transition-new(root) {
    animation: avm-page-in .46s cubic-bezier(.16, 1, .3, 1) .12s both;
    z-index: 2;
  }
  /* identical on both pages: hold it still rather than cross-fading */
  ::view-transition-group(avm-nav) { animation: none; }
  ::view-transition-old(avm-nav) { display: none; }
  ::view-transition-new(avm-nav) { animation: none; }
}

/* No filter: a blur over a full-screen snapshot is expensive on phone GPUs. */
@keyframes avm-page-out {
  to { opacity: 0; transform: scale(.985); }
}
@keyframes avm-page-in {
  from { opacity: 0; transform: translateY(14px); }
}