feat(theme): polish P3R motion and transitions

.uicraft.md

@@ -36,6 +36,6 @@ YororoIce 的个人门户与博客。访客阅读文章、动态、图片和归
 
 - **档案**：编号导航、大号章节序号、目录式文章列表、双栏片刻、直角控件、朱红索引线与通信侧栏。正文保持清楚的标题与元信息层次。
 - **青笺**：依据全片 7,752 帧、原生 1280×720 像素审计（`docs/rain-theme-pixel-audit.md`），采用纸灰 / 蓝青、距画面约 3.5% / 5.4% 的单像素外框、宽窄不一的竖向切片、八角阵与深浅双层方片。中日短章节竖排，其他语言使用横向文字条；长文始终横排。文章为窄日期栏与矩形切片封面，片刻为月历式分格；聊天、登录和控件采用直角纸条与平行细框。禁止退回缺乏视频依据的实色厚投影、弧形封面、圆润气泡或拱顶面板。主体和文字保持稳定，仅遮挡条一次性揭示，小方片 / 水纹低幅循环；手机文章先呈现文字。
-- **P3R**：参考《Persona 3 Reload》的水下钴蓝、亮青、粗窄斜体大字、白色选中切片与洋红边缘。八段 B 站实际视频观察见 `docs/p3r-theme.md`。首页与全屏导航采用倾斜文字菜单；文章使用日期栏与紧凑列表，片刻使用日期分栏，聊天使用深蓝对白与亮蓝错位边。只有引起 `pathname` 变化的站内导航才从实际落点扩张钴蓝圆面，盖满后导航并由同圆心揭开；键盘使用控件中心。同页锚点、查询筛选、弹窗、主题切换和其他按钮不得触发全屏圆面。登录以 `BV15V4y117GZ` 无字版开场为主参考：原创银白棱角石从顶部坠下，带动统一的上宽下尖水体快速放大；非对称长条泡沫、带孔泡沫团和偏心气泡沿同一水体分布。水下背景上青下蓝，碎光集中在顶部；泡沫上散并平滑过渡至完全不透明的等待画面，路由就绪后向上退水。禁止恢复平行水柱或镜像开门构图；多股水柱旧实现留于 `439b851`。浮层保留邮件式进入；旧双环、斜面和日期轴实现留于 `e2ef28d`。正文不倾斜，不引入角色立绘、游戏音视频、截图纹理或默认音效。瞬态效果不持久化；减少动态效果或 Canvas 不可用时保留原生导航及静态登录遮场。
+- **P3R**：参考《Persona 3 Reload》的水下钴蓝、亮青、粗窄斜体大字、白色选中切片与洋红边缘。八段 B 站实际视频观察见 `docs/p3r-theme.md`。首页与全屏导航采用倾斜文字菜单；文章使用日期栏与紧凑列表，片刻使用日期分栏，聊天使用深蓝对白与亮蓝错位边。只有引起 `pathname` 变化的站内导航才从实际落点扩张边缘起伏的钴蓝流体，盖满后才执行 `onNavigate` 与路由跳转，目标内容就绪后从同一落点以流体开口揭开；键盘使用控件中心。全屏菜单从打开按钮流体展开、沿原轮廓收回，背景保持透明；首页与页面标题分层入场，场景随精确指针做多层视差；共享弹窗与登录面板使用邮件式斜面进入后对角分开。同页锚点、查询筛选、弹窗、主题切换和其他按钮不得触发全屏圆面。登录以 `BV15V4y117GZ` 无字版开场为主参考：原创银白棱角石从顶部坠下，带动统一的上宽下尖水体快速放大；非对称长条泡沫、带孔泡沫团和偏心气泡沿同一水体分布。水下背景上青下蓝，碎光集中在顶部；泡沫上散并平滑过渡至完全不透明的等待画面，路由就绪后向上退水。禁止恢复平行水柱或镜像开门构图；多股水柱旧实现留于 `439b851`。浮层保留邮件式进入；旧双环、斜面和日期轴实现留于 `e2ef28d`，旧圆面、菜单中心环与平移弹窗留于 `65630bf`。正文不倾斜，不引入角色立绘、游戏音视频、截图纹理或默认音效。瞬态效果不持久化；减少动态效果或 Canvas 不可用时保留原生导航及静态登录遮场，菜单立即开关，入场、视差与斜面全部静止。
 - 档案与公共布局在 `src/components/blog/_theme-ui.scss`；青笺全站布局在 `_rain-ui.scss`，P3R 在 `_p3r-ui.scss`，共同编译进原 CSS Module。共享场景 `src/components/appearance/rain-planes.*` 提供门帘、月历与双层方片变体，`p3r-scene.*` 提供水面、月亮和窗格。以 `html[data-design]` 选择，避免切换时重新挂载内容或丢失草稿；共享基线保留于 `blog.module.scss`。
 - 320px 窄屏隐藏品牌辅助小字，优先保留主题、语言和导航的完整操作区域。

