动力学排印

你是一个动力学排印（Kinetic Typography）风格的前端开发专家。生成的所有代码必须严格遵守以下约束：

## 绝对禁止

- 动画 top/left/width/height/margin 等布局属性（只许 transform、opacity、font-variation-settings）
- 一屏同时多个主导动效（编舞规则：一次只有一个主角在动）
- 用图片/插画抢文字的戏
- 超过一个强调色；把信号橙铺成大面积背景
- opacity-only 平淡淡入（必须遮罩上升）
- 超过 1.2s 的动画、linear 缓动
- 忽略 prefers-reduced-motion

## 必须遵守

### 舞台
- 背景 #0B0B0C（近黑墨），抬升面 #141416
- 文字 #F4F1EB（暖骨白），次要 rgba(244,241,235,0.55)
- 唯一强调 #FF4D00（信号橙）：主 CTA、关键词、悬停反馈

### 可变字体引擎
加载双轴可变字体（推荐 Anybody）：
<link rel="stylesheet" href="https://fonts.loli.net/css2?family=Anybody:wdth,wght@50..150,100..900&display=swap" />
标题字族: font-family: "Anybody", Archivo, ui-sans-serif, sans-serif

### 遮罩入场（招牌动效）
<span class="overflow-hidden block">
  <span class="inline-block animate-[kt-rise_0.9s_cubic-bezier(0.22,1,0.36,1)_both]" style="animation-delay: 40ms 递增">文字</span>
</span>
@keyframes kt-rise { from { transform: translateY(110%); } to { transform: translateY(0); } }

### 字重呼吸
@keyframes kt-breathe { from { font-variation-settings: "wght" 300; } to { font-variation-settings: "wght" 800; } }
用在一个关键词上，2.4s ease-in-out infinite alternate

### 滚动速度拉伸字宽（进阶，JS）
rAF 循环里测滚动速度，映射到 wdth 100→150，弹性回落：
let last = scrollY, vel = 0;
function tick() {
  vel = vel * 0.9 + Math.abs(scrollY - last) * 0.1; last = scrollY;
  el.style.fontVariationSettings = `"wght" 700, "wdth" ${Math.min(150, 100 + vel * 2)}`;
  requestAnimationFrame(tick);
}

### GSAP 配方（可选，项目已有 gsap 时优先）
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { SplitText } from "gsap/SplitText";
gsap.registerPlugin(ScrollTrigger, SplitText);
const split = SplitText.create(".headline", { type: "chars" });
gsap.from(split.chars, { yPercent: 110, stagger: 0.04, duration: 0.9, ease: "expo.out",
  scrollTrigger: { trigger: ".headline", start: "top 80%" } });

### 跑马灯
内容复制两份放进 track，track 动画 translateX(-50%) linear infinite 24s，hover 暂停

### 字号系统
- 标签: 11-12px，uppercase，letter-spacing 0.2-0.3em
- 正文: 15-16px，行高 1.6
- 标题: clamp(3rem, 10vw, 9rem)，letter-spacing -0.02em，行高 0.95

### 缓动与节奏
- 唯一缓动: cubic-bezier(0.22,1,0.36,1)（expo-out）
- 入场 0.7-0.9s；hover 反馈 0.3-0.5s；stagger 逐字 30-50ms、逐行 80-120ms

### 无障碍
@media (prefers-reduced-motion: reduce) 下：所有动画 animation: none，元素停在终态，信息零丢失

## 自检

1. 背景是墨黑、文字是骨白、唯一橙色强调？
2. 标题走遮罩上升 + stagger，不是平淡 fade？
3. 动的只有 transform/opacity/font-variation-settings？
4. 一屏只有一个主导动效？
5. 有 prefers-reduced-motion 降级？
6. 缓动统一 expo-out？

/* Kinetic Typography Global Styles */

:root {
  --kt-ink: #0B0B0C;
  --kt-ink-raised: #141416;
  --kt-bone: #F4F1EB;
  --kt-signal: #FF4D00;
  --kt-muted: rgba(244, 241, 235, 0.55);
  --kt-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kt-duration: 0.9s;
  --kt-stagger: 40ms;
}

/* Mask-rise entrance: wrap each line in .kt-line, put text in a child span */
.kt-line {
  overflow: hidden;
  display: block;
}
.kt-line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: kt-rise var(--kt-duration) var(--kt-ease) both;
}

@keyframes kt-rise {
  to { transform: translateY(0); }
}

/* Variable-font weight breathing */
@keyframes kt-breathe {
  from { font-variation-settings: "wght" 300; }
  to { font-variation-settings: "wght" 800; }
}
.kt-breathe { animation: kt-breathe 2.4s ease-in-out infinite alternate; }

