滚动进度条

animation-timeline: scroll(root) 把动画进度直接绑定到根滚动器位置，duration 声明为 auto，滚动即时间轴，全程零 scroll 事件监听。

进度用 scaleX(from 0 to 1) + transform-origin: 0 50%，缩放发生在合成器路径；改 width 会每帧触发 layout。

@supports not (animation-timeline: scroll()) 里给静态降级（本例保持 35% 宽），不支持的环境页面功能不受影响。

本 demo 放在一个可滚动文档里才有效果：根滚动器必须是该文档自身，嵌入 iframe 时 iframe 即滚动容器。

演示中的自动滚动只是预览辅助（用户滚动、触摸或按下即停）；生产环境删除该脚本，效果本体纯 CSS。

demo 顶部有一条 64px 固定渐隐带（.sp-scrim），滚动内容在触及页顶前淡出，避免长文标题与进度条/页顶元素重叠。