// 背景动画库 · 六个底 + 一片膜
一行换底
全部由 --theme 派生：换主题色、或随氛围音自动变色时，这六个底会一起跟着变。
用法：<Background kind="mesh" />，放进任意 position:relative 容器。
最后一屏是膜（<FilmGrain />）：不是底，是盖在一切之上的一层颗粒，默认关着、带开关。
↓ 往下滚，每个变体各占一屏
01 / 06
mesh · 光斑
纯 CSS · 0 素材 · 0 请求 · ~0 KB
通底底噪。内容页 / 后台 / 表单页最稳的一张牌：不抢字、换主题色自动变。
<Background kind="mesh" />
02 / 06
grid · 网格
纯 CSS · 0 素材 · 0 请求 · ~0 KB
秩序感。适合列表页 / 项目页 / 数据页，中心羽化让中间内容自然浮起来。
<Background kind="grid" />
03 / 06
noise · 颗粒
内联 SVG · 0 请求 · ~0.6 KB
胶片质感，压住纯渐变的"塑料味"。叠在别的底上当质感层也成立（intensity 调小）。
<Background kind="noise" />
04 / 06
images · 静图轮播
N 张图 · 交叠 1.4s · Ken Burns 缓慢推拉
项目页没有片子时用。3~5 张作品图轮着做背景，比单张静图有呼吸。
<Background kind="images" />
05 / 06
video · 全屏循环视频
复用 VideoBackdrop：静帧兜底 / 慢网降级 / reduce 不加载
开场与专题页。视频是"最贵"的一种，一条片子建议只铺一屏，别整站铺。
<Background kind="video" />
06 / 06
hls · 自适应码率流
HLS（.m3u8）· hls.js 兜底 · 码率随网速自动切
长片子 / 弱网要看的页面用它：不下载整段才播，起播更快。⚠️ 素材是样本36 的 Mux 演示流（待替换）。
<Background kind="hls" />
附加 · 覆盖层
grain · 整屏颗粒膜
内联 SVG feTurbulence · 0 请求 · 0 素材 —— 但代价是 逐帧合成
和上一屏的 noise 不是一回事：那个是底（在内容之下），
这个是膜（fixed + pointer-events:none +
mix-blend-mode:lighten，盖在内容之上）。
点下面的按钮把它开着往下滚一遍 —— 重点看滚动顺不顺，再决定要不要给某一页开。
<FilmGrain />
附加 · 零件
notch · 凹圆角补片
两个 56×56 SVG（path 照样品）· 0 请求 · fill 吃 --notch-bg
用法见 styles/components.css 的 .notch 段。
⚠️ 补片是**宿主自己的延伸** → 它的颜色**必须等于宿主的底色**（`--notch-bg`），
于是"宿主轮廓往外长出一段带凹弧的边"，并且**盖在宿主外面的东西上**。
★ 最容易写反：它不是"接缝另一侧的颜色"。填错不会报错，只会看到"没效果"。
① 底部吸附条（上边两角凹）
② 卡片从区块边缘"长出来"（右上 + 左下 凹）
③ 面板贴左下（左上 + 右下 凹）
⑨ 视差 · 新档
三层反向 · 深度
Background parallax=0.08 ＋ ForegroundParallax ·
标量 --p 来自 lib/scroll-progress.js（0~1，封顶 1）
底随滚动上移并放大（放大是为了盖住位移露出的那条边），前景贴图反向下移 ——
方向相反，才有"层"的错觉。
前景层只占底部一条带（band="26%"）且整块 pointer-events:none；
贴图在带内超采样（高 160% + object-position:bottom），位移再大也不露空档。
--p = 0.0000（往下滚，看它变）
组件实物 · 样本56
轻玻璃 · 价格卡 · 日期选择器
① .glass-tint ＝ 玻璃轻档（blur 12.5px + rgba(0,0,0,.25) @ soft-light，没有棱、没有阴影）
② <PriceCard /> ＝ 以后每个项目价格卡的模板（props 驱动；数字一律由调用方传，见 lib/constants.js）
③ <DatePicker /> ＝ 第一个真日期选择器（点开试试：翻月 / 选日 / Esc 关 / 点外面关；同页两个面板互斥）
① .glass-tint（轻档）
轻玻璃两件套
blur 12.5px ＋ rgba(0,0,0,.25) @ soft-light
对照：.liquid-glass（厚档：1.4px 棱 + 阴影）
厚玻璃对照
同样的底，换厚档 → 一眼看出"棱"在干什么
② <PriceCard />（真数字：积分充值「畅玩档」）
畅玩档
最划算积分充值 · 与后端 /api/points/packages 同源
- 基础积分 300
- 赠送积分 +50
- 合计到账 350 积分
- 到账方式 支付后自动到账
↑ 换 props 即换项目：以后每个项目的价格位都套这一张
③ <DatePicker />（两个面板互斥）
再来一个（只渲染一个月时，翻页按钮自动到头）
待接线：生图历史按日期查 / 后台订单筛选 / 点商城消费记录