/* Shared cross-document view-transition fade, loaded on every page so navigating anywhere in the app crossfades smoothly instead of a hard cut. Each page also needs its own opt-in in its — both the departing AND arriving document have to opt in for the browser to actually run a transition, this file only defines what it looks like once one fires. No custom @keyframes here — the browser's own default view-transition behavior already IS a plain crossfade; this just tunes its timing and fixes one default that doesn't suit this app (see below). Individual pages are free to layer their own more specific transitions on top (e.g. journal.html/entry.html sharing a "topbar" view-transition-name) without conflicting with this, since those target different named pseudo-elements, not root. */ ::view-transition-group(root) { animation-duration: 0.4s; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.4s; animation-timing-function: ease; /* The browser's default blend mode for this crossfade (plus-lighter) visibly washes out/ghosts where two light backgrounds overlap mid- fade — nearly every page in this app has a light background, so this matters everywhere. Normal blending keeps it a clean fade. */ mix-blend-mode: normal; }