more fluent texts

src/routes/layout.css

@@ -133,10 +133,73 @@
 		@apply bg-background text-foreground;
 	}
 
-	/* Added around a theme change only (see routes/+layout.svelte), so the whole
-	   page cross-fades between light and dark instead of snapping. It is off the
-	   rest of the time: a permanent global transition would smear every hover
-	   and every chart repaint. */
+	/* Page cross-fade: driven from routes/+layout.svelte, revealed when the new
+	   page reports its data has arrived. */
+	.page-fade {
+		transition: opacity 320ms ease;
+	}
+	.page-fade-hidden {
+		opacity: 0;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.page-fade {
+			transition: none;
+		}
+		.page-fade-hidden {
+			opacity: 1;
+		}
+	}
+
+	/* ── Day switching ────────────────────────────────────────────────────────
+	   Only the three regions whose content depends on the selected day take part
+	   in the cross-fade. Everything else keeps its pixels: the `day-switch`
+	   class cancels the root animation, so the strip, header and page chrome do
+	   not so much as flicker while the table, summary and charts swap over. */
+	.day-region-table {
+		view-transition-name: day-table;
+	}
+	.day-region-summary {
+		view-transition-name: day-summary;
+	}
+	.day-region-charts {
+		view-transition-name: day-charts;
+	}
+
+	::view-transition-old(day-table),
+	::view-transition-new(day-table),
+	::view-transition-old(day-summary),
+	::view-transition-new(day-summary),
+	::view-transition-old(day-charts),
+	::view-transition-new(day-charts) {
+		animation-duration: 420ms;
+		animation-timing-function: ease;
+	}
+
+	:root.day-switch::view-transition-old(root),
+	:root.day-switch::view-transition-new(root) {
+		animation: none;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.day-region-table,
+		.day-region-summary,
+		.day-region-charts {
+			view-transition-name: none;
+		}
+	}
+
+	/* Theme changes cross-fade the whole document in one pass (see
+	   routes/+layout.svelte). Doing it as a view transition instead of a blanket
+	   `* { transition }` matters: that blanket rule also stretched every
+	   component's own hover and focus transitions to 400ms for the duration of
+	   the switch, which read as lag on interactive controls. */
+	::view-transition-old(root),
+	::view-transition-new(root) {
+		animation-duration: 400ms;
+		animation-timing-function: ease;
+	}
+
+	/* Fallback for browsers without view transitions: fade the colours only. */
 	:root.theme-transition,
 	:root.theme-transition *,
 	:root.theme-transition *::before,
@@ -146,16 +209,19 @@
 			border-color 400ms ease,
 			color 400ms ease,
 			fill 400ms ease,
-			stroke 400ms ease,
-			box-shadow 400ms ease !important;
+			stroke 400ms ease;
 	}
 
 	@media (prefers-reduced-motion: reduce) {
+		::view-transition-old(root),
+		::view-transition-new(root) {
+			animation: none;
+		}
 		:root.theme-transition,
 		:root.theme-transition *,
 		:root.theme-transition *::before,
 		:root.theme-transition *::after {
-			transition: none !important;
+			transition: none;
 		}
 	}
 }