/* 22 Oct 2026, evening his clock — THE MIST BETWEEN PAGES (his go: "click studio and the menu and grain stay put, the clouds
   roll on, and the colour drifts from the page you're on into the studio's colour while the new title rises out of it",
   every page except the projects, which keep their own tile move). Cross-document view transitions: the old page is held
   until the new one is drawn, so the browser's blank never shows. Chrome/Edge and Safari 18.2+; elsewhere a plain change.
   The project page does not opt in, so work <-> project keeps its own move. Knobs: the durations and the rise below. */
@view-transition { navigation: auto; }
.top-nav { view-transition-name: mist-top; }
.bottom-nav { view-transition-name: mist-bottom; }
/* the colour: the old page drifts out (a touch of blur, like mist going past; no swell) as the new page's colours come up */
::view-transition-old(root) { animation: mist-out 1.5s cubic-bezier(.45, 0, .25, 1) both; }
::view-transition-new(root) { animation: mist-in 1.5s cubic-bezier(.45, 0, .25, 1) both; }
@keyframes mist-out { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(14px); } }
@keyframes mist-in { from { opacity: 0; } to { opacity: 1; } }
/* the menu stays put: the same words in the same place; only the lit word moves across, slowly */
/* no movement at all (his ruling, evening 22 Oct: things "popping in from the bottom right corner to the centre ... it needs to just fade
   in naturally"): the rows never slide or resize, only the old and new words crossfade where they stand; no part of the page is lifted out
   on its own any more, so the grid, the letter and everything else arrive inside the one fade */
::view-transition-group(mist-top), ::view-transition-group(mist-bottom) { animation: none; }
::view-transition-old(mist-top), ::view-transition-old(mist-bottom) { animation: mist-fade-out 1.2s ease both; }
::view-transition-new(mist-top), ::view-transition-new(mist-bottom) { animation: mist-in 1.2s ease both; }
@keyframes mist-fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* evening 22 Oct, his second report (Safari): the grid and the contact letter still "drifting from the bottom right ... to the centre".
   Cause: the browser's own group animation morphs the whole-page snapshot from the old page's captured size to the new one's, so the
   new page arrives stretched about a larger box and shrinks into place. Fix: no group morph anywhere, and each snapshot pinned to the
   top-left of the screen at its own size — nothing is scaled or moved, the two pages only crossfade where they stand. */
::view-transition-group(*) { animation: none !important; }
::view-transition-image-pair(*) { isolation: isolate; }
::view-transition-old(*), ::view-transition-new(*) { inset: 0 auto auto 0; width: auto; height: auto; max-width: none; object-fit: none; object-position: 0 0; }