描边空心字

空心字核心是 -webkit-text-stroke（Chromium 长期支持的非标属性），描边居中于字形轮廓——笔画细的字形会把描边画进字内，细体字建议加大 font-weight 或减小 --stroke_w。

填充用双层文本实现：底层描边空心 + 上层同文案实心填充，上层 clip-path: inset(calc(100% - var(--fill_pct)) 0 0 0) 做『从下往上灌入』；两层文字必须同字体同字号同 letter-spacing，否则错位。

@property 注册 --fill_pct 后它才能被 transition 与 keyframes 平滑驱动——悬停态与自动演示动画操作的是同一个注册变量，clip-path 只是从属者；未注册的自定义属性只能离散跳变（@property 需 Chromium 85+）。

悬停填充的方向可换：inset(0 0 100% 0) 是自上而下、inset(0 100% 0 0) 是自左向右，改一个裁切方向即可翻转叙事方向。

自动演示动画用 @media (prefers-reduced-motion: no-preference) 包裹，且悬停时让位给 transition（:not(:hover) 才播放），避免两条动画打架。

无障碍：h1 上放 aria-label、两层 span 均 aria-hidden；reduced-motion 下关闭自动演示与过渡，悬停仍即时填充（无动画直达），文字始终完整可读。