/* =========================================================================
   Page transitions, shared by every page: the playhead.
   A thin accent line sweeps left to right, drawing the new page in behind it.
   The bar (name and nav) holds still; only the page beneath it changes.
   ========================================================================= */

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

:root {
  --vt-top: var(--bar-h);   /* the line starts below the bar (assets/site.css) */
  --vt-dur: .5s;
  --vt-line: 1px;
  --vt-ease: cubic-bezier(.65, 0, .35, 1);
}

/* The bar is identical on every page and holds still: both pages' versions are
   shown stacked, unanimated, the new one on top. If only one page has it (the
   home page before the name has docked), the old one is dropped at once and the
   new one simply appears. */
::view-transition-group(site-bar),
::view-transition-old(site-bar),
::view-transition-new(site-bar) { animation: none; }
::view-transition-old(site-bar):only-child { display: none; }

/* The page itself: the old page stays put while the new one is revealed over it. */
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: vt-wipe var(--vt-dur) var(--vt-ease) both; }
@keyframes vt-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* The line is drawn by the transition itself, never by the page: .vt-playhead is
   an empty div that only lends its name, and the group pseudo-element is what is
   painted. (A visible element flashed for a frame when the transition ended.)
   It starts below the bar, so it never crosses it, however a browser stacks them. */
.vt-playhead {
  position: fixed; z-index: 1; left: 0; top: 0;
  width: var(--vt-line); height: calc(100vh - var(--vt-top));
  pointer-events: none;
  view-transition-name: vt-playhead;
}
::view-transition-group(vt-playhead) { background: var(--accent); animation: vt-sweep var(--vt-dur) var(--vt-ease) both; }
::view-transition-old(vt-playhead), ::view-transition-new(vt-playhead) { display: none; }
@keyframes vt-sweep {
  from { transform: translate(calc(-1 * var(--vt-line)), var(--vt-top)); }
  to   { transform: translate(100vw, var(--vt-top)); }
}