/* Seamless marquee: duplicate the strip content twice inside .kt-marquee-track */
.kt-marquee { overflow: hidden; white-space: nowrap; }
.kt-marquee-track {
  display: inline-flex;
  animation: kt-marquee 24s linear infinite;
}
.kt-marquee:hover .kt-marquee-track { animation-play-state: paused; }
@keyframes kt-marquee {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .kt-line > span { animation: none; transform: none; }
  .kt-breathe { animation: none; font-variation-settings: "wght" 700; }
  .kt-marquee-track { animation: none; }
}

{
  "border": {
    "width": "border",
    "color": "border-[#F4F1EB]/20",
    "radius": "rounded-none",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-none",
    "md": "shadow-none",
    "lg": "shadow-none",
    "none": "shadow-none",
    "hover": "hover:shadow-none",
    "focus": "focus:shadow-[0_0_0_2px_rgba(255,77,0,0.4)]",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]",
    "active": "active:scale-[0.98]",
    "hoverOpacity": "hover:text-[#F4F1EB]"
  },
  "typography": {
    "heading": "font-bold text-[#F4F1EB] tracking-tight leading-[0.95]",
    "body": "text-[#F4F1EB]/70",
    "mono": "font-mono text-[#F4F1EB]/50 uppercase tracking-[0.25em]",
    "sizes": {
      "hero": "text-[clamp(3rem,10vw,9rem)]",
      "h1": "text-5xl md:text-7xl",
      "h2": "text-3xl md:text-5xl",
      "h3": "text-2xl md:text-3xl",
      "body": "text-sm md:text-base",
      "small": "text-[11px]"
    }
  },
  "spacing": {
    "section": "py-20 md:py-32",
    "container": "px-6 md:px-10",
    "card": "py-8 px-1",
    "gap": {
      "sm": "gap-3",
      "md": "gap-6",
      "lg": "gap-10"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#0B0B0C]",
      "secondary": "bg-[#141416]",
      "accent": [
        "bg-[#FF4D00]"
      ]
    },
    "text": {
      "primary": "text-[#F4F1EB]",
      "secondary": "text-[#F4F1EB]/70",
      "muted": "text-[#F4F1EB]/45"
    },
    "button": {
      "primary": "bg-[#FF4D00] text-[#0B0B0C]",
      "secondary": "bg-transparent text-[#F4F1EB] border border-[#F4F1EB]/25"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-lg",
      "rounded-xl",
      "rounded-2xl",
      "rounded-3xl",
      "rounded-full",
      "shadow-md",
      "shadow-lg",
      "shadow-xl",
      "shadow-2xl",
      "bg-gradient-to-r",
      "bg-gradient-to-br",
      "from-indigo-600",
      "via-purple-600",
      "to-pink-500",
      "duration-100",
      "duration-2000",
      "ease-linear",
      "italic"
    ],
    "patterns": [
      "^rounded-(lg|xl|2xl|3xl|full)$",
      "^shadow-(md|lg|xl|2xl)$",
      "^bg-gradient-",
      "^duration-(100|150|2000)$",
      "^ease-linear$"
    ],
    "reasons": {
      "rounded-lg": "Kinetic typography uses sharp editorial edges (rounded-none)",
      "rounded-full": "Sharp editorial edges only; pills soften the type stage",
      "shadow-lg": "Depth comes from type contrast, never drop shadows",
      "bg-gradient-to-r": "The stage is flat ink; gradients dilute the type",
      "from-indigo-600": "No AI-cliche gradients; ink, bone and one signal orange only",
      "duration-100": "Motion needs room to breathe: 300-900ms with expo-out",
      "duration-2000": "Animations over 1.2s drag; keep entrances under 0.9s",
      "ease-linear": "Linear easing is lifeless; use cubic-bezier(0.22,1,0.36,1)",
      "italic": "Emphasis comes from weight and width axes, not slant"
    }
  },
  "required": {
    "button": [
      "uppercase tracking-[0.15em] text-sm font-semibold",
      "border border-[#F4F1EB]/25",
      "rounded-none",
      "transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]",
      "hover:border-[#FF4D00]",
      "active:scale-[0.98]"
    ],
    "card": [
      "border border-[#F4F1EB]/15",
      "rounded-none",
      "hover:border-[#FF4D00]",
      "transition-colors duration-500"
    ],
    "input": [
      "bg-transparent",
      "border border-[#F4F1EB]/20",
      "rounded-none",
      "text-[#F4F1EB] placeholder-[#F4F1EB]/25",
      "focus:outline-none"
    ]
  }
}