diff --git a/lib/Listener/BeforeTemplateRenderedListener.php b/lib/Listener/BeforeTemplateRenderedListener.php
index 84fbdd2ae..a3cf90547 100644
--- a/lib/Listener/BeforeTemplateRenderedListener.php
+++ b/lib/Listener/BeforeTemplateRenderedListener.php
@@ -61,12 +61,6 @@ public function handle(Event $event): void {
 			if (version_compare(Constants::CHANGELOG_VERSION, $lastSeenVersion, '>')) {
 				Util::addScript(Application::APP_ID, Application::APP_ID . '-activate');
 			}
-
-			// If the user was already seen before (compatibility with older wizard versions where the value was 1)
-			// then we only show the changelog
-			if (version_compare($lastSeenVersion, '1', '>')) {
-				$this->initialState->provideInitialState('changelogOnly', true);
-			}
 		}
 
 		Util::addStyle(Application::APP_ID, Application::APP_ID . '-style');
@@ -86,5 +80,16 @@ public function handle(Event $event): void {
 			'ios',
 			$this->systemConfig->getSystemValueString('customclient_ios', $this->theming->getiOSClientUrl())
 		);
+
+		// Live onboarding state for the "Get set up" checklist: which profile
+		// basics are already done, so the wizard can tick them off.
+		$this->initialState->provideInitialState('onboarding', [
+			'displayName' => $user->getDisplayName(),
+			'hasAvatar' => $user->getAvatarImage(64) !== null,
+			'hasName' => $user->getDisplayName() !== '' && $user->getDisplayName() !== $user->getUID(),
+			'hasEmail' => ($user->getEMailAddress() ?? '') !== '',
+			'canChangeAvatar' => $user->canChangeAvatar(),
+			'canChangeName' => $user->canChangeDisplayName(),
+		]);
 	}
 }
diff --git a/src/components/InfoCard.vue b/src/components/InfoCard.vue
index 8daed32b9..4f05cbd70 100644
--- a/src/components/InfoCard.vue
+++ b/src/components/InfoCard.vue
@@ -9,16 +9,22 @@ const props = defineProps<{
 	title: string
 	subtitle?: string
 	href?: string
+	/** When set, the card fades/rises in with a stagger based on this index. */
+	revealIndex?: number
 }>()
 
 const isLink = computed(() => !!props.href)
+const revealStyle = computed(() => props.revealIndex === undefined
+	? undefined
+	: { '--reveal-delay': `${props.revealIndex * 80}ms` })
 </script>
 
 <template>
 	<component
 		:is="isLink ? 'a' : 'div'"
 		:href="href || undefined"
-		:class="[$style.card, { [$style.link]: isLink }]"
+		:class="[$style.card, { [$style.link]: isLink, [$style.reveal]: revealIndex !== undefined }]"
+		:style="revealStyle"
 		:target="!isLink ? undefined : '_blank'"
 		:rel="!isLink ? undefined : 'noreferrer'">
 		<div :class="$style.icon">
@@ -40,6 +46,18 @@ const isLink = computed(() => !!props.href)
 	max-width: 250px;
 	box-sizing: border-box;
 	height: auto;
