diff --git a/ui/src/app.css b/ui/src/app.css
index 770d94d..8ad22ac 100644
--- a/ui/src/app.css
+++ b/ui/src/app.css
@@ -247,5 +247,22 @@ html {
 	100% { width: 100%; opacity: 0; }
 }
 .animate-progress-bar {
-	animation: progress-bar 8s cubic-bezier(0.1, 0.05, 0.1, 1) forwards;
+	animation: progress-bar 4s cubic-bezier(0.1, 0.05, 0.1, 1) forwards;
+}
+
+/* ── Respect reduced motion — disable all decorative animations ─────── */
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+	}
+}
+
+/* ── Footer content-visibility — skip paint for off-screen footer ───── */
+footer {
+	content-visibility: auto;
+	contain-intrinsic-size: auto 80px;
 }
diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index 0acddea..adcbeb0 100644
--- a/ui/src/routes/+layout.svelte
+++ b/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>