feat: add page fade transition and CSS performance improvements

- Wrap {#key} children in fade transition (out 100ms, in 180ms+60ms delay)
  for a smooth cross-fade between pages with no added dependencies
- Halve navigation progress bar animation duration (8s → 4s) for
  more realistic feedback on typical navigations
- Add prefers-reduced-motion media query to collapse all animation/transition
  durations for users with accessibility needs
- Add content-visibility: auto on footer to skip browser paint of
  off-screen content and improve rendering performance

ui/src/routes/+layout.svelte

@@ -13,7 +13,7 @@
 	import { locales, getLocale } from '$lib/paraglide/runtime.js';
 	import ListeningMode from '$lib/components/ListeningMode.svelte';
 	import SearchModal from '$lib/components/SearchModal.svelte';
-	import { fly } from 'svelte/transition';
+	import { fly, fade } from 'svelte/transition';
 
 	let { children, data }: { children: Snippet; data: LayoutData } = $props();
 
@@ -823,7 +823,9 @@
 
 	<main class="flex-1 max-w-6xl mx-auto w-full px-4 py-8">
 		{#key page.url.pathname + page.url.search}
-			{@render children()}
+			<div in:fade={{ duration: 180, delay: 60 }} out:fade={{ duration: 100 }}>
+				{@render children()}
+			</div>
 		{/key}
 	</main>