feat(ui): 弹层进出场过渡 + 首屏暖深色英雄（P2-6/P4-6）

- useMountTransition hook（延迟卸载播放退场，尊重 reduced-motion）+ vitest
- Drawer 淡入+滑入进出场；focus/scroll-lock 仍由 open 驱动、focus 键 shouldRender 防丢首焦
- Toast 入场 toast-in 动画（motion-safe）
- P4-6 首屏零作品用 callout 暖深色编辑部英雄（对标 cta-band-dark，不干扰工作库）
  新增 callout/on-callout/on-callout-soft 双主题成对 token

apps/web/app/globals.css

@@ -32,6 +32,10 @@
   --color-info: #4a5a6b;
   --color-conflict-mark: #b5543a26;
   --color-conflict-mark-strong: #b5543a8c;
+  /* 暖深色 callout：仅用于英雄/CTA 时刻（对标 DESIGN.md cta-band-dark），非内容底。 */
+  --color-callout: #201d18;
+  --color-on-callout: #f2ede2;
+  --color-on-callout-soft: #b8ae9c;
   --shadow-paper: #2b26200f;
   color-scheme: light;
 }
@@ -71,6 +75,10 @@
   --color-info: #8ca8ca;
   --color-conflict-mark: #ef8a7230;
   --color-conflict-mark-strong: #ef8a7290;
+  /* 夜读下 callout 为更深的凹陷暖井，仍与 bg 拉开层次。 */
+  --color-callout: #100e0c;
+  --color-on-callout: #efe6d7;
+  --color-on-callout-soft: #a89d8a;
   --shadow-paper: #00000045;
   color-scheme: dark;
 }
@@ -126,6 +134,21 @@ body {
   }
 }
 
+/* Toast 入场：淡入 + 轻微上移（尊重 prefers-reduced-motion，见下）。 */
+.toast-enter {
+  animation: toast-in var(--dur-base) var(--ease-standard);
+}
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .typewriter-cursor {
     animation: none;
@@ -137,4 +160,7 @@ body {
     animation: none;
     outline: 2px solid var(--color-conflict);
   }
+  .toast-enter {
+    animation: none;
+  }
 }

apps/web/app/page.tsx

@@ -4,7 +4,6 @@ import { BookOpen, PenLine, Plus } from "lucide-react";
 import { AppShell } from "@/components/AppShell";
 import { BackendDownNotice } from "@/components/BackendDownNotice";
 import { ProjectLibrary } from "@/components/projects/ProjectLibrary";
-import { EmptyState } from "@/components/ui/EmptyState";
 import { PageContainer } from "@/components/ui/PageContainer";
 import { PageHeader } from "@/components/ui/PageHeader";
 import { fetchProjects } from "@/lib/api/server";
@@ -51,29 +50,32 @@ export default async function DashboardPage() {
         {loadError ? (
           <BackendDownNotice />
         ) : projects.length === 0 ? (
-          <EmptyState
-            icon={BookOpen}
-            title="还没有作品"
-            description="直接开始写，落笔即成书；或先立项，从一句灵感搭好设定、大纲再动笔。"
-            action={
-              <div className="flex flex-wrap items-center justify-center gap-2">
-                <Link
-                  href="/write"
-                  className={buttonClass({ variant: "primary" })}
-                >
-                  <PenLine className="h-4 w-4" aria-hidden="true" />
-                  直接开始写
-                </Link>
-                <Link
-                  href="/projects/new"
-                  className={buttonClass({ variant: "secondary" })}
-                >
-                  <Plus className="h-4 w-4" aria-hidden="true" />
-                  先立项
-                </Link>
-              </div>
-            }
-          />
+          // 首次进入的暖深色编辑部英雄（对标 DESIGN.md cta-band-dark；仅零作品时出现，不干扰工作库）。
+          <div className="rounded-xl border border-line/50 bg-callout px-8 py-14 text-center shadow-paper sm:px-12 sm:py-20">
+            <BookOpen className="mx-auto h-9 w-9 text-cinnabar" aria-hidden="true" />
+            <h2 className="mt-5 font-serif text-display-sm text-on-callout">
+              从一句灵感，写成一本书
+            </h2>
+            <p className="mx-auto mt-3 max-w-md text-body leading-7 text-on-callout-soft">
+              直接开始写，落笔即成书；或先立项，从一句灵感搭好设定、大纲再动笔。
+            </p>
+            <div className="mt-7 flex flex-wrap items-center justify-center gap-2">
+              <Link
+                href="/write"
+                className={buttonClass({ variant: "primary", size: "lg" })}
+              >
+                <PenLine className="h-4 w-4" aria-hidden="true" />
+                直接开始写
+              </Link>
+              <Link
+                href="/projects/new"
+                className={buttonClass({ variant: "secondary", size: "lg" })}
+              >
+                <Plus className="h-4 w-4" aria-hidden="true" />
+                先立项
+              </Link>
+            </div>
+          </div>
         ) : (
           <ProjectLibrary projects={projects} />
         )}