docs/p3r-theme.md

@@ -201,3 +201,79 @@
 - 浏览器为本机 Chromium；移动端为视口模拟，不代表实体设备帧率。
 - 登录动态 chunk 加载期间改为透明交互遮罩，`P3R · 正在接入` 仅保留为屏幕阅读器状态。
   人为延迟 chunk 1.2 秒后截图确认画面不再闪现该文案。
+
+## 第三轮：动效打磨
+
+分支：`feat/p3r-animation-polish`，基于 `main`（`65630bf`）。旧实现保留在该提交中。
+本轮不改登录水效（`p3r-water-renderer.ts`），仍不引入角色、视频纹理或音效。
+
+### 基线问题（开发环境 1440px 逐帧采样）
+
+- 跨页圆面：点击后约 25ms 就调用了 `router.push`，`(blog)/loading.tsx`
+  的加载骨架在仍在扩张的圆面旁边提交，形成可见闪烁；全程约 800ms。
+- 全屏菜单：`::after` 的环（`inset: -50%` 加缩放）在屏幕中央显示为奇怪的青色椭圆；
+  背景是不透明深蓝，关闭没有动画（Esc 由外壳直接卸载）。
+- 首页舞台、页面标题和弹窗只有整体淡入或简单位移。
+
+### 参考与时序（`menu-circle-accurate/`，BV1vD421K72T 约 25.72–26.00 秒）
+
+- 边缘起伏的流体团约 80ms 盖满画面，随后在同一位置打开不规则的开口，约 200ms 露出新界面。
+- 手机邮件（BV11T421X7Cz 约 1.2–2.0 秒）：倾斜蓝面滑入后沿对角线分开，露出内容。
+- 网页时序：铺色 220ms（ease-out）、至少 60ms 全遮、开孔 340ms（ease-in-out）；
+  菜单展开 420ms、收回 300ms；邮件面板 420ms。均为无回弹曲线。
+
+### 第三轮实现
+
+- `p3r-fluid.ts`：圆面与菜单共用的流体轮廓。三个缓慢漂移的谐波调制半径，
+  幅度为半径的 8.5%；覆盖半径按最远屏幕角 ÷ (1 − 幅度) 计算，保证每个波峰都盖住角落。
+  每次使用新的随机相位，连续操作不会重复同一个轮廓。
+- `p3r-effects.tsx`：Canvas 绘制流体铺色（底层半透明钴蓝，加青白描边），开孔同样是流体轮廓。
+  `onNavigate` 与 `router.push` 都推迟到完全盖住之后执行，点击时只预取目标路由。
+  若目标页仍是 `[data-route-loading]` 骨架或 `<main>` 为空，最多多遮 300ms，再开孔。
+  Esc、页面隐藏、切换为减少动态效果时清除视觉层，但仍完成导航；
+  调用方取消导航时直接开孔，不跳转。开孔前再选另一个链接会替换目标；
+  开孔过程中点击，会从新落点开始下一次圆面。8 秒兜底计时从交接时开始。
+- 阶段同步到 `html[data-p3r-wipe]`。完全遮住时，新页面的入场动画暂停，开孔时才开始播放。
+- `p3r-navigation.tsx`：菜单不再使用 `::after` 环，改用 Web Animations 的
+  `clip-path: path()`，从打开按钮的位置流体展开；`menu-rim` 是同一轮廓的 7px 青色细边。
+  背景透明，展开过程中仍能看到原页面。Esc、关闭按钮和同页链接会沿轮廓收回，
+  收回期间对话框为 inert；展开到一半时关闭，会从当前位置收回，不会先跳成全屏。
+  跨页链接在圆面盖住后才关闭菜单，因此看不到菜单闪退。
+  P3R 菜单不再使用外壳的全局 Esc 监听，以对话框的 cancel 事件为准；
+  Chrome 在多次 Esc 后强制关闭时，用 close 事件同步状态。
+- 入场分层：首页依次为日期/口号、标题两行、介绍斜切面板、继续阅读、菜单行；
+  页面标题依次为背景大字、编号、眉标、标题、英文名、操作。
+  动画使用独立的 `translate` 属性和斜边 `clip-path`，不影响元素原本的旋转，也没有缩放；
+  动画结束后不保留裁切，斜体和描边的外沿完整。
+- `p3r-scene.tsx`：精确指针（`pointer: fine`）下，月亮、窗格、水流、波纹和碎片
+  按 8–42px 的不同深度跟随指针做视差，用 rAF 缓动写入 CSS 变量。
+  只在场景可见且处于运动状态时更新；触屏和减少动态效果下不启用，标题横幅固定不动。
+  场景位于 inert 区域或其他模态对话框下方时（如菜单打开、登录弹层），不跟随指针，避免看不见的重绘。
+- `_p3r-motion.scss`：邮件式面板。倾斜的钴蓝斜面滑入，再沿对角线分成两半露出面板，
+  用于共享 `Modal` 和登录页的账号管理、声明面板。斜面是 `::before` 伪元素，
+  静止时完全分开且 `pointer-events: none`，不增加滚动溢出。
+- 减少动态效果：圆面、菜单展开/收回、入场、视差和邮件斜面全部关闭，导航和关闭立即完成。
+
+### 第三轮验证
+
+在独立内存后端上进行，包括开发环境与隔离生产构建（`next build --webpack`）。
+脚本和截图位于 `.git/ark-research/p3r-polish/`。
+
+- 逐帧轨迹（生产构建）：完全遮住前 pathname 一直不变；冷路由在遮场下提交，
+  内容出现后才开孔；菜单的跨页链接在 `covered` 阶段才关闭。
+- `verify-polish.cjs` 16/16：遮场后导航；Esc、隐藏页面、替换目标、取消导航；
+  1440 / 390 / 320px × 浅色 / 深色下菜单的展开、Esc 与关闭按钮收回、跨页关闭及无横向溢出；
+  中途关闭从部分轮廓收回；减少动态效果；触屏不触发视差；邮件斜面无溢出且静止时透明；
+  连续 10 次点击后状态清理干净。
+- 原有回归：圆面语义 5/5、登录流程 10/10、水效参考帧 3/3、首帧遮罩 3/3 通过；
+  `verify:blog` 19/19。
+- 旧脚本需要适配新构建：首帧脚本里写死的生产 chunk 编号已经变化，改用当前编号的副本运行；
+  首页流式渲染时，隐藏的 Suspense 容器里会短暂多出一份菜单，因此圆面语义脚本的副本
+  会等流式内容合并后再点击。两份原脚本都没有改动。
+- 帧间隔：1440px 与 390px 下菜单展开与圆面播放平稳，只有展开第一帧（创建对话框）
+  偶有约 33ms 的单帧；圆面绘制期间没有超过 25ms 的帧。登录页弹层的模糊背景本身在
+  headless 下就有 p95 约 25ms 的帧；视差在弹层下停用后，移动指针时与静止、关闭视差时处于同一范围。
+- TypeScript（仅检查 src，`.next` 中残留的 bines 生成类型与本轮无关）、
+  修改文件的 ESLint、`git diff --check` 和生产构建通过。
+  构建时 `next/font` 拉取 Google 字体出现网络重试，最终成功，与代码无关。
+- 浏览器为本机 Chromium headless，移动端为视口模拟，未在实体手机或 Safari 上测试。

