遮罩揭幕（适合封面图）
错峰：父级加 data-stagger，子项按序延迟 60ms（motion.js 写入 --d） */
.reveal { transition:
opacity 420ms var(--e-out),
transform 420ms var(--e-out),
clip-path 560ms var(--e-out);
transition-delay: var(--d, 0ms);
}
.reveal[data-reveal="up"] { transform: translateY(22px); }
.reveal[data-reveal="fade"] { transform: none; }
.reveal[data-reveal="scale"] { transform: translateY(16px) scale(.985); }
.reveal[data-reveal="mask"] { clip-path: inset(0 0 100% 0); opacity: 1; }
.reveal[data-reveal="mask"].is-visible { clip-path: inset(0 0 0 0); }
/* --- 3.2 轻量视差 -------------------------------------------
场景：Hero 背景光晕、横幅底图、关于我们配图
触发：scroll（rAF 节流，只写 transform，不读布局）
用法：
数值=位移系数 */
[data-parallax] {
will-change: transform;
transition: transform 120ms linear; /* 平滑掉 scroll 事件的抖动 */
}
/* --- 3.3 渐变光晕（呼吸 + 视差双驱动） -----------------------
场景：Hero 两团光晕 .hero__glow--1 / --2；也可挂在任意 .glow-orb
触发：载入即开始，20s 一个周期的极慢呼吸；滚动时叠加视差位移
说明：只改 transform 与 opacity，blur 保持不动（blur 动画很贵）。 */
.hero__glow--1 { animation: jr-breathe 22s var(--e-io) infinite; }
.hero__glow--2 { animation: jr-breathe 26s var(--e-io) infinite 3s; }
@keyframes jr-breathe {
0%, 100% { opacity: .42; transform: translate3d(0, 0, 0) scale(1); }
50% { opacity: .58; transform: translate3d(0, 14px, 0) scale(1.06); }
}
/* --- 3.4 全局噪点层 -----------------------------------------
场景：整站（一层极淡颗粒，压住大面积纯色的"塑料感"）
触发：常驻，fixed 定位不随滚动重绘，pointer-events:none 不挡操作
说明：内联 SVG feTurbulence，零网络请求；opacity .035 是关键，
超过 .06 会显脏。横幅区已有自己的噪点，这里走 overlay 叠加。 */
body::after {
content: "";
position: fixed; inset: 0; z-index: 9998;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='140'%20height='140'%20filter='url(%23g)'%20opacity='0.55'/%3E%3C/svg%3E");
background-size: 140px 140px;
opacity: .035;
mix-blend-mode: overlay;
}
/* --- 3.5 网格背景（仅 Hero，强化"工作台"语义） ---------------
场景：.hero__grid 已存在，这里只补一个极慢的横向漂移
触发：载入即开始，60s 走一格，几乎察觉不到但能破除"死图感" */
.hero__grid { animation: jr-drift 60s linear infinite; }
@keyframes jr-drift {
to { background-position: 56px 56px, 56px 56px; }
}
/* --- 3.6 顶部滚动进度条 -------------------------------------
场景：全站顶部 2px 细线，指示阅读进度
触发：scroll（rAF 节流，JS 只写 scaleX）
用法：
放