/* Cross-document view transitions.
   The site's routes are separate documents (main.tsx picks a page by
   pathname on load), so opting in here makes every link between them a
   view transition. Two things carry: the nav stays put, and a model's serif
   name on its home card is the same element as the name at the top of its
   page, so it travels there instead of the page cutting. */
@view-transition {
  navigation: auto;
}

/* The nav is the fixed point: it must not crossfade with the page. */
.mkt-nav { view-transition-name: mkt-nav; }

/* The names. The home cards' serif names and the pages' serif names share
   a transition name per model, so the browser interpolates one into the
   other. Names must be unique per document, so each model has its own. */
.dusk-pair__card[href="/models/recon-1"] .pl__name { view-transition-name: recon-name; }
.dusk-pair__card[href="/models/aural"] .pl__name { view-transition-name: aural-name; }
.rr-hero__name { view-transition-name: recon-name; }
.model-page-hero .hero-primary { view-transition-name: recon-name; }
.model-page-hero--aural .hero-primary { view-transition-name: aural-name; }

/* Timing. The page crossfades on the site's ease; the name takes a little
   longer and settles, so the eye follows it. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-group(recon-name),
::view-transition-group(aural-name) {
  animation-duration: 900ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
/* The name is text on ink on one side and text on paper on the other: let
   the old one fade under the new rather than crossfading both at once, so
   the letters read as one thing moving. */
::view-transition-old(recon-name),
::view-transition-old(aural-name) {
  animation: vt-name-out 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
::view-transition-new(recon-name),
::view-transition-new(aural-name) {
  animation: vt-name-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes vt-name-out { from { opacity: 1; } 60% { opacity: 0; } to { opacity: 0; } }
@keyframes vt-name-in { from { opacity: 0; } 20% { opacity: 0; } 70% { opacity: 1; } to { opacity: 1; } }
::view-transition-group(mkt-nav) { animation-duration: 0s; }

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