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;
+  }
 }