# 动效大片风 · Cinematic Motion

> 来源技能：`gpt-taste`（Elite UX/UI & Advanced GSAP Motion Engineer）

## 风格定位

电影级滚动叙事体验。深色大片背景配合 GSAP ScrollTrigger 精密编排的入场时间线、视差和滤镜过渡，营造沉浸式法律权威氛围。适用于品牌旗舰页、高端服务展示。

## 配色

| 角色 | 色值 | 用途 |
|------|------|------|
| 深底 | `#0A0F1A` | 页面背景 |
| 面板 | `#121826` | 卡片、区块 |
| 主体文字 | `#E8ECF4` | 正文 |
| 次级文字 | `#8893A8` | 描述、元数据 |
| 强调金 | `#D4A857` | 标题高亮、CTA |
| 边框 | `#1E2A3E` | 细分隔线 |

## 字体

- **展示字体**：Outfit 500/700/800（本地 woff2）
- **等宽字体**：JetBrains Mono 400（标签、编号）
- **中文**：系统栈

## 布局特点

- Hero 区全宽深色背景配大幅法律图书馆摄影图
- 内容区块交替明暗节奏
- 大间距营造呼吸感（section padding 100px+）
- 标题 clamp 响应式缩放

## 交互特性

- **GSAP ScrollTrigger**：Hero 入场时间线（逐元素 fade + blur 过渡）
- 滚动视差（Hero 背景图随滚动位移）
- 滚动触发的内容区块阶梯淡入
- 模板复制、评价轮播、手机号复制吐司
- `prefers-reduced-motion` 下 GSAP 不加载、内容直接可见

## 文件结构

```
动效大片风/
├── index.html ~ admin.html
└── assets/
    ├── logo.svg
    ├── style.min.css
    ├── site.min.js              （GSAP 动态加载 + 滚动编排）
    ├── img/hero-law-library.jpg （本地 Hero 背景图）
    └── vendor/
        ├── gsap.min.js          （GSAP 3.12.5 本地）
        ├── ScrollTrigger.min.js
        └── fonts/               （Outfit + JetBrains Mono 本地字体）
```