+	transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .2s ease;
+
+	// The icon pops a touch on hover — playful, and it works for plain cards too.
+	.icon :deep(svg),
+	.icon :deep(img) {
+		transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+
+	&:hover .icon :deep(svg),
+	&:hover .icon :deep(img) {
+		transform: scale(1.18) rotate(-4deg);
+	}
 }
 
 .icon {
@@ -63,6 +81,12 @@ const isLink = computed(() => !!props.href)
 	box-shadow: 0px 0px 10px 0px var(--color-box-shadow);
 	border-radius: var(--border-radius-large);
 	padding: calc(var(--default-grid-baseline) * 4);
+
+	&:hover {
+		transform: translateY(-3px);
+		box-shadow: 0 6px 20px 0 var(--color-box-shadow);
+	}
+
 	&:focus-visible {
 		outline: 2px solid var(--color-main-text);
 		box-shadow: 0 0 0 4px var(--color-main-background);
@@ -74,4 +98,30 @@ const isLink = computed(() => !!props.href)
 	flex-direction: column;
 	justify-content: center;
 }
+
+// Staggered entrance.
+.reveal {
+	opacity: 0;
+	animation: card-reveal .5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+	animation-delay: var(--reveal-delay, 0ms);
+}
+
+@keyframes card-reveal {
+	from { opacity: 0; transform: translateY(14px); }
+	to { opacity: 1; transform: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.card,
+	.card:hover .icon :deep(svg),
+	.card:hover .icon :deep(img) {
+		transition: none;
+		transform: none;
+	}
+
+	.reveal {
+		opacity: 1;
+		animation: none;
+	}
+}
 </style>
diff --git a/src/components/SlideShow.vue b/src/components/SlideShow.vue
index 985f57529..8ec367682 100644
--- a/src/components/SlideShow.vue
+++ b/src/components/SlideShow.vue
@@ -240,27 +240,42 @@ function goToPage(pageId: string) {
  * The transition classes
  */
 .slide-active {
-	transition: all .2s;
+	/* A springy easing with a little overshoot so pages settle with bounce.
+	   `all` (not just transform/opacity) so the first-page "wave" top still animates. */
+	transition: all .42s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .slide-left-enter {
 	opacity: 0;
-	transform: translateX(30%);
+	transform: translateX(44px) scale(.96);
 }
 
 .slide-left-leave-to {
 	opacity: 0;
-	transform: translateX(-30%);
+	transform: translateX(-44px) scale(.96);
 }
 
 .slide-right-enter {
 	opacity: 0;
-	transform: translateX(-30%);
+	transform: translateX(-44px) scale(.96);
 }
 
 .slide-right-leave-to {
 	opacity: 0;
-	transform: translateX(30%);
+	transform: translateX(44px) scale(.96);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.slide-active {
+		transition: opacity .15s linear;
+	}
+
+	.slide-left-enter,
+	.slide-left-leave-to,
+	.slide-right-enter,
+	.slide-right-leave-to {
+		transform: none;
+	}
 }
 
 .slide-up-enter {
diff --git a/src/components/pages/GetStarted.vue b/src/components/pages/GetStarted.vue
new file mode 100644
index 000000000..95f99e266
--- /dev/null
+++ b/src/components/pages/GetStarted.vue
@@ -0,0 +1,384 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<script setup lang="ts">
+import { mdiAccountCircleOutline, mdiCalendarAccount, mdiCellphone, mdiCheck, mdiChevronRight, mdiEmailOutline, mdiMonitor } from '@mdi/js'
+import { loadState } from '@nextcloud/initial-state'
+import { translate as t } from '@nextcloud/l10n'
+import { generateUrl } from '@nextcloud/router'
+import { computed } from 'vue'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import WizardPage from '../WizardPage.vue'
+
+defineProps<{
+	scrollerClasses?: string | string[] | Record<string, boolean>
+}>()
+
+interface Onboarding {
+	displayName: string
+	hasAvatar: boolean
+	hasName: boolean
+	hasEmail: boolean
+	canChangeAvatar: boolean
+	canChangeName: boolean
+}
+
+const onboarding = loadState<Onboarding>('firstrunwizard', 'onboarding', {
+	displayName: '',
+	hasAvatar: false,
+	hasName: false,
+	hasEmail: false,
+	canChangeAvatar: true,
+	canChangeName: true,
+})
+const desktop = loadState<string>('firstrunwizard', 'desktop', '#')
+const android = loadState<string>('firstrunwizard', 'android', '#')
+const ios = loadState<string>('firstrunwizard', 'ios', '#')
+
+const profileUrl = generateUrl('/settings/user')
+const syncClientsUrl = generateUrl('/settings/user/sync-clients')
+
+/** Rough device family from the user agent, to lead with the right client. */
+const ua = navigator.userAgent
+const platform = /android/i.test(ua)
+	? 'android'
+	: /iphone|ipad|ipod/i.test(ua)
+		? 'ios'
+		: /macintosh|mac os x/i.test(ua)
+			? 'mac'
+			: /windows/i.test(ua)
+				? 'windows'
+				: /linux/i.test(ua)
+					? 'linux'
+					: 'other'
+const isMobilePlatform = platform === 'android' || platform === 'ios'
+
+interface Link {
+	label: string
+	href: string
+	/** Filled (primary) button — the option that fits the visitor's device. */
+	primary?: boolean
+}
+
+interface Step {
+	key: string
+	icon: string
+	title: string
+	subtitle: string
+	/** true = done (checked), false = to-do (checkable), null = an action with no completion state */
+	done: boolean | null
+	links: Link[]
+	recommended?: boolean
+}
+
+/** Both mobile stores, with the one matching the visitor's device leading and filled. */
+const mobileLinks = computed<Link[]>(() => {
+	const appStore = { label: t('firstrunwizard', 'App Store'), href: ios, primary: platform === 'ios' }
+	const playStore = { label: t('firstrunwizard', 'Google Play'), href: android, primary: platform === 'android' }
+	return platform === 'ios' ? [appStore, playStore] : [playStore, appStore]
+})
+
+const steps = computed<Step[]>(() => {
+	const list: Step[] = []
+	if (onboarding.canChangeAvatar) {
+		list.push({
+			key: 'avatar',
+			icon: mdiAccountCircleOutline,
+			done: onboarding.hasAvatar,
+			title: t('firstrunwizard', 'Add a profile picture'),
+			subtitle: t('firstrunwizard', 'Help colleagues recognise you across every app.'),
+			links: [{ label: t('firstrunwizard', 'Add photo'), href: profileUrl }],
+		})
+	}
+	if (onboarding.canChangeName) {
+		list.push({
+			key: 'name',
+			icon: mdiAccountCircleOutline,
+			done: onboarding.hasName,
+			title: t('firstrunwizard', 'Set your full name'),
+			subtitle: t('firstrunwizard', 'So your name shows up instead of your username.'),
+			links: [{ label: t('firstrunwizard', 'Set name'), href: profileUrl }],
+		})
+	}
+	list.push({
+		key: 'email',
+		icon: mdiEmailOutline,
+		done: onboarding.hasEmail,
+		title: t('firstrunwizard', 'Add your email address'),
+		subtitle: t('firstrunwizard', 'Needed for notifications and to reset your password.'),
+		links: [{ label: t('firstrunwizard', 'Add email'), href: profileUrl }],
+	})
+	list.push({
+		key: 'desktop',
+		icon: mdiMonitor,
+		done: null,
+		title: t('firstrunwizard', 'Install the desktop app'),
+		subtitle: t('firstrunwizard', 'Keep your files in sync on Windows, macOS and Linux.'),
+		links: [{ label: t('firstrunwizard', 'Download'), href: desktop, primary: !isMobilePlatform }],
+		recommended: !isMobilePlatform,
+	})
+	list.push({
+		key: 'mobile',
+		icon: mdiCellphone,
+		done: null,
+		title: t('firstrunwizard', 'Get the mobile app'),
+		subtitle: t('firstrunwizard', 'Your files, calendar and contacts in your pocket.'),
+		links: mobileLinks.value,
+		recommended: isMobilePlatform,
+	})
+	list.push({
+		key: 'calendar',
+		icon: mdiCalendarAccount,
+		done: null,
+		title: t('firstrunwizard', 'Connect calendar & contacts'),
+		subtitle: t('firstrunwizard', 'Sync them with the devices you already use.'),
+		links: [{ label: t('firstrunwizard', 'Connect'), href: syncClientsUrl }],
+	})
+	return list
+})
+
+const checkable = computed(() => steps.value.filter((s) => s.done !== null))
+const doneCount = computed(() => checkable.value.filter((s) => s.done === true).length)
+const allDone = computed(() => doneCount.value === checkable.value.length)
+const progressPct = computed(() => checkable.value.length === 0 ? 0 : Math.round(doneCount.value / checkable.value.length * 100))
+
+const greeting = computed(() => onboarding.displayName
+	? t('firstrunwizard', 'Welcome, {name}!', { name: onboarding.displayName.split(' ')[0] })
+	: t('firstrunwizard', 'Let\'s get you set up'))
+</script>
+
+<template>
+	<WizardPage
+		:scrollerClasses="scrollerClasses"
+		:title="greeting"
+		:subtitle="t('firstrunwizard', 'A few quick steps to get the most out of Nextcloud.')">
+		<div :class="$style.panel">
+			<!-- Progress -->
+			<div :class="$style.progress">
+				<div :class="$style.progressBar">
+					<div :class="$style.progressFill" :style="{ width: progressPct + '%' }" />
+				</div>
+				<span :class="$style.progressLabel">
+					{{ allDone
+						? t('firstrunwizard', 'All set — nice one! 🎉')
+						: t('firstrunwizard', '{done} of {total} done', { done: doneCount, total: checkable.length }) }}
+				</span>
+			</div>
+
+			<!-- Checklist -->
+			<ul :class="$style.steps">
+				<li
+					v-for="(step, index) in steps"
+					:key="step.key"
+					:class="[$style.step, { [$style.stepDone]: step.done === true }]"
+					:style="{ '--reveal-delay': (index * 70) + 'ms' }">
+					<span :class="[$style.badge, { [$style.badgeDone]: step.done === true }]">
+						<NcIconSvgWrapper :path="step.done === true ? mdiCheck : step.icon" :size="20" />
+					</span>
+					<span :class="$style.body">
+						<span :class="$style.stepTitle">{{ step.title }}</span>
+						<span :class="$style.stepSub">
+							{{ step.subtitle }}
+							<span v-if="step.recommended" :class="$style.recommended">· {{ t('firstrunwizard', 'recommended for your device') }}</span>
+						</span>
+					</span>
+					<span v-if="step.done !== true" :class="$style.ctaGroup">
+						<a
+							v-for="link in step.links"
+							:key="link.label"
+							:class="[$style.cta, { [$style.ctaPrimary]: link.primary }]"
+							:href="link.href"
+							target="_blank"
+							rel="noreferrer">
+							<span :class="$style.ctaLabel">{{ link.label }}</span>
+							<NcIconSvgWrapper :class="$style.ctaIcon" :path="mdiChevronRight" :size="16" />
+						</a>
+					</span>
+				</li>
+			</ul>
+		</div>
+	</WizardPage>
+</template>
+
+<style module lang="scss">
+.panel {
+	width: 100%;
+	max-width: 500px;
+	margin-inline: auto;
+	text-align: start;
+}
+
+.progress {
+	display: flex;
+	align-items: center;
+	gap: calc(var(--default-grid-baseline) * 3);
+	margin-bottom: calc(var(--default-grid-baseline) * 4);
+}
+
+.progressBar {
+	flex: 1;
+	height: 8px;
+	border-radius: 4px;
+	background: var(--color-background-dark);
+	overflow: hidden;
+}
+
+.progressFill {
+	height: 100%;
+	border-radius: 4px;
+	background: var(--color-primary-element);
+	transition: width .6s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.progressLabel {
+	font-size: .85rem;
+	color: var(--color-text-maxcontrast);
+	white-space: nowrap;
+}
+
+.steps {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.step {
+	display: flex;
+	align-items: center;
+	gap: calc(var(--default-grid-baseline) * 3);
+	padding: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 2);
+	border-radius: var(--border-radius-large);
+	transition: background-color .15s ease;
+
+	// Staggered entrance.
+	opacity: 0;
+	animation: step-reveal .5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+	animation-delay: var(--reveal-delay, 0ms);
+
+	&:hover {
+		background: var(--color-background-hover);
+	}
+}
+
+// Uniform circular leading badge for every row.
+.badge {
+	flex: 0 0 34px;
+	width: 34px;
+	height: 34px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	background: var(--color-background-dark);
+	color: var(--color-text-maxcontrast);
+	transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.step:hover .badge {
+	transform: scale(1.08);
+}
+
+.badgeDone {
+	background: color-mix(in srgb, var(--color-success, #46ba61) 22%, transparent);
+	color: var(--color-success, #46ba61);
+}
+
+.body {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 1px;
+	min-width: 0;
+}
+
+.stepTitle {
+	font-weight: 600;
+}
+
+.stepSub {
+	font-size: .84rem;
+	color: var(--color-text-maxcontrast);
+}
+
+.recommended {
+	color: var(--color-primary-element);
+	font-weight: 600;
+}
+
+.stepDone {
+	.stepTitle {
+		color: var(--color-text-maxcontrast);
+	}
+}
+
+// One or two action buttons, always the same width, stacked when there are two.
+.ctaGroup {
+	flex: 0 0 auto;
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	gap: 6px;
+}
+
+.cta {
+	box-sizing: border-box;
+	width: 148px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 2px;
+	padding-block: 6px;
+	padding-inline: 14px;
+	border-radius: var(--border-radius-pill);
+	font-weight: 600;
+	white-space: nowrap;
+	color: var(--color-primary-element-light-text);
+	background: var(--color-primary-element-light);
+	transition: background-color .15s ease;
+
+	&:hover {
+		background: var(--color-primary-element-light-hover);
+	}
+
+	&:focus-visible {
+		outline: 2px solid var(--color-main-text);
+	}
+}
+
+// The option that matches the visitor's device stands out with a filled button.
+.ctaPrimary {
+	color: var(--color-primary-element-text);
+	background: var(--color-primary-element);
+
+	&:hover {
+		background: var(--color-primary-element-hover);
+	}
+}
+
+.ctaIcon {
+	margin-inline-end: -4px;
+}
+
+@keyframes step-reveal {
+	from { opacity: 0; transform: translateY(12px); }
+	to { opacity: 1; transform: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.step,
+	.badge {
+		opacity: 1;
+		animation: none;
+		transition: background-color .15s ease;
+		transform: none;
+	}
+
+	.progressFill {
+		transition: none;
+	}
+}
+</style>
diff --git a/src/components/pages/KeyNotes.vue b/src/components/pages/KeyNotes.vue
index cd2fbe30d..3a7039dee 100644
--- a/src/components/pages/KeyNotes.vue
+++ b/src/components/pages/KeyNotes.vue
@@ -22,21 +22,25 @@ const versionNumber = t('firstrunwizard', 'This Nextcloud is on version {version
 		:scrollerClasses="scrollerClasses"
 		:title="t('firstrunwizard', 'A collaboration platform that puts you in control')">
 		<InfoCard
+			:revealIndex="0"
 			:title="t('firstrunwizard', 'Privacy')"
 			:subtitle="t('firstrunwizard', 'Host your data and files where you decide.')">
 			<NcIconSvgWrapper :class="$style.icon" inline :path="mdiLock" />
 		</InfoCard>
 		<InfoCard
+			:revealIndex="1"
 			:title="t('firstrunwizard', 'Productivity')"
 			:subtitle="t('firstrunwizard', 'Collaborate and communicate across any platform.')">
 			<NcIconSvgWrapper :class="$style.icon" inline :path="mdiBriefcaseCheck" />
 		</InfoCard>
 		<InfoCard
+			:revealIndex="2"
 			:title="t('firstrunwizard', 'Interoperability')"
 			:subtitle="t('firstrunwizard', 'Import and export anything you want with open standards.')">
 			<NcIconSvgWrapper :class="$style.icon" inline :path="mdiSwapHorizontal" />
 		</InfoCard>
 		<InfoCard
+			:revealIndex="3"
 			:title="t('firstrunwizard', 'Community')"
 			:subtitle="t('firstrunwizard', 'Enjoy constant improvements from a thriving open-source community.')">
 			<NcIconSvgWrapper :class="$style.icon" inline :path="mdiAccountGroup" />
diff --git a/src/pages.ts b/src/pages.ts
index 51876ab47..6a5f31e0c 100644
--- a/src/pages.ts
+++ b/src/pages.ts
@@ -7,7 +7,7 @@ import type { Component } from 'vue'
 
 import { translate as t } from '@nextcloud/l10n'
 import AboutNextcloudPage from './components/pages/AboutNextcloud.vue'
-import DeviceIntegrationPage from './components/pages/DeviceIntegration.vue'
+import GetStartedPage from './components/pages/GetStarted.vue'
 import KeyNotesPage from './components/pages/KeyNotes.vue'
 import SharePage from './components/pages/SharePage.vue'
 import WhatsNewPage from './components/pages/WhatsNew.vue'
@@ -35,14 +35,14 @@ export default [
 			},
 			{
 				to: 'devices',
-				label: t('firstrunwizard', 'Nextcloud on all your devices'),
+				label: t('firstrunwizard', 'Let\'s get set up'),
 			},
 		],
 	},
 
 	{
 		id: 'devices',
-		component: DeviceIntegrationPage,
+		component: GetStartedPage,
 		buttons: [
 			{
 				to: 'about',
diff --git a/src/views/App.vue b/src/views/App.vue
index 021cd2ee8..5f75d2b01 100644
--- a/src/views/App.vue
+++ b/src/views/App.vue
@@ -5,7 +5,6 @@
 
 <script setup lang="ts">
 import axios from '@nextcloud/axios'
-import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'
 import { useIsSmallMobile } from '@nextcloud/vue/composables/useIsMobile'
 import { ref } from 'vue'
@@ -18,10 +17,6 @@ import pages from '../pages.ts'
 defineExpose({ open, close })
 
 const isMobile = useIsSmallMobile()
-/** This is set to true in case the user already received the wizard but Nextcloud was updated to show the changelog only */
-const showChangelogOnly = loadState<boolean>('firstrunwizard', 'changelogOnly', false)
-/** The index of the changelog page for first run on updated Nextcloud Hub only */
-const changelogPage = Math.max(pages.findIndex((page) => page.id === 'whats-new'), 0)
 
 const showModal = ref(false)
 const currentPage = ref(-1)
@@ -57,7 +52,7 @@ function close() {
 		id="firstrunwizard"
 		class="first-run-wizard"
 		size="normal"
-		noClose
+		closeOnClickOutside
 		:dark="!isMobile"
 		:setReturnFocus
 		@close="close"
@@ -65,7 +60,7 @@ function close() {
 		@previous="currentPage -= 1">
 		<IntroAnimation
 			v-if="currentPage === -1"
-			@next="currentPage = showChangelogOnly ? changelogPage : 0" />
+			@next="currentPage = 0" />
 		<SlideShow
 			v-else
 			v-model="currentPage"
@@ -91,6 +86,97 @@ function close() {
 	}
 }
 
+/**
+ * Soften the backdrop. NcModal's opaque/dark backdrop is ~92% black, which dims
+ * the whole page quite heavily behind the wizard; ease it to a gentler tint that
+ * still lifts the modal off the page. (`--opaque` is the current class; `--dark`
+ * is kept for older NcModal versions.)
+ */
+.first-run-wizard.modal-mask--opaque,
+.first-run-wizard.modal-mask--dark {
+	background-color: rgba(0, 0, 0, 0.75) !important;
+	// Frosted backdrop. The blur radius itself is animated on enter/leave (below)
+	// for a "focus pull" — the page behind gradually softens as the wizard arrives.
+	backdrop-filter: blur(5px) saturate(1.08);
+	-webkit-backdrop-filter: blur(5px) saturate(1.08);
+}
+
+/**
+ * Custom appear/disappear animation. NcModal drives this modal with its `fade`
+ * transition, which by default just eases opacity (250ms) and lightly scales the
+ * container. We override it (scoped styles, so !important is required) to give the
+ * wizard a polished entrance: it rises with a spring, sharpens from a soft blur
+ * into focus, and the backdrop pulls focus behind it — then folds away cleanly.
+ */
+
+// Backdrop: fade + animate the blur radius so the page eases out of / into focus.
+.first-run-wizard.fade-enter-active {
+	transition: opacity .45s ease, backdrop-filter .55s ease, -webkit-backdrop-filter .55s ease !important;
+}
+
+.first-run-wizard.fade-leave-active {
+	transition: opacity .8s ease, backdrop-filter .9s ease, -webkit-backdrop-filter .9s ease !important;
+}
+
+.first-run-wizard.fade-enter-from,
+.first-run-wizard.fade-leave-to {
+	backdrop-filter: blur(0) saturate(1) !important;
+	-webkit-backdrop-filter: blur(0) saturate(1) !important;
+}
+
+// Container: spring up into place while sharpening from a soft blur.
+.first-run-wizard.fade-enter-active .modal-container {
+	transition:
+		transform .62s cubic-bezier(0.22, 1.35, 0.5, 1),
+		filter .45s ease,
+		box-shadow .62s ease !important;
+}
+
+.first-run-wizard.fade-leave-active .modal-container {
+	// Long, gently accelerating ease so it drifts away serenely.
+	transition:
+		transform .8s cubic-bezier(0.33, 0, 0.2, 1),
+		filter .8s ease,
+		box-shadow .8s ease !important;
+}
+
+.first-run-wizard.fade-enter-from .modal-container {
+	transform: translateY(40px) scale(0.9) !important;
+	filter: blur(12px) !important;
+	box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
+}
+
+.first-run-wizard.fade-enter-to .modal-container,
+.first-run-wizard.fade-leave-from .modal-container {
+	// Resting elevation the entrance settles into (and the exit lifts off from).
+	box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.35) !important;
+}
+
+.first-run-wizard.fade-leave-to .modal-container {
+	transform: translateY(22px) scale(0.93) !important;
+	filter: blur(6px) !important;
+	box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.first-run-wizard.modal-mask--opaque,
+	.first-run-wizard.modal-mask--dark {
+		backdrop-filter: none !important;
+		-webkit-backdrop-filter: none !important;
+	}
+
+	.first-run-wizard.fade-enter-active .modal-container,
+	.first-run-wizard.fade-leave-active .modal-container {
+		transition: none !important;
+	}
+
+	.first-run-wizard.fade-enter-from .modal-container,
+	.first-run-wizard.fade-leave-to .modal-container {
+		transform: none !important;
+		filter: none !important;
+	}
+}
+
 @media only screen and (max-width: 512px) {
 	.first-run-wizard {
 		.modal-wrapper .modal-container {