diff --git a/desktop/README.md b/desktop/README.md
index 08b9b79..3d69e92 100644
--- a/desktop/README.md
+++ b/desktop/README.md
@@ -24,7 +24,9 @@ pnpm test:e2e       # Playwright Electron e2e (needs a display: `xvfb-run -a pnp
                     # headless Linux box; run `pnpm build` first). e2e/*.spec.ts except native.spec.ts
                     # run against the FakeCore (a11y.spec: axe over every view in both themes;
                     # keyboard-a11y.spec: keyboard-only walkthrough; motion-contrast.spec: reduced
-                    # motion, measured contrast, forced colours, 200% zoom);
+                    # motion, measured contrast, forced colours, 200% zoom; exit-motion.spec:
+                    # closed dialogs, menus, popovers, toasts and the fullscreen player animate
+                    # out, inert, before they unmount, and go at once under reduced motion);
                     # e2e/native.spec.ts runs the REAL core (native addon,
                     # skipped when native/ isn't built) against e2e/fake-navidrome.ts, a small
                     # Subsonic JSON server: setup → sync → play → queue → rate → undo → lyrics →
diff --git a/desktop/e2e/exit-motion.spec.ts b/desktop/e2e/exit-motion.spec.ts
new file mode 100644
index 0000000..c172b6a
--- /dev/null
+++ b/desktop/e2e/exit-motion.spec.ts
@@ -0,0 +1,106 @@
+// Closed surfaces animate out: a dialog, menu, popover, toast or the fullscreen
+// player stays mounted for one exit animation, inert and untouchable, then
+// unmounts (lib/presence.ts). Under reduced motion it goes at once. The exits
+// are slowed here so the closing state is observable.
+import type { Locator, Page } from "@playwright/test";
+import { completeSetup, expect, playFirstAlbum, test } from "./fixtures";
+
+/** Stretch every exit so the test can look at it mid-flight. */
+async function slowExits(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    document.documentElement.style.setProperty("--dur-exit", "1500ms");
+    document.documentElement.style.setProperty("--dur-short", "1500ms");
+  });
+}
+
+/** The element's closing state: the class, inertness, and an animation of its own running. */
+async function exitState(el: Locator): Promise<{ closing: boolean; inert: boolean; animating: boolean }> {
+  return el.evaluate((n) => ({
+    closing: n.classList.contains("closing"),
+    inert: n.hasAttribute("inert"),
+    animating: n.getAnimations().some((a) => a.playState === "running"),
+  }));
+}
+
+async function expectExiting(el: Locator): Promise<void> {
+  await expect.poll(() => exitState(el)).toEqual({ closing: true, inert: true, animating: true });
+  await expect(el).toHaveCount(0);
+}
+
+test.describe("exit animations", () => {
+  test("menus, dialogs, the palette, popovers, toasts and the fullscreen player leave through an exit animation", async ({ hocket }) => {
+    const { page } = hocket;
+    await completeSetup(page);
+    await playFirstAlbum(page);
+    await slowExits(page);
+
+    // A toast, first while the one from playing is fresh (it auto-dismisses
+    // after 5 s; hovering holds it): dismissed by its action, it sinks away
+    // rather than vanishing.
+    const toast = page.getByTestId("toast").filter({ hasText: "Play" }).first();
+    await expect(toast).toBeVisible();
+    await toast.hover();
+    await toast.getByTestId("toast-action").click();
+    await expect.poll(() => exitState(toast)).toEqual({ closing: true, inert: true, animating: true });
+    await expect(page.locator('[data-testid="toast"].closing')).toHaveCount(0);
+
+    // Context menu: Escape starts the exit; it is inert at once and then gone.
+    await page.getByTestId("track-row").first().click({ button: "right" });
+    const menu = page.getByTestId("context-menu");
+    await expect(menu).toBeVisible();
+    await page.keyboard.press("Escape");
+    await expectExiting(menu);
+
+    // Dialog: the sheet and its scrim leave together; the shell is live again from the first frame.
+    await page.getByTestId("track-row").first().click({ button: "right" });
+    await menu.locator('[data-action="addToPlaylist"]').click();
+    const dialog = page.getByTestId("dialog-addToPlaylist");
+    await expect(dialog).toBeVisible();
+    expect(await page.getByTestId("app-body").getAttribute("inert")).not.toBeNull();
+    await page.keyboard.press("Escape");
+    await expect.poll(() => exitState(dialog)).toEqual({ closing: true, inert: true, animating: true });
+    expect(await page.locator(".overlay").evaluate((n) => n.classList.contains("closing") && n.hasAttribute("inert"))).toBe(true);
+    expect(await page.getByTestId("app-body").getAttribute("inert")).toBeNull();
+    await expect(dialog).toHaveCount(0);
+
+    // Command palette.
+    await page.getByTestId("content").click();
+    await page.keyboard.press("Control+k");
+    const palette = page.getByTestId("palette");
+    await expect(palette).toBeVisible();
+    await page.keyboard.press("Escape");
+    await expectExiting(palette);
+
+    // Jobs popover.
+    await page.getByTestId("jobs-button").click();
+    const popover = page.getByTestId("jobs-popover");
+    await expect(popover).toBeVisible();
+    await page.getByTestId("jobs-button").click();
+    await expectExiting(popover);
+
+    // The fullscreen player: fades out, focus already back in the shell.
+    await page.getByTestId("content").click();
+    await page.keyboard.press("f");
+    const fs = page.getByTestId("fullscreen-player");
+    await expect(fs).toBeVisible();
+    await page.keyboard.press("Escape");
+    await expect.poll(() => exitState(fs)).toEqual({ closing: true, inert: true, animating: true });
+    expect(await page.evaluate(() => !document.activeElement?.closest('[data-testid="fullscreen-player"]'))).toBe(true);
+    await expect(fs).toHaveCount(0);
+  });
+
+  test("under reduced motion a closed surface goes at once", async ({ hocket }) => {
+    const { page } = hocket;
+    await page.emulateMedia({ reducedMotion: "reduce" });
+    await completeSetup(page);
+    await slowExits(page);
+    await page.getByTestId("content").click();
+    await page.keyboard.press("Control+k");
+    const palette = page.getByTestId("palette");
+    await expect(palette).toBeVisible();
+    await page.keyboard.press("Escape");
+    // Well inside the stretched exit: nothing waited for an animation that never ran.
+    await expect(palette).toHaveCount(0, { timeout: 500 });
+    expect(await page.evaluate(() => document.getAnimations().filter((a) => a.playState === "running").length)).toBe(0);
+  });
+});
diff --git a/desktop/src/renderer/App.tsx b/desktop/src/renderer/App.tsx
index a792735..ada692e 100644
--- a/desktop/src/renderer/App.tsx
+++ b/desktop/src/renderer/App.tsx
@@ -32,7 +32,6 @@ export function App() {
   const ready = useApp((s) => s.ready);
   // The core probes before installing: ServersChanged only arrives once a server is real.
   const hasServer = useApp((s) => s.servers.length > 0);
-  const fullscreen = useApp((s) => s.fullscreen);
   const coreKind = useApp((s) => s.meta?.coreKind);
   const network = useApp((s) => s.network);
   const panels = useApp((s) => s.panels);
@@ -68,7 +67,7 @@ export function App() {
       <PlayerBar inert={modal} />
       <NowPlayingAnnouncer />
       {/* Covers the whole window (sidebar, panels and player bar included). */}
-      {fullscreen ? <FullscreenPlayer /> : null}
+      <FullscreenPlayer />
       <ContextMenu />
       <CommandPalette />
       <Dialogs />
diff --git a/desktop/src/renderer/components/CommandPalette.tsx b/desktop/src/renderer/components/CommandPalette.tsx
index 547e8a6..85d096b 100644
--- a/desktop/src/renderer/components/CommandPalette.tsx
+++ b/desktop/src/renderer/components/CommandPalette.tsx
@@ -10,6 +10,7 @@ import { formatChord, parseChord } from "../store/shortcuts";
 import { Artwork } from "./Artwork";
 import { Icon, hasIcon } from "./Icon";
 import { trapTab, useReturnFocus } from "../lib/focus";
+import { usePresence } from "../lib/presence";
 
 interface Item extends Rankable {
   icon?: string;
@@ -31,6 +32,8 @@ export function CommandPalette() {
   const [active, setActive] = useState(0);
   const input = useRef<HTMLInputElement>(null);
   const seq = useRef(0);
+  // The closed palette stays mounted, inert, while its exit plays.
+  const { value: shown, closing, motion, exitProps } = usePresence<true, HTMLDivElement>(open || undefined);
   useReturnFocus(open);
 
   useEffect(() => {
@@ -76,7 +79,7 @@ export function CommandPalette() {
     if (open) document.getElementById(`pal-opt-${active}`)?.scrollIntoView({ block: "nearest" });
   }, [active, open]);
 
-  if (!open) return null;
+  if (!shown) return null;
   const run = (i: Item) => {
     setOpen(false);
     i.run();
@@ -91,8 +94,8 @@ export function CommandPalette() {
   };
   const firstAction = ranked.findIndex((r) => r.item.kind === "action");
   return (
-    <div className="overlay" onMouseDown={(e) => e.target === e.currentTarget && setOpen(false)}>
-      <div className="palette fade-in" role="dialog" aria-modal="true" aria-label={t("action.palette")} onKeyDown={onKey} data-testid="palette">
+    <div className={`overlay ${closing ? "closing" : ""}`} inert={closing} onMouseDown={(e) => e.target === e.currentTarget && setOpen(false)}>
+      <div {...exitProps} className={`palette ${motion}`} role="dialog" aria-modal="true" aria-label={t("action.palette")} onKeyDown={onKey} data-testid="palette">
         <input ref={input} className="input" placeholder={t("palette.placeholder")} value={query} onChange={(e) => setQuery(e.target.value)} role="combobox" aria-label={t("action.palette")} aria-autocomplete="list" aria-expanded={ranked.length > 0} aria-controls="palette-list" aria-activedescendant={ranked[active] ? `pal-opt-${active}` : undefined} data-testid="palette-input" />
         {ranked.length === 0 ? <div className="group" role="status">{t("palette.empty")}</div> : null}
         <div className="list" id="palette-list" role="listbox" aria-label={t("a11y.paletteResults")}>
diff --git a/desktop/src/renderer/components/ContextMenu.tsx b/desktop/src/renderer/components/ContextMenu.tsx
index c2668a3..3b244c6 100644
--- a/desktop/src/renderer/components/ContextMenu.tsx
+++ b/desktop/src/renderer/components/ContextMenu.tsx
@@ -12,6 +12,7 @@ import { useApp } from "../store/app";
 import { executeAction, type ActionContext } from "../store/actions";
 import { Icon, hasIcon } from "./Icon";
 import { handOnFocus } from "../lib/focus";
+import { usePresence } from "../lib/presence";
 
 /** Where focus goes back to when the menu closes. */
 let returnFocus: HTMLElement | null = null;
@@ -54,31 +55,34 @@ export function openContextMenuFromKeyboard(): boolean {
 }
 
 export function ContextMenu() {
-  const menu = useApp((s) => s.contextMenu);
+  const live = useApp((s) => s.contextMenu);
   const close = useApp((s) => s.closeContextMenu);
   const shortcuts = useApp((s) => s.shortcuts);
   const platform = useApp((s) => s.meta?.platform ?? "linux");
   const ref = useRef<HTMLDivElement>(null);
+  // The closed menu stays mounted, inert, while its exit plays. Everything
+  // below that positions, focuses or listens is keyed on the live state.
+  const { value: menu, motion, exitProps } = usePresence(live, ref);
   const [pos, setPos] = useState({ x: 0, y: 0 });
   const [active, setActive] = useState(-1);
   const actions = menu?.actions ?? [];
 
   useLayoutEffect(() => {
-    if (!menu || !ref.current) return;
+    if (!live || !ref.current) return;
     // Layout size, not getBoundingClientRect(): the menu opens scaled down by its entrance animation.
     const r = { width: ref.current.offsetWidth, height: ref.current.offsetHeight };
-    const x = Math.min(menu.x, window.innerWidth - r.width - 6);
-    const y = Math.min(menu.y, window.innerHeight - r.height - 6);
+    const x = Math.min(live.x, window.innerWidth - r.width - 6);
+    const y = Math.min(live.y, window.innerHeight - r.height - 6);
     setPos({ x: Math.max(4, x), y: Math.max(4, y) });
     // Keyboard-opened menus start on the first enabled item, like native menus.
-    setActive(menu.keyboard ? menu.actions.findIndex((a) => a.enabled) : -1);
+    setActive(live.keyboard ? live.actions.findIndex((a) => a.enabled) : -1);
     ref.current.focus();
-  }, [menu]);
+  }, [live]);
 
   // Focus goes back to the trigger when the menu closes (unless an action moved it on purpose).
   const wasOpen = useRef(false);
   useEffect(() => {
-    if (menu) { wasOpen.current = true; return; }
+    if (live) { wasOpen.current = true; return; }
     if (!wasOpen.current) return;
     wasOpen.current = false;
     const el = returnFocus;
@@ -89,10 +93,10 @@ export function ContextMenu() {
     if (useApp.getState().dialog || useApp.getState().paletteOpen) return;
     handOnFocus(null);
     if (el && el.isConnected && focusLost) el.focus({ preventScroll: true });
-  }, [menu]);
+  }, [live]);
 
   useEffect(() => {
-    if (!menu) return;
+    if (!live) return;
     const onDown = (e: MouseEvent) => {
       if (ref.current && !ref.current.contains(e.target as Node)) close();
     };
@@ -105,7 +109,7 @@ export function ContextMenu() {
       window.removeEventListener("blur", onBlur);
       window.removeEventListener("resize", onBlur);
     };
-  }, [menu, close]);
+  }, [live, close]);
 
   if (!menu) return null;
   const run = (a: ActionDescriptor) => {
@@ -152,7 +156,7 @@ export function ContextMenu() {
   };
   let lastCategory: string | undefined;
   return (
-    <div ref={ref} className="menu fade-in" role="menu" aria-activedescendant={active >= 0 ? `cm-item-${active}` : undefined} tabIndex={-1} style={{ left: pos.x, top: pos.y }} onKeyDown={onKey} data-testid="context-menu">
+    <div {...exitProps} className={`menu ${motion}`} role="menu" aria-activedescendant={active >= 0 ? `cm-item-${active}` : undefined} tabIndex={-1} style={{ left: pos.x, top: pos.y }} onKeyDown={onKey} data-testid="context-menu">
       {actions.map((a, i) => {
         const sep = lastCategory !== undefined && lastCategory !== a.category;
         lastCategory = a.category;
diff --git a/desktop/src/renderer/components/Dialogs.tsx b/desktop/src/renderer/components/Dialogs.tsx
index 282daa5..0a3f78f 100644
--- a/desktop/src/renderer/components/Dialogs.tsx
+++ b/desktop/src/renderer/components/Dialogs.tsx
@@ -9,21 +9,25 @@ import { fmtBytes, fmtDate, fmtTime } from "../lib/format";
 import { Artwork } from "./Artwork";
 import { Icon } from "./Icon";
 import { trapTab, useReturnFocus } from "../lib/focus";
+import { usePresence } from "../lib/presence";
 
 export function Dialogs() {
-  const dialog = useApp((s) => s.dialog);
+  const live = useApp((s) => s.dialog);
   const close = useApp((s) => s.closeDialog);
   const ref = useRef<HTMLDivElement>(null);
-  useReturnFocus(!!dialog);
+  // The closed dialog stays mounted, inert, while its exit plays; focus goes
+  // back and the Connect picker closes on the live state, not the animation.
+  const { value: dialog, closing, motion, exitProps } = usePresence(live, ref);
+  useReturnFocus(!!live);
   useEffect(() => {
-    if (!dialog) return;
+    if (!live) return;
     // Initial focus: the field, else the safe (non-destructive) button, else the first control.
     const root = ref.current;
     const first = root?.querySelector<HTMLElement>("input, textarea, select") ?? root?.querySelector<HTMLElement>("[data-autofocus]") ?? root?.querySelector<HTMLElement>("button, [tabindex='0']");
     first?.focus();
-    if (dialog.kind === "connect") return () => bridge().dispatch({ type: "closeHandoffPicker" });
+    if (live.kind === "connect") return () => bridge().dispatch({ type: "closeHandoffPicker" });
     return undefined;
-  }, [dialog]);
+  }, [live]);
   if (!dialog) return null;
   const onKey = (e: React.KeyboardEvent<HTMLDivElement>) => {
     e.stopPropagation();
@@ -35,8 +39,8 @@ export function Dialogs() {
     trapTab(e);
   };
   return (
-    <div className="overlay" onMouseDown={(e) => e.target === e.currentTarget && close()}>
-      <div ref={ref} className="dialog fade-in" role={dialog.kind === "confirm" ? "alertdialog" : "dialog"} aria-modal="true" aria-labelledby="dialog-title" aria-describedby={dialog.kind === "confirm" ? "dialog-message" : undefined} onKeyDown={onKey} data-testid={`dialog-${dialog.kind}`}>
+    <div className={`overlay ${closing ? "closing" : ""}`} inert={closing} onMouseDown={(e) => e.target === e.currentTarget && close()}>
+      <div {...exitProps} className={`dialog ${motion}`} role={dialog.kind === "confirm" ? "alertdialog" : "dialog"} aria-modal="true" aria-labelledby="dialog-title" aria-describedby={dialog.kind === "confirm" ? "dialog-message" : undefined} onKeyDown={onKey} data-testid={`dialog-${dialog.kind}`}>
         {dialog.kind === "prompt" ? <Prompt {...dialog} /> : null}
         {dialog.kind === "confirm" ? <Confirm {...dialog} /> : null}
         {dialog.kind === "addToPlaylist" ? <AddToPlaylist trackIds={dialog.trackIds} /> : null}
diff --git a/desktop/src/renderer/components/RightPanel.tsx b/desktop/src/renderer/components/RightPanel.tsx
index b7862e5..fcf042f 100644
--- a/desktop/src/renderer/components/RightPanel.tsx
+++ b/desktop/src/renderer/components/RightPanel.tsx
@@ -12,6 +12,7 @@ import { Tabs, tabPanelProps } from "./Tabs";
 import { bridge } from "../core/bridge";
 import { SK } from "@shared/settings-keys";
 import { NARROW, useMediaQuery } from "../lib/media";
+import { usePresence } from "../lib/presence";
 
 export function RightPanel() {
   const panels = useApp((s) => s.panels);
@@ -46,13 +47,17 @@ export function RightPanel() {
   const narrow = useMediaQuery(NARROW);
   const drawerOpen = useApp((s) => s.drawerOpen);
   const setDrawerOpen = useApp((s) => s.setDrawerOpen);
-  if (narrow ? !drawerOpen : !panels.rightOpen) return null;
+  // The drawer withdraws before it unmounts; the docked panel is part of the
+  // layout (the content pane widens the moment it closes), so it just goes.
+  const open = narrow ? drawerOpen : panels.rightOpen;
+  const presence = usePresence(open || undefined, ref, { instant: !narrow });
+  if (!presence.value) return null;
   const qc = panels.queueCollapsed;
   const lc = panels.lyricsCollapsed;
   const queueFlex = qc ? "0 0 32px" : lc ? "1 1 auto" : `${panels.splitRatio} 1 0`;
   const lyricsFlex = lc ? "0 0 32px" : qc ? "1 1 auto" : `${1 - panels.splitRatio} 1 0`;
   return (
-    <aside ref={ref} id="side-panel" className={`right-panel ${narrow ? "drawer" : ""}`} aria-label={t("a11y.sidePanel")} data-testid="right-panel"
+    <aside {...presence.exitProps} id="side-panel" className={`right-panel ${narrow ? "drawer" : ""} ${presence.closing ? "closing" : ""}`} aria-label={t("a11y.sidePanel")} data-testid="right-panel"
       onKeyDown={narrow ? (e) => { if (e.key === "Escape" && !e.defaultPrevented) { e.preventDefault(); e.stopPropagation(); setDrawerOpen(false); document.querySelector<HTMLElement>('[data-testid="toggle-side-panel"]')?.focus(); } } : undefined}>
       <div className="resize-handle" style={{ left: -3, right: "auto" }} onMouseDown={(e) => { e.preventDefault(); setWidthDrag({ x: e.clientX, w: panels.rightWidth }); }} role="separator" aria-orientation="vertical" aria-label={t("a11y.resizeSidePanel")} aria-valuenow={panels.rightWidth} aria-valuemin={260} aria-valuemax={560} tabIndex={0}
         onKeyDown={(e) => { const d = e.key === "ArrowLeft" ? 16 : e.key === "ArrowRight" ? -16 : 0; if (!d) return; e.preventDefault(); e.stopPropagation(); setPanels({ rightWidth: Math.max(260, Math.min(560, panels.rightWidth + d)) }); }} />
diff --git a/desktop/src/renderer/components/Toasts.tsx b/desktop/src/renderer/components/Toasts.tsx
index e7b1db3..bd030a7 100644
--- a/desktop/src/renderer/components/Toasts.tsx
+++ b/desktop/src/renderer/components/Toasts.tsx
@@ -2,12 +2,15 @@ import { useEffect, useState } from "react";
 import type { Command } from "@core/api";
 import { useApp } from "../store/app";
 import { bridge } from "../core/bridge";
+import { usePresenceList } from "../lib/presence";
 
 export function Toasts() {
   const toasts = useApp((s) => s.toasts);
   const dismiss = useApp((s) => s.dismissToast);
   // Hovering or focusing a toast holds every toast (WCAG 2.2.1): an Undo must stay reachable.
   const [held, setHeld] = useState(false);
+  // A dismissed toast stays mounted, inert, while it sinks away.
+  const entries = usePresenceList(toasts, (t) => t.id);
   useEffect(() => {
     if (held) return;
     const timers = toasts.map((t) => setTimeout(() => dismiss(t.id), Math.max(1500, t.durationMs)));
@@ -16,8 +19,8 @@ export function Toasts() {
   // Always mounted: a live region must exist before its content changes to be announced.
   return (
     <div className="toasts" role="status" aria-live="polite" data-testid="toasts" onMouseEnter={() => setHeld(true)} onMouseLeave={() => setHeld(false)} onFocus={() => setHeld(true)} onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setHeld(false); }}>
-      {toasts.map((t) => (
-        <div key={t.id} className="toast fade-in" data-testid="toast">
+      {entries.map(({ item: t, key, motion, exitProps }) => (
+        <div key={key} {...exitProps} className={`toast ${motion}`} data-testid="toast">
           <span>{t.message}</span>
           {t.actionLabel && t.actionCommand ? (
             <button
diff --git a/desktop/src/renderer/components/TopBar.tsx b/desktop/src/renderer/components/TopBar.tsx
index a11ad7f..6921a46 100644
--- a/desktop/src/renderer/components/TopBar.tsx
+++ b/desktop/src/renderer/components/TopBar.tsx
@@ -9,6 +9,7 @@ import { bridge } from "../core/bridge";
 import { Artwork } from "./Artwork";
 import { Icon } from "./Icon";
 import { fmtRelative } from "../lib/format";
+import { usePresence } from "../lib/presence";
 
 export function TopBar() {
   const platform = useApp((s) => s.meta?.platform ?? "linux");
@@ -137,12 +138,15 @@ function SearchBox() {
     </div>
   );
   const expanded = open && !!q.trim();
+  // The sheet lifts away on Escape, an outside click or a pick; when the query
+  // is cleared there is nothing left to show, so it goes at once.
+  const sheet = usePresence(expanded || undefined, pop, { instant: !q.trim() });
   return (
     <div className="search" role="search">
       <Icon name="search" size={14} />
       <input ref={input} className="input" type="search" placeholder={t("search.placeholder")} value={q} onChange={(e) => { setQ(e.target.value); setOpen(true); setActive(-1); }} onFocus={() => q && setOpen(true)} onKeyDown={onKey} aria-label={t("search.placeholder")} role="combobox" aria-autocomplete="list" aria-expanded={expanded} aria-controls={expanded ? "search-results" : undefined} aria-activedescendant={expanded && active >= 0 ? `search-opt-${active}` : undefined} data-testid="search-input" />
-      {expanded ? (
-        <div ref={pop} id="search-results" className="search-popover fade-in" role="listbox" aria-label={t("a11y.searchResults")} style={{ minHeight }} data-testid="search-popover">
+      {sheet.value ? (
+        <div {...sheet.exitProps} id="search-results" className={`search-popover ${sheet.motion}`} role="listbox" aria-label={t("a11y.searchResults")} style={{ minHeight }} data-testid="search-popover">
           {local && !localRows.length && !serverRows.length ? <div className="search-divider" role="presentation">{t("search.noResults", { query: q })}</div> : null}
           {localRows.length ? <div className="search-section" role="group" aria-label={t("nav.library")}>{localRows.map(renderRow)}</div> : null}
           {local ? <div className="search-divider" role="presentation" data-testid="search-divider">{server ? t("search.server") : t("search.searching")}</div> : null}
@@ -162,6 +166,7 @@ function JobsIndicator() {
   const button = useRef<HTMLButtonElement>(null);
   const running = jobs.filter((j) => j.state === "running" || j.state === "queued" || j.state === "paused");
   const failed = jobs.some((j) => j.state === "failed") || problems.length > 0;
+  const popover = usePresence<true, HTMLDivElement>(open || undefined);
   useEffect(() => {
     if (!open) return;
     const onDown = (e: MouseEvent) => { if (!ref.current?.contains(e.target as Node)) setOpen(false); };
@@ -176,8 +181,8 @@ function JobsIndicator() {
         <Icon name={running.length ? "spinner" : failed ? "warn" : "cloud"} className={running.length ? "spin" : ""} />
         {running.length || failed ? <span className={`dot ${failed ? "problem" : ""}`} /> : null}
       </button>
-      {open ? (
-        <div className="popover fade-in" role="dialog" aria-label={t("jobs.title")} data-testid="jobs-popover">
+      {popover.value ? (
+        <div {...popover.exitProps} className={`popover ${popover.motion}`} role="dialog" aria-label={t("jobs.title")} data-testid="jobs-popover">
           <div className="section-title">{t("jobs.jobsHeading")}</div>
           {!jobs.length ? <div className="item muted">{t("jobs.idle")}</div> : null}
           {sync && !sync.finished ? <div className="item muted small">{t("sync.syncing", { phase: sync.phase })}</div> : null}
diff --git a/desktop/src/renderer/components/controls.tsx b/desktop/src/renderer/components/controls.tsx
index 550e5fc..2ef801b 100644
--- a/desktop/src/renderer/components/controls.tsx
+++ b/desktop/src/renderer/components/controls.tsx
@@ -14,6 +14,7 @@
 import { Children, isValidElement, useEffect, useId, useLayoutEffect, useRef, useState, type CSSProperties, type ReactElement, type ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { Icon } from "./Icon";
+import { usePresence } from "../lib/presence";
 
 // ---- Slider ---------------------------------------------------------------------------------
 
@@ -122,6 +123,8 @@ export function Select({ value, onChange, children, disabled, className, style,
   const typed = useRef({ text: "", at: 0 });
   const listId = useId();
   const optId = (i: number) => `${listId}-o${i}`;
+  // The closed menu stays mounted, inert, while its exit plays.
+  const menu = usePresence(open || undefined, list);
 
   const place = () => {
     const r = button.current?.getBoundingClientRect();
@@ -234,8 +237,8 @@ export function Select({ value, onChange, children, disabled, className, style,
         <span className="m3-select-value">{current?.label ?? ""}</span>
         <Icon name="chevronDown" size={20} className="m3-select-chevron" />
       </button>
-      {open && pos ? createPortal(
-        <div ref={list} id={listId} role="listbox" className="m3-menu m3-select-menu" aria-label={aria["aria-label"]} aria-labelledby={aria["aria-labelledby"]} style={{ left: pos.left, top: pos.top, bottom: pos.bottom, minWidth: pos.minWidth, maxHeight: pos.maxHeight }} data-testid={aria["data-testid"] ? `${aria["data-testid"]}-menu` : undefined}
+      {menu.value && pos ? createPortal(
+        <div {...menu.exitProps} id={listId} role="listbox" className={`m3-menu m3-select-menu ${menu.closing ? "closing" : ""}`} aria-label={aria["aria-label"]} aria-labelledby={aria["aria-labelledby"]} style={{ left: pos.left, top: pos.top, bottom: pos.bottom, minWidth: pos.minWidth, maxHeight: pos.maxHeight }} data-testid={aria["data-testid"] ? `${aria["data-testid"]}-menu` : undefined}
           onMouseDown={(e) => e.preventDefault()}>
           {options.map((o, i) => (
             <div key={o.value} id={optId(i)} role="option" aria-selected={o.value === String(value)} aria-disabled={o.disabled || undefined} className={`m3-option ${i === active ? "active" : ""} ${o.value === String(value) ? "selected" : ""}`} data-value={o.value}
diff --git a/desktop/src/renderer/lib/presence.test.ts b/desktop/src/renderer/lib/presence.test.ts
new file mode 100644
index 0000000..81be1c3
--- /dev/null
+++ b/desktop/src/renderer/lib/presence.test.ts
@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import { mergePresence, type PresenceEntry } from "./presence";
+
+type Toast = { id: string; message: string };
+const keyOf = (t: Toast) => t.id;
+const a = { id: "a", message: "A" };
+const b = { id: "b", message: "B" };
+const c = { id: "c", message: "C" };
+
+describe("mergePresence", () => {
+  it("starts with every live item open, in order", () => {
+    expect(mergePresence<Toast>([], [a, b], keyOf)).toEqual([
+      { item: a, key: "a", closing: false },
+      { item: b, key: "b", closing: false },
+    ]);
+  });
+
+  it("keeps a removed item in place, closing, and appends new ones", () => {
+    const rendered = mergePresence<Toast>([], [a, b], keyOf);
+    expect(mergePresence(rendered, [b, c], keyOf)).toEqual([
+      { item: a, key: "a", closing: true },
+      { item: b, key: "b", closing: false },
+      { item: c, key: "c", closing: false },
+    ]);
+  });
+
+  it("reopens an item that comes back while closing", () => {
+    const closing: PresenceEntry<Toast>[] = [{ item: a, key: "a", closing: true }];
+    expect(mergePresence(closing, [a], keyOf)).toEqual([{ item: a, key: "a", closing: false }]);
+  });
+
+  it("keeps entry identity when nothing about an item changed", () => {
+    const rendered = mergePresence<Toast>([], [a], keyOf);
+    const next = mergePresence(rendered, [a], keyOf);
+    expect(next[0]).toBe(rendered[0]);
+    const gone = mergePresence(next, [], keyOf);
+    expect(mergePresence(gone, [], keyOf)[0]).toBe(gone[0]);
+  });
+
+  it("takes the live item's newer value for an open key", () => {
+    const rendered = mergePresence<Toast>([], [a], keyOf);
+    const a2 = { id: "a", message: "A again" };
+    expect(mergePresence(rendered, [a2], keyOf)[0]?.item).toBe(a2);
+  });
+});
diff --git a/desktop/src/renderer/lib/presence.ts b/desktop/src/renderer/lib/presence.ts
new file mode 100644
index 0000000..a86bb19
--- /dev/null
+++ b/desktop/src/renderer/lib/presence.ts
@@ -0,0 +1,153 @@
+// Exit animations for transient surfaces (dialogs, menus, popovers, toasts).
+//
+// React unmounts a closed surface in the same commit that closes it, so a CSS
+// exit never gets a frame to play. usePresence keeps the surface mounted for
+// one more animation: `value` holds the last open value while `closing` is
+// true, the element swaps its `fade-in` class for `closing` (the stylesheet's
+// exit keyframes, `animation-fill-mode: forwards` so it holds the end state
+// until React removes it) and is inert, so it can't take focus, keys or
+// clicks on the way out. It unmounts on its own animationend, at once when
+// there is no exit animation to wait for (reduced motion turns them all off),
+// or after a fallback timeout should the event never arrive.
+//
+// Only the mounted/unmounted decision lives here; what the surface does when
+// it opens or closes (return focus, dispatch a command) stays keyed on the
+// live state, so none of that waits for the animation.
+import { useLayoutEffect, useRef, useState, type AnimationEvent, type RefObject } from "react";
+
+/** Longer than any exit animation: the unmount fallback when animationend never arrives. */
+const FALLBACK_MS = 600;
+
+/** Whether `el` has an animation of its own still to play (not one inside it). */
+function animating(el: Element): boolean {
+  return el.getAnimations().some((a) => a.playState !== "finished" && a.playState !== "idle");
+}
+
+export interface ExitProps<E extends HTMLElement> {
+  ref: RefObject<E | null>;
+  /** Set while closing: nothing inside can take focus or pointer events any more. */
+  inert: boolean | undefined;
+  onAnimationEnd: (e: AnimationEvent<E>) => void;
+}
+
+export interface Presence<T, E extends HTMLElement> {
+  /** The live value while open, the last open value while the exit plays, else undefined. */
+  value: T | undefined;
+  /** True while the exit animation plays. */
+  closing: boolean;
+  /** The surface's motion class: `fade-in` while open, `closing` on the way out. */
+  motion: "fade-in" | "closing";
+  /** Spread onto the element that carries the exit animation. */
+  exitProps: ExitProps<E>;
+}
+
+/**
+ * Presence for one surface. `live` is its open state (`undefined`, `null` or
+ * `false` when closed); pass a stable value, as a new object each render
+ * would re-render forever. `ref` is the animated element's ref when the
+ * component has its own; otherwise one is made and returned in `exitProps`.
+ * With `instant`, a close unmounts at once (nothing worth animating, or the
+ * surface is part of the layout rather than floating over it).
+ */
+export function usePresence<T, E extends HTMLElement = HTMLElement>(live: T | undefined | null | false, ref?: RefObject<E | null>, opts?: { instant?: boolean }): Presence<T, E> {
+  const own = useRef<E>(null);
+  const el = ref ?? own;
+  const open = live !== undefined && live !== null && live !== false;
+  const [held, setHeld] = useState<T | undefined>(open ? (live as T) : undefined);
+  const [wasOpen, setWasOpen] = useState(open);
+  const [closing, setClosing] = useState(false);
+  // State adjusted during render (React's "storing information from previous
+  // renders"): the last open value is kept through the exit, and a close
+  // starts the exit while a reopen cancels it.
+  if (open && held !== live) setHeld(live as T);
+  if (wasOpen !== open) {
+    setWasOpen(open);
+    setClosing(!open && !opts?.instant);
+  }
+
+  useLayoutEffect(() => {
+    if (!closing) return;
+    const node = el.current;
+    // No exit to wait for: reduced motion, or a surface without exit keyframes.
+    if (!node || !animating(node)) {
+      setClosing(false);
+      return;
+    }
+    const t = setTimeout(() => setClosing(false), FALLBACK_MS);
+    return () => clearTimeout(t);
+  }, [closing, el]);
+
+  const onAnimationEnd = (e: AnimationEvent<E>) => {
+    if (e.target === e.currentTarget) setClosing(false);
+  };
+  return {
+    value: open ? (live as T) : closing ? held : undefined,
+    closing,
+    motion: closing ? "closing" : "fade-in",
+    exitProps: { ref: el, inert: closing || undefined, onAnimationEnd },
+  };
+}
+
+export interface PresenceEntry<T> {
+  item: T;
+  key: string;
+  closing: boolean;
+}
+
+/**
+ * The next rendered list once `items` is the live list: entries keep their
+ * place, ones no longer live start closing, new ones join at the end.
+ */
+export function mergePresence<T>(rendered: PresenceEntry<T>[], items: T[], keyOf: (item: T) => string): PresenceEntry<T>[] {
+  const live = new Map(items.map((item) => [keyOf(item), item]));
+  const out = rendered.map((e) => {
+    const item = live.get(e.key);
+    if (item !== undefined) return e.item === item && !e.closing ? e : { item, key: e.key, closing: false };
+    return e.closing ? e : { ...e, closing: true };
+  });
+  const seen = new Set(rendered.map((e) => e.key));
+  for (const item of items) {
+    const key = keyOf(item);
+    if (!seen.has(key)) out.push({ item, key, closing: false });
+  }
+  return out;
+}
+
+export interface PresenceListEntry<T, E extends HTMLElement> extends PresenceEntry<T> {
+  motion: "fade-in" | "closing";
+  exitProps: { ref: (el: E | null) => void; inert: boolean | undefined; onAnimationEnd: (e: AnimationEvent<E>) => void };
+}
+
+/** Presence for a keyed list (toasts): each item removed from `items` stays until its exit ends. */
+export function usePresenceList<T, E extends HTMLElement = HTMLElement>(items: T[], keyOf: (item: T) => string): PresenceListEntry<T, E>[] {
+  const [seen, setSeen] = useState(items);
+  const [rendered, setRendered] = useState<PresenceEntry<T>[]>(() => mergePresence([], items, keyOf));
+  if (seen !== items) {
+    setSeen(items);
+    setRendered((prev) => mergePresence(prev, items, keyOf));
+  }
+  const nodes = useRef(new Map<string, E>());
+  const drop = (keys: string[]) => setRendered((prev) => prev.filter((e) => !(e.closing && keys.includes(e.key))));
+
+  useLayoutEffect(() => {
+    const closing = rendered.filter((e) => e.closing).map((e) => e.key);
+    if (!closing.length) return;
+    const still = closing.filter((key) => {
+      const node = nodes.current.get(key);
+      return !node || !animating(node);
+    });
+    if (still.length) drop(still);
+    const t = setTimeout(() => drop(closing), FALLBACK_MS);
+    return () => clearTimeout(t);
+  }, [rendered]);
+
+  return rendered.map((e) => ({
+    ...e,
+    motion: e.closing ? "closing" : "fade-in",
+    exitProps: {
+      ref: (el: E | null) => { if (el) nodes.current.set(e.key, el); else nodes.current.delete(e.key); },
+      inert: e.closing || undefined,
+      onAnimationEnd: (ev: AnimationEvent<E>) => { if (ev.target === ev.currentTarget) drop([e.key]); },
+    },
+  }));
+}
diff --git a/desktop/src/renderer/styles/controls.css b/desktop/src/renderer/styles/controls.css
index d10b83e..9982981 100644
--- a/desktop/src/renderer/styles/controls.css
+++ b/desktop/src/renderer/styles/controls.css
@@ -94,6 +94,8 @@ label.switch { display: inline-flex; align-items: center; gap: 10px; }
 .m3-select.open .m3-select-chevron { transform: rotate(180deg); color: var(--accent-text); }
 .m3-menu { position: fixed; z-index: 120; overflow-y: auto; padding: 6px; background: var(--bg-elev); color: var(--fg); border-radius: var(--shape-lg); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; transform-origin: top center; animation: m3-menu-in var(--dur-spring) var(--spring-fast); }
 @keyframes m3-menu-in { from { transform: scaleY(0.85); } }
+.m3-menu.closing { animation: m3-menu-out var(--dur-short) var(--ease-emphasized-accel) forwards; }
+@keyframes m3-menu-out { to { opacity: 0; transform: scaleY(0.9); } }
 .m3-option { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px 0 8px; border-radius: var(--shape-md); cursor: pointer; white-space: nowrap; transition: border-radius var(--dur-spring) var(--spring-fast); }
 .m3-option-check { display: inline-flex; width: 18px; flex: 0 0 auto; color: var(--accent-text); }
 .m3-option.active { background: var(--bg-hover); }
diff --git a/desktop/src/renderer/styles/global.css b/desktop/src/renderer/styles/global.css
index ff54053..3fd9408 100644
--- a/desktop/src/renderer/styles/global.css
+++ b/desktop/src/renderer/styles/global.css
@@ -42,6 +42,11 @@
   --dur-short: 150ms;
   --dur-spring: 350ms;
   --dur-spring-long: 500ms;
+  /* Exits are quicker than entrances and accelerate away (Material 3's
+     emphasised-accelerate): sheets take --dur-exit, menus and snackbars
+     --dur-short. lib/presence.ts keeps a closed surface mounted, with the
+     `closing` class in place of `fade-in`, until its exit animation ends. */
+  --dur-exit: 200ms;
   /* Tonal surfaces. A 5% accent wash over any theme surface keeps every text
      colour at 4.5:1 plain and hovered (checked across the contrast.test accent
      sweep), but not under --bg-active; so items on a tonal surface use the
@@ -346,7 +351,7 @@ h3 { font-size: var(--fs-lg); }
 .popover .item { padding: 6px 12px; display: flex; flex-direction: column; gap: 4px; }
 .popover .item + .item { border-top: 1px solid var(--border); }
 .progress { height: 4px; border-radius: var(--shape-full); background: var(--bg-active); overflow: hidden; }
-.progress > div { height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.25s var(--ease); }
+.progress > div { height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--dur-spring) var(--ease-emphasized); }
 .progress.failed > div { background: var(--warn); }
 
 /* Content */
@@ -466,7 +471,7 @@ h3 { font-size: var(--fs-lg); }
 .seek .bar { position: relative; flex: 1; height: 14px; display: flex; align-items: center; cursor: default; }
 .seek .bar .track { position: relative; width: 100%; height: 4px; border-radius: 2px; background: var(--bg-active); overflow: visible; }
 .seek .bar .fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 2px; background: var(--accent); }
-.seek .bar .knob { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--fg); transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.1s; }
+.seek .bar .knob { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--fg); transform: translate(-50%, -50%); opacity: 0; transition: opacity var(--dur-short) var(--ease-emphasized); }
 .seek .bar:hover .knob, .seek .bar.dragging .knob { opacity: 1; }
 .seek .bar .hover-time { position: absolute; bottom: 14px; transform: translateX(-50%); background: var(--bg-elev); border: 1px solid var(--border); padding: 1px 5px; border-radius: 3px; font-size: var(--fs-xs); pointer-events: none; white-space: nowrap; }
 .player .right { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
@@ -528,7 +533,7 @@ button.qrow { width: 100%; }
 /* Background vocals: smaller, never fainter than the other lines (no opacity: that would cut contrast). */
 .lyrics-static .bg { font-size: 0.7em; }
 .lyrics-static .duet { text-align: right; }
-.lyrics-tools { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; align-items: center; background: color-mix(in srgb, var(--bg-elev) 85%, transparent); border: 1px solid var(--border); border-radius: var(--shape-full); padding: 2px 8px; font-size: var(--fs-xs); color: var(--fg-muted); opacity: 0; transition: opacity 0.15s; }
+.lyrics-tools { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; align-items: center; background: color-mix(in srgb, var(--bg-elev) 85%, transparent); border: 1px solid var(--border); border-radius: var(--shape-full); padding: 2px 8px; font-size: var(--fs-xs); color: var(--fg-muted); opacity: 0; transition: opacity var(--dur-short) var(--ease-emphasized); }
 .lyrics-pane:hover .lyrics-tools, .lyrics-tools:focus-within { opacity: 1; }
 /* AMLL sizes itself from --amll-lp-font-size (its own default is 5vh, far too big
    for a side pane). The in-window view scales with the viewport and the
@@ -560,9 +565,18 @@ button.qrow { width: 100%; }
 .menu .mi:hover .kbd, .menu .mi.active .kbd { background: transparent; }
 .menu .sep { height: 1px; background: var(--border); margin: 4px 10px; }
 @keyframes pop-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
+/* Exits (see --dur-exit). `forwards` holds the end state until React unmounts
+   the surface, so it never flashes back to full opacity in between. A closing
+   surface is inert as well as untouchable. */
+.closing { pointer-events: none; }
+.menu.closing, .popover.closing, .search-popover.closing { animation: pop-out var(--dur-short) var(--ease-emphasized-accel) forwards; }
+@keyframes pop-out { to { opacity: 0; transform: scale(0.95); } }
 
 .overlay { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.35); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; animation: scrim-in var(--dur-short) var(--ease-emphasized); }
 @keyframes scrim-in { from { background: transparent; } }
+/* The scrim lifts over the same time as the sheet on it. */
+.overlay.closing { animation: scrim-out var(--dur-exit) var(--ease-emphasized-accel) forwards; }
+@keyframes scrim-out { to { background: transparent; } }
 /* The palette: an extra-rounded tonal sheet with a pill search field. */
 .palette { width: 620px; max-width: 90vw; background: var(--surface-tonal); border: 1px solid var(--border); border-radius: var(--shape-xl); box-shadow: var(--shadow); overflow: hidden; padding: 8px; transform-origin: top center; }
 .palette.fade-in { animation: sheet-in var(--dur-spring-long) var(--spring-fast); }
@@ -578,6 +592,8 @@ button.qrow { width: 100%; }
 .palette .pi mark { background: transparent; color: var(--accent-text); font-weight: 600; }
 .palette .pi .kbd { margin-left: auto; }
 @keyframes sheet-in { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: none; } }
+.palette.closing, .dialog.closing { animation: sheet-out var(--dur-exit) var(--ease-emphasized-accel) forwards; }
+@keyframes sheet-out { to { opacity: 0; transform: translateY(-8px) scale(0.96); } }
 
 /* Dialogs: extra-large corners, a spring in. The surface stays --bg-elev (not
    tonal) because the buttons, lists and fields inside use the pressed overlay. */
@@ -598,6 +614,9 @@ button.qrow { width: 100%; }
 .toast.fade-in { animation: toast-in var(--dur-spring-long) var(--spring-fast); }
 /* Transform only: a toast is never drawn part-transparent, so its text keeps full contrast from the first frame. */
 @keyframes toast-in { from { transform: translateY(16px) scale(0.94); } to { transform: none; } }
+/* On the way out it sinks and fades: the text is leaving, not being read. */
+.toast.closing { animation: toast-out var(--dur-short) var(--ease-emphasized-accel) forwards; }
+@keyframes toast-out { to { opacity: 0; transform: translateY(12px) scale(0.94); } }
 .toast:not(:has(.btn)) { padding-right: 18px; }
 .toast .btn { background: transparent; color: var(--accent-inverse); border-color: transparent; font-weight: 600; }
 /* The action is --accent-inverse at 4.5:1 on the toast itself; a lighter hover layer would drop it below that, so hover draws a ring in the text colour instead. */
@@ -719,6 +738,10 @@ button.qrow { width: 100%; }
 
 .fade-in { animation: fade var(--dur-short) var(--ease-emphasized-decel); }
 @keyframes fade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
+/* The fullscreen player settles back down over the shell (which is live again
+   from the first frame: its inert follows the store, not this animation). */
+.fullscreen.closing { animation: fade-out var(--dur-exit) var(--ease-emphasized-accel) forwards; }
+@keyframes fade-out { to { opacity: 0; transform: translateY(6px); } }
 .popover.fade-in, .search-popover.fade-in { animation: pop-in var(--dur-spring) var(--spring-fast); }
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation: none !important; transition: none !important; }
@@ -784,6 +807,9 @@ button.qrow { width: 100%; }
   .sidebar .nav-item { height: 32px; }
   .sidebar .nav-item:active { border-radius: var(--shape-sm); }
   .right-panel.drawer > .resize-handle { display: none; }
+  /* The drawer withdraws to the right edge (a clip, so nothing overflows the window). */
+  .right-panel.drawer.closing { animation: drawer-out var(--dur-exit) var(--ease-emphasized-accel) forwards; }
+  @keyframes drawer-out { to { clip-path: inset(0 0 0 100%); } }
   .topbar { gap: 4px; padding: 0 6px; }
   .search { width: auto; flex: 1 1 120px; max-width: none; min-width: 0; }
   .search-popover, .popover { position: fixed; top: 44px; left: 8px; right: 8px; width: auto; }
diff --git a/desktop/src/renderer/styles/m3-shell.css b/desktop/src/renderer/styles/m3-shell.css
index 7466e5a..3ad7c74 100644
--- a/desktop/src/renderer/styles/m3-shell.css
+++ b/desktop/src/renderer/styles/m3-shell.css
@@ -84,6 +84,8 @@
 }
 .search-popover.fade-in { animation: sheet-drop var(--dur-spring) var(--spring-fast); }
 @keyframes sheet-drop { from { opacity: 0; transform: translateY(-6px) scaleY(0.9); } to { opacity: 1; transform: none; } }
+.search-popover.closing { animation: sheet-lift var(--dur-short) var(--ease-emphasized-accel) forwards; }
+@keyframes sheet-lift { to { opacity: 0; transform: translateY(-6px) scaleY(0.9); } }
 .search-section { padding: 2px 0; }
 .result-row { height: 44px; gap: 12px; padding: 0 12px 0 6px; border-radius: var(--shape-full); transition: background-color var(--dur-short) var(--ease-emphasized); }
 .result-row .art { width: 32px; height: 32px; border-radius: var(--shape-sm); }
@@ -154,6 +156,8 @@
 .menu { border: 0; border-radius: var(--shape-lg); padding: 8px; min-width: 220px; box-shadow: var(--shadow-2), var(--shadow); max-height: calc(100vh - 12px); overflow-y: auto; }
 .menu.fade-in { animation: menu-in var(--dur-spring) var(--spring-fast); }
 @keyframes menu-in { from { opacity: 0; transform: scale(0.9, 0.8); } to { opacity: 1; transform: none; } }
+.menu.closing { animation: menu-out var(--dur-short) var(--ease-emphasized-accel) forwards; }
+@keyframes menu-out { to { opacity: 0; transform: scale(0.95, 0.9); } }
 .menu .mi {
   height: 32px; padding: 0 12px; gap: 12px; border-radius: var(--shape-sm);
   transition: background-color var(--dur-short) var(--ease-emphasized), border-radius var(--dur-spring) var(--spring-fast);
@@ -167,6 +171,9 @@
 .palette { width: 640px; border: 0; border-radius: 32px; padding: 10px; box-shadow: var(--shadow-2), var(--shadow); }
 .palette.fade-in, .dialog.fade-in { animation: sheet-spring var(--dur-spring-long) var(--spring-fast); }
 @keyframes sheet-spring { from { opacity: 0; transform: translateY(-14px) scale(0.92); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
+/* Out the way it came, without the spring: a straight accelerating lift. */
+.palette.closing, .dialog.closing { animation: sheet-drop-out var(--dur-exit) var(--ease-emphasized-accel) forwards; }
+@keyframes sheet-drop-out { to { opacity: 0; transform: translateY(-10px) scale(0.94); } }
 .palette .input { height: 52px; font-size: 17px; padding: 0 22px; }
 .palette .list { padding-top: 8px; }
 .palette .group { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--fg-muted); padding: 12px 16px 6px; }
@@ -235,6 +242,8 @@
   }
   /* A reveal from the right edge (clip-path, not a translate, so nothing ever overflows the window). */
   @keyframes drawer-in { from { clip-path: inset(0 0 0 35% round var(--shape-xl)); } to { clip-path: inset(0 round var(--shape-xl)); } }
+  .right-panel.drawer.closing { animation: drawer-out-clip var(--dur-exit) var(--ease-emphasized-accel) forwards; }
+  @keyframes drawer-out-clip { to { clip-path: inset(0 0 0 35% round var(--shape-xl)); opacity: 0; } }
   .dialog { padding: 20px; }
   .dialog-title { font-size: 22px; }
 }
diff --git a/desktop/src/renderer/views/FullscreenPlayer.tsx b/desktop/src/renderer/views/FullscreenPlayer.tsx
index 0673b6a..700ea8f 100644
--- a/desktop/src/renderer/views/FullscreenPlayer.tsx
+++ b/desktop/src/renderer/views/FullscreenPlayer.tsx
@@ -11,7 +11,9 @@
 // artwork flies in from the player bar's.
 //
 // A modal dialog: focus moves in on open (the collapse button), Tab stays
-// inside, Escape closes, and focus returns to what opened it.
+// inside, Escape closes, and focus returns to what opened it. On close it
+// stays mounted, inert, while it fades (lib/presence.ts); focus goes back and
+// the window leaves fullscreen as the fade starts.
 import { useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from "react";
 import { t } from "@shared/strings";
 import type { Track } from "@core/api";
@@ -30,6 +32,7 @@ import { Slider } from "../components/controls";
 import { openMenuFromButton } from "../components/ContextMenu";
 import { fmtBytes, fmtDate, fmtTime } from "../lib/format";
 import { trapTab, useReturnFocus } from "../lib/focus";
+import { usePresence, type Presence } from "../lib/presence";
 import { usePrefersReducedMotion } from "../lib/media";
 import { volumeValueText } from "../lib/a11y";
 import { SPRING_EFFECTS, SPRING_FAST, SPRING_SPATIAL } from "../lib/spring";
@@ -71,6 +74,15 @@ function flyFrom(el: HTMLElement, from: DOMRect, fromRadius: number, toRadius: n
 }
 
 export function FullscreenPlayer() {
+  const fullscreen = useApp((s) => s.fullscreen);
+  const { value, closing, motion, exitProps } = usePresence<true, HTMLDivElement>(fullscreen || undefined);
+  if (!value) return null;
+  return <Player closing={closing} motion={motion} exitProps={exitProps} />;
+}
+
+type PlayerProps = Pick<Presence<true, HTMLDivElement>, "closing" | "motion" | "exitProps">;
+
+function Player({ closing, motion, exitProps }: PlayerProps) {
   const now = useApp((s) => s.nowPlaying);
   const transport = useApp((s) => s.transport);
   const queue = useApp((s) => s.queue);
@@ -91,7 +103,7 @@ export function FullscreenPlayer() {
   const controlsAt = useRef<{ rect: DOMRect; mode: NowPlayingMode } | undefined>(undefined);
   /** Where the visible artwork last came to rest, and in which mode. */
   const flight = useRef<{ rect: DOMRect; radius: number; mode: NowPlayingMode } | undefined>(undefined);
-  useReturnFocus(true);
+  useReturnFocus(!closing);
   useEffect(() => closeRef.current?.focus({ preventScroll: true }), []);
   const d = bridge().dispatch;
   const track = now?.track;
@@ -101,9 +113,10 @@ export function FullscreenPlayer() {
   const source = queue.contextLabel ?? track?.album;
 
   useEffect(() => {
+    if (closing) return;
     bridge().window.openFullscreen(true);
     return () => bridge().window.openFullscreen(false);
-  }, []);
+  }, [closing]);
 
   const visibleArt = (): HTMLElement | null => (mode === "art" ? bigArt.current : thumbArt.current);
   const choose = (next: NowPlayingMode) => setMode(next);
@@ -161,7 +174,7 @@ export function FullscreenPlayer() {
   const art = track ? <Artwork id={track.coverArt} size={1000} className="np-art-img" /> : <div className="np-art-img placeholder"><Icon name="music" size={48} /></div>;
 
   return (
-    <div className="fullscreen np fade-in" data-mode={mode} style={MOTION} role="dialog" aria-modal="true" aria-labelledby="fs-title" inert={covered} onKeyDown={onKey} data-testid="fullscreen-player">
+    <div {...exitProps} className={`fullscreen np ${motion}`} data-mode={mode} style={MOTION} role="dialog" aria-modal="true" aria-labelledby="fs-title" inert={covered || closing} onKeyDown={onKey} data-testid="fullscreen-player">
       <FluidBackground coverArt={track?.coverArt} />
       <div className="np-fade" aria-hidden="true" />
       <div className="np-stage">