ui: crossfade page changes with cross-document view transitions

assets/style/_base.scss

@@ -86,3 +86,21 @@ h1, h2, h3, h4, h5, h6 {
 	border-radius: var(--radius-sm);
 }
 .skip-link:focus { left: 0.5rem; }
+
+/* ---- Page-change animation (cross-document view transitions) ----
+ * Same-origin page loads crossfade instead of flashing white
+ * (Chrome 126+ / Safari 18.2+; other browsers keep the instant swap).
+ * The navbar carries its own snapshot (_layout.scss) so it stays put.
+ * group(*) included: its geometry animation would otherwise run at the
+ * UA default 250ms and hold the transition open after the fades end. */
+@media (prefers-reduced-motion: no-preference) {
+	@view-transition {
+		navigation: auto;
+	}
+
+	::view-transition-group(*),
+	::view-transition-old(*),
+	::view-transition-new(*) {
+		animation-duration: var(--timing-fast);
+	}
+}

assets/style/_layout.scss

@@ -12,6 +12,10 @@
 	-webkit-backdrop-filter: saturate(150%) blur(14px);
 	border-bottom: 1px solid var(--color-ink-line);
 	color: var(--color-content-inv);
+	/* Own view-transition snapshot: stays put while the page crossfades
+	 * (_base.scss). The backdrop blur isn't part of the element's own paint,
+	 * so it drops out for the 120ms transition — imperceptible. */
+	view-transition-name: navbar;
 }
 .navbar-inner {
 	height: 100%;