@layer components {
  /* The travel layer

     What happens when you move between two pages and the same object is in
     both. The browser does the animation; all this decides is which things are
     the same object, how long the move takes, and what must not move at all.

     Turbo reads the meta tag in the layout, requires it on both snapshots —
     it is in the layout, so that holds — and checks prefers-reduced-motion
     itself before it calls startViewTransition. There is no branch to write
     here for that, which is why this file has none.

     Names come from travel_controller and are set on one row at a time, never
     rendered into a list. The two below are the exceptions, because they are
     one element each and they are on every page: the view's name, which should
     stay put while the list under it changes, and the bar, which is sticky and
     would otherwise cross-fade against itself while the page slides past
     underneath. */

  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-group(*) {
      animation-duration: var(--travel);
      animation-timing-function: var(--ease);
    }
  }
}

/* Outside the layer, and outside any component, because these are facts about
   two specific elements rather than styling of them — and because a
   view-transition-name that a component could accidentally override is a
   transition that silently stops working. */
.masthead { view-transition-name: masthead; }
.view-header__title { view-transition-name: view-title; }

/* The count on the view button, which changes under you on a broadcast. It is
   tabular already, so the digits hold their columns and a cross-fade between
   two numbers is clean rather than a shuffle. Not an odometer: this is a
   number people check, not one they watch, and rolling digits trade legibility
   on every change for delight on the first. */
.viewmenu__button .menu__count { view-transition-name: view-count; }