/* Cross-document page transition. Normal links, history and direct
   URLs are untouched: browsers without support simply navigate as today.
   /membership/ does not opt in, so its approved welcome screen is unchanged. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  header.membership-nav { view-transition-name: bw-header; }
  ::view-transition-group(bw-header) { animation: none; }
  /* Desktop: the header is not cross-faded. Two header snapshots blended over each other
     showed the nav twice whenever they differed (a page with a scrollbar and one without
     place the nav 15 px apart; the current-page mark moves). The new header shows at once.
     Phones keep the fade: there the header snapshot includes the open full-screen menu. */
  @media (min-width: 901px) {
    ::view-transition-old(bw-header) { animation: none; opacity: 0; }
    ::view-transition-new(bw-header) { animation: none; }
  }
  /* Short and opacity-only: the page cannot be clicked while a transition runs, so it
     must end quickly (it was ~0.7 s with a filter and a clip, both repainting). */
  ::view-transition-old(root) { animation: bw-page-out .14s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: bw-page-in .26s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes bw-page-out { to { opacity: 0; } }
  @keyframes bw-page-in { from { opacity: 0; } }
}