/* ============================================================================
   SYHF 2026 — Cross-document view transitions

   Eight surgical tracks, three programme days, sixty-odd people with pages of
   their own: this is a site people move around inside, and every one of those
   moves used to be a white flash and a reload. The View Transitions API lets the
   browser hold the outgoing page, paint the incoming one, and animate between —
   across a real navigation, with no framework and no client-side router.

   WHAT CARRIES ACROSS
   The header does not move, because it does not move — naming it means the
   browser paints one continuous bar rather than tearing one down and building an
   identical one. The main content crossfades and lifts a few pixels in the
   direction of travel. That is all. A page transition that announces itself is a
   page transition you notice twice.

   THE TRACK MORPH
   Going from the tracks index into a track, the card you clicked becomes the
   page you land on. That only works if exactly one element on each side shares a
   name, so transitions.js puts the name on the card at the moment of the click
   and takes it off again — a name left on all eight would make the browser give
   up and fall back to a plain crossfade.

   Browsers without the API ignore every line here and navigate normally.
   ========================================================================== */

@view-transition { navigation: auto; }

/* The chrome is continuous; only the content below it changes. */
.app-bar, .site-header { view-transition-name: site-chrome; }

::view-transition-group(site-chrome) { animation-duration: 0.01s; }

::view-transition-old(root) {
  animation: vt-out 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: vt-in 0.34s cubic-bezier(0, 0, 0.2, 1) both;
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* The card you clicked and the page you land on are the same object. */
::view-transition-group(track-card) { animation-duration: 0.42s; }
::view-transition-old(track-card),
::view-transition-new(track-card) { mix-blend-mode: normal; }

/* Going back should not feel like going forward. */
html[data-vt="back"] ::view-transition-old(root) { animation-name: vt-out-back; }
html[data-vt="back"] ::view-transition-new(root) { animation-name: vt-in-back; }
@keyframes vt-out-back { to { opacity: 0; transform: translateY(6px); } }
@keyframes vt-in-back { from { opacity: 0; transform: translateY(-10px); } }

/* Motion here is decoration on top of a navigation that already works, so it is
   the first thing to go. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}