reveal · 入场动效
给内容挂一个 data-reveal 属性，它就会在进入视口时从指定方向就位。
六个方向共用一套 transform，位移上限 8px、时长只用令牌、错峰 40ms 封顶 6 个。
本页加载时是静态的：点下面按钮才由引擎接管 —— 这样截图基线可复现，
也说明"没有 JS 时内容照常可见"。
引擎未接管（内容全可见）
六个方向
up · 从下往上 8px
down · 从上往下 8px
left · 从左往右 8px
right · 从右往左 8px
scale · .97 放大到位
none · 只淡入
分批（不用逐个标）
容器写 data-reveal-children="up"，子元素自动依次入场。
间隔 40ms，超过第 6 个之后同时开始 —— 否则第 20 个要等 800ms。
第 1 项
第 2 项
第 3 项
第 4 项
第 5 项
第 6 项
第 7 项（已封顶，与第 6 项同时）
第 8 项（同上）
单独延迟
延迟 120ms
延迟 240ms
怎么接到自己的页面
两种接法，二选一：
① 在 <html> 上写 data-reveal-auto，脚本加载后自动接管；
② 手动调 Reveal.enable()（本页就是这种，方便截图与演示）。
都不写 ⇒ 完全不接管：内容可见、位置不偏。这是刻意的默认值。
对比：错写法 vs 本库写法
❌ 常见写法：藏了但没兜底
内容真被 opacity: 0 藏着，而脚本没跑起来（被拦、报错、CSP）—— 这一块就永远是空的，读者不知道这里有东西。
✅ 本库：只有 data-reveal-ready 时才藏
隐藏只在 <html data-reveal-ready> 存在时生效：任何一步失败，内容就是全可见的。动画可以有代价，但代价不能是"看不见内容"。