# 动感字体风 · Kinetic Typography

> 来源技能：`taste-skill` 2.B 节 — Kinetic typography

## 风格定位

文字本身是主角。超大标题（`clamp(3rem, 9vw, 8.5rem)`）、900 字重、极端字距，配合逐词入场、走马灯横幅、描边/实心交替、滚动视差，让排版成为核心动效语言。少色制：米白 + 近黑 + 单一强调红。

## 配色

| 角色 | 色值 | 用途 |
|------|------|------|
| 米白底 | `#FAF7F0` | 页面背景 |
| 近黑 | `#111` | 正文、边框 |
| 强调红 | `#E4003A` | 高亮文字块、下划线、选中文本 |

强调红选自 logo.svg 与 HTML `theme-color`，贯穿全站后 logo 完全融入色板。

## 字体

- **大标题**：Archivo Black 900（本地 woff2，CSS 内重新登记 900 字重避免合成加粗）
- **副标题/正文**：Outfit 500/700/800（本地 woff2）
- **标签/元数据**：JetBrains Mono 400（本地 woff2）
- **中文**：系统栈 900 加粗

## 动效语言（纯 CSS/原生 JS，无外部库）

1. **逐词入场**：JS 将 h1/h2 切分为 CJK 单字 + 英文整词 span，overflow hidden + translateY 115%→0，stagger 70ms（封顶 560ms）
2. **走马灯**：JS 注入两条横幅（hero 后墨底、bigcta 前红底反向），纯 CSS keyframes 平移 -50% 无缝循环，实心/描边词交替
3. **描边/实心交替**：走马灯文字、卡片大编号、偶数统计数字用 `-webkit-text-stroke`
4. **滚动视差**：hero h1 与 mission h2 随滚动轻微位移（rAF 节流 + translate3d）
5. **hover**：标题词变红 + 斜切 `skewX(-8deg)`；卡片硬阴影浮起；logo 轻旋转

## 交互特性

- 组件极简平面：2px 近黑边框、8px 小圆角、`8px 8px 0` 硬阴影
- `.sub strong.accent` 做成红底白字高亮块
- `prefers-reduced-motion`：跳过切词/走马灯/视差，内容直接可见
- 保留全部基础功能

## 文件结构

```
动感字体风/
├── index.html ~ admin.html
└── assets/
    ├── logo.svg
    ├── style.min.css           （超大标题 + 走马灯 + 描边系统）
    ├── site.min.js             （逐词切分 + 走马灯注入 + 视差）
    └── vendor/fonts/           （Archivo Black + Outfit + JetBrains Mono 本地字体）
```