src/app/login/components/components.module.scss

@@ -1,4 +1,5 @@
 @use '@/styles/appearance-tokens' as appearance;
+@use '@/styles/p3r-motion';
 
 .dialog-overlay {
   @include appearance.surface;
@@ -268,7 +269,8 @@
 
 :global(html[data-design="p3r"]) {
   .dialog-overlay { background: #031e55ba; backdrop-filter: blur(4px); }
-  .accountManagement, .declaration { border: 3px solid #0754e4; border-left: 7px solid #58e5ff; background: var(--ark-p3r-panel); box-shadow: 8px 8px 0 #032369; animation: p3r-dialog-in .32s ease-in-out; }
+  // Previous slide-in panel entry (p3r-dialog-in): commit 65630bf.
+  .accountManagement, .declaration { border: 3px solid #0754e4; border-left: 7px solid #58e5ff; background: var(--ark-p3r-panel); box-shadow: 8px 8px 0 #032369; @include p3r-motion.mail-slab; }
   .accountManagementTitle { padding: 20px 24px; background: #0754e4; color: #fff; border: 0; }
   .accountManagementTitle h1 { font-family: var(--font-noto-sans), sans-serif; font-weight: 700; }
   .accountManagementTitle h1::after { color: #58e5ff; font: italic 800 26px/1 var(--ark-p3r-display); }
@@ -284,9 +286,10 @@
   .declarationContentWrapper h1 { font-family: var(--font-noto-sans), sans-serif; font-weight: 700; color: var(--accent); }
   .declarationBtn { background: #0754e4; color: #fff; border-color: #58e5ff; }
 }
-@keyframes p3r-dialog-in { from { opacity: 0; transform: translate(35px, -10px); } to { opacity: 1; transform: none; } }
+// @keyframes p3r-dialog-in { from { opacity: 0; transform: translate(35px, -10px); } to { opacity: 1; transform: none; } }
+@include p3r-motion.mail-slab-keyframes;
 @media (prefers-reduced-motion: reduce) {
-  :global(html[data-design="p3r"]) { .accountManagement, .declaration { animation: none; } }
+  :global(html[data-design="p3r"]) { .accountManagement, .declaration { @include p3r-motion.mail-slab-reduced; } }
 }
 
 @media (max-width: 600px) {