/* 书桐基础层：reset / tokens / typography / layout。
   2026-09-21：用户已将视觉方向改为圆润、清爽、Apple-inspired。
   旧纸感设计的历史说明不再构成约束，当前规格以 DESIGN.md 顶部为准。 */

@layer hf.reset, hf.tokens, hf.base;

/* ==========================================================================
   1. reset
   ========================================================================== */

@layer hf.reset {

  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: 7rem;
    text-size-adjust: 100%;
  }

  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, pre {
    margin: 0;
  }

  ul, ol { padding: 0; list-style: none; }

  img, svg, video, canvas { display: block; max-width: 100%; }

  a { color: inherit; text-decoration: none; }

  button, input, select, textarea { font: inherit; color: inherit; }

  button { background: none; border: 0; padding: 0; cursor: pointer; }

  input, textarea, select { background: none; border: 0; }

  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

  table { border-collapse: collapse; }

  :where(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }
}

/* ==========================================================================
   2. tokens
   ========================================================================== */

@layer hf.tokens {

  :root {
    /* ---------------------------------------------------- 纸与墨 ---- */
    --paper:        #FFFFFF;   /* 米白纸面 */
    --paper-2:      #F5F5F7;   /* 略深，用于底纹带 */
    --paper-3:      #EDEDF0;   /* 再深，用于凹陷/轨道 */
    --paper-4:      #DEDEE3;
    /* 墨色取自 logo 字标的 #1D1D1F —— 中性冷黑，纸是暖的，墨是冷的，
       这正是真实印刷里「黑墨压米色纸」的观感 */
    --ink:          #1D1D1F;   /* 标题、正文主体 */
    --ink-2:        #424245;   /* 段落、说明 */
    --ink-3:        #626267;   /* 次要文字、标签、占位 —— 见下面的说明 */

    /* ---- 为什么只有三档墨，没有第四档 ----
       原来还有一档 --ink-4: #989CA0，用在标签、页脚、⌘K 提示、占位符上。
       它在这张纸上只有 **2.24:1**，远低于 WCAG AA 对小字的 4.5:1 ——
       不是「更轻的灰」，是「看不见的灰」。

       这不是换个色号就能救的：可读灰的亮度是有上限的，而这个上限由纸决定。
       实测（--paper-2 #F5F5F7 是最紧的一档底）：
           --ink      L*  9.1   →  14.2:1   ✓
           --ink-2    L* 24.2   →   9.3:1   ✓
           --ink-3    L* 46.2   →   4.2:1   ✗（原值，差一点点）
           最亮还能达标的灰   L* ≈ 43.4
           --ink-4    L* 64.2   →   2.2:1   ✗（原值，差得很远）
       也就是说 L* 43 以上就出局，**这张纸上放不下四档可读墨**。

       所以把 --ink-4 并进 --ink-3（45 处用法），并把 --ink-3 从 #6A6E72 压到
       #626267 —— 对 --paper-2 是 4.89:1、对 --paper 是 5.30:1，两档都稳过。
       视觉上只差 10 个色阶，几乎看不出来。

       标签层的「轻」现在靠**字号 + 小型大写 + 字距**承担，而不是靠低对比度 ——
       这本来也是印刷图录的做法：小字标签是读得清的，只是看起来像标签。
       **不要再引入比 --ink-3 更浅的墨色 token 当文字色。** */

    /* --------------------------------------------------- 发丝线 ---- */
    --rule:         #E5E5EA;
    --rule-2:       #D2D2D7;
    --rule-3:       #86868B;
    --rule-w:       1px;

    /* ------------------------------------------------ 品牌灰阶 ---- */
    /* 取自 logo 三片叠压面板的中性灰渐变，是品牌唯一的「官方色」 */
    --mark-1:       #1D1D1F;   /* 深面板 */
    --mark-2:       #6E7276;   /* 中面板 */
    --mark-3:       #C9CCCF;   /* 浅面板 */
    --glass:        rgba(255, 255, 255, .46);
    --glass-line:   rgba(23, 26, 29, .10);

    /* ----------------------------------------------------- 强调 ---- */
    --accent:       #0066CC;   /* 绛红 oxblood —— 主强调 */
    --accent-2:     #0071E3;
    --accent-ink:   #004F9F;
    /* 烫金。原值 #9C7434 在纸上只有 3.72:1，用在 .note__n 的罗马数字、
       .eyebrow--gold、轨道清单的勾上 —— 都是要读的字，所以压深到 #805D24
       （纸上 5.26:1、paper-2 上 4.86:1）。视觉上从「亮黄铜」变成「深青铜」，
       这反而更接近真烫金压米色纸的观感：金箔在纸上从来不是亮黄。 */
    --gold:         #805D24;   /* 烫金 —— 次级强调 */
    /* 只用在深色 toast 上的图标，那里底是深的，浅金才对。别拿它当纸上文字色。 */
    --gold-soft:    #C9A85F;

    /* ------------------------------------------------- 轨道语义 ---- */
    --local:        #2C3A6B;   /* 本地轨道 · 靛 */
    --cloud:        #2E5D4C;   /* 云端轨道 · 松绿 */

    /* ------------------------------------------------- 状态语义 ---- */
    --ok:           #2E5D4C;
    /* 原值 #8A6412 在 --paper-2 上是 4.36:1，差一点点。校验清单的底
       正好是 paper 系，所以按最紧的那一档压到 #7E5A0F（paper-2 上 5.08:1）。 */
    --warn:         #7E5A0F;
    --bad:          #0066CC;

    /* ------------------------------------------------------ 字体 ---- */
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
    --font-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                    "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono",
                    Menlo, Consolas, monospace;

    /* ------------------------------- 流式字阶（Utopia 公式）---------
       视口 360px→1440px；基准 16px→18px；比例 1.2→1.25
       clamp(min, 截距rem + 斜率vw, max)
       ------------------------------------------------------------- */
    --step--2: clamp(0.6944rem, 0.6859rem + 0.0379vw, 0.7200rem);
    --step--1: clamp(0.8333rem, 0.8111rem + 0.0988vw, 0.9000rem);
    --step-0:  clamp(1.0000rem, 0.9583rem + 0.1852vw, 1.1250rem);
    --step-1:  clamp(1.2000rem, 1.1313rem + 0.3056vw, 1.4063rem);
    --step-2:  clamp(1.4400rem, 1.3341rem + 0.4708vw, 1.7578rem);
    --step-3:  clamp(1.7280rem, 1.5716rem + 0.6952vw, 2.1973rem);
    --step-4:  clamp(2.0736rem, 1.8493rem + 0.9969vw, 2.7466rem);
    --step-5:  clamp(2.4883rem, 2.1734rem + 1.4000vw, 3.4332rem);
    --step-6:  clamp(2.9860rem, 2.5508rem + 1.9342vw, 4.2916rem);
    --step-7:  clamp(3.5832rem, 2.9894rem + 2.6389vw, 5.3644rem);

    /* ---------------------------------------------------- 间距 ------ */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-s:   1rem;
    --space-m:   1.5rem;
    --space-l:   2rem;
    --space-xl:  3rem;
    --space-2xl: 4.5rem;
    --space-3xl: 6.5rem;
    --space-4xl: 9rem;

    /* ---------------------------------------------------- 版心 ------ */
    --page:     1440px;
    --measure:  64ch;          /* 正文最佳行宽（tufte-css 的做法） */
    --measure-narrow: 48ch;
    --gutter:   clamp(1.25rem, 4vw, 3.5rem);
    --nav-h:    4.5rem;

    /* ---------------------------------------------------- 动效 ------ */
    --ease:     cubic-bezier(.22, .61, .36, 1);      /* open-props --ease-3 */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-spring: cubic-bezier(.34, 1.36, .64, 1);

    /* 四档时长：纸上的东西移动得慢，交互反馈要快 */
    --dur-1:  .16s;   /* 悬停、按压 */
    --dur-2:  .32s;   /* 面板、抽屉 */
    --dur-3:  .62s;   /* 入场 */
    --dur-4:  1.1s;   /* 大位移 */

    /* ------------------------------------------------ 装饰颗粒 ------ */
    --grain: .038;
    /* 极光背景的浓度，首页开启、内页关掉，避免干扰阅读 */
    --aurora: .85;
  }
}

/* ==========================================================================
   3. base
   ========================================================================== */

@layer hf.base {

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.66;
    font-variant-numeric: oldstyle-nums;
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;      /* clip 而非 hidden：不产生滚动容器，sticky 才不会失效 */
    min-height: 100%;
  }

  /* 纸张颗粒 —— 固定叠层，multiply 让颗粒沉进纸里 */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--grain);
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  }

  #app { position: relative; z-index: 1; }

  ::selection { background: var(--accent); color: var(--paper); }

  /* --------------------------------------------------- 滚动条 ------ */
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: var(--paper-2); }
  ::-webkit-scrollbar-thumb {
    background: var(--rule-2);
    border: 3px solid var(--paper-2);
    border-radius: 0;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--rule-3); }

  /* ================================================================
     标题 —— 全部走衬线，字重克制，字距收紧
     ================================================================ */

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  h1 { font-size: var(--step-6); letter-spacing: -0.022em; line-height: 1.06; }
  h2 { font-size: var(--step-4); letter-spacing: -0.018em; }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); }
  h5, h6 { font-size: var(--step-0); }

  p { text-wrap: pretty; }

  strong, b { font-weight: 600; }
  em { font-style: italic; }

  code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; }

  /* ================================================================
     文字角色
     ================================================================ */

  /* 小型大写标签 —— 印刷图录的骨架元素 */
  .eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-3);
    line-height: 1.4;
  }
  .eyebrow--accent { color: var(--accent); }
  .eyebrow--gold   { color: var(--gold); }
  /* 这里原来还有一个 .eyebrow--plain { color: var(--ink-4) }。
     ink-4 并进 ink-3 之后，它就与基类 .eyebrow 完全同色了 —— 而且标记里
     一次都没用过。删掉：一个「更淡的 eyebrow」在这张纸上不存在。 */

  /* 编号标签：PLATE № 07 / FIG. 03 */
  .plate {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }

  .serif { font-family: var(--font-display); }
  .mono  { font-family: var(--font-mono); }

  .muted { color: var(--ink-3); }
  /* .dim 原来指向 --ink-4，和 .muted 是同一件事的两个名字，标记里也从没用过。
     留一个就够。 */
  .accent{ color: var(--accent); }
  .gold  { color: var(--gold); }

  .lead {
    font-size: var(--step-1);
    line-height: 1.62;
    color: var(--ink-2);
    max-width: var(--measure);
    text-wrap: pretty;
  }

  .num {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
  }

  /* 描边字 —— 只用在头图，克制 */
  .stroke {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--accent);
  }

  /* ================================================================
     分隔与装饰
     ================================================================ */

  .divider {
    height: var(--rule-w);
    background: var(--rule);
    width: 100%;
    border: 0;
  }

  .rule-double {
    border-block-start: var(--rule-w) solid var(--rule-2);
    border-block-end: 3px double var(--rule-2);
    height: 0;
  }

  /* 花饰分隔：❦
     这里的 --rule-3 是**纯装饰**（一个花饰字形 + 两侧的线），不承载信息，
     WCAG 1.4.3 对「纯粹装饰」的文字是豁免的，所以它不必达到 4.5:1。
     这是全站唯一一处「文字色不达标但合规」的地方 —— 其余都要达标。 */
  .orn {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    color: var(--rule-3);
    font-size: var(--step--1);
  }
  .orn::before,
  .orn::after {
    content: "";
    flex: 1;
    height: var(--rule-w);
    background: var(--rule);
  }

  .line {
    flex: 1;
    height: var(--rule-w);
    background: var(--rule);
    min-width: var(--space-l);
  }

  /* ================================================================
     版心与栅格
     ================================================================ */

  .wrap {
    width: min(100% - (var(--gutter) * 2), var(--page));
    margin-inline: auto;
  }
  .wrap--narrow { max-width: 56rem; }
  .wrap--measure { max-width: var(--measure); }

  .section { padding-block: var(--space-3xl); }
  .section--tight { padding-block: var(--space-xl); }
  .section--flush-top { padding-block-start: 0; }
  .section--flush-bottom { padding-block-end: 0; }

  /* 章节头 —— 底部一条发丝线，印刷目录的做法 */
  .section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-l);
    padding-block-end: var(--space-s);
    border-block-end: var(--rule-w) solid var(--rule);
    margin-block-end: var(--space-xl);
  }
  .section-head__title { max-width: var(--measure); }

  .grid { display: grid; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gap-grid { gap: var(--space-l); }

  .stack { display: flex; flex-direction: column; }
  .stack-4  { gap: var(--space-3xs); }
  .stack-8  { gap: var(--space-2xs); }
  .stack-10 { gap: 0.625rem; }
  .stack-12 { gap: var(--space-xs); }
  .stack-16 { gap: var(--space-s); }
  .stack-20 { gap: 1.25rem; }
  .stack-24 { gap: var(--space-m); }
  .stack-32 { gap: var(--space-l); }
  .stack-48 { gap: var(--space-xl); }

  .row { display: flex; align-items: center; }
  .row--between { justify-content: space-between; }
  .row--wrap { flex-wrap: wrap; }
  .row--baseline { align-items: baseline; }
  .gap-6  { gap: 0.375rem; }
  .gap-8  { gap: var(--space-2xs); }
  .gap-10 { gap: 0.625rem; }
  .gap-12 { gap: var(--space-xs); }
  .gap-16 { gap: var(--space-s); }
  .gap-24 { gap: var(--space-m); }

  /* ================================================================
     工具类
     ================================================================ */

  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .nowrap   { white-space: nowrap; }
  .relative { position: relative; }
  .measure  { max-width: var(--measure); }
  .tnum     { font-variant-numeric: tabular-nums; }

  /* 首字下沉 —— 仅用于长文开头 */
  .dropcap::first-letter {
    font-family: var(--font-display);
    float: left;
    font-size: 3.4em;
    line-height: .82;
    padding-inline-end: 0.08em;
    padding-block-start: 0.06em;
    color: var(--accent);
  }

  /* ================================================================
     动效层
     全部改写自开源方案（magicui / aceternity-ui / open-props），
     零依赖、零 JS 库，只用 CSS 变量 + IntersectionObserver。
     总原则：纸上的东西移动得慢而少；读数、悬停反馈可以快。
     ================================================================ */

  /* ---- 1. 入场：位移 + 淡入，幅度小，符合纸质物的沉稳 ---- */
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
  }
  .reveal.is-in { opacity: 1; transform: none; will-change: auto; }

  /* 横向推进 —— 用于章节标题 */
  .reveal--x { transform: translateX(-18px); }
  .reveal--x.is-in { transform: none; }

  /* 缩放淡入 —— 用于封面图版 */
  .reveal--scale { transform: scale(.965) translateY(10px); }
  .reveal--scale.is-in { transform: none; }

  /* 遮罩擦除 —— 用于大标题，像印刷机滚过一遍 */
  .reveal--wipe {
    opacity: 1;
    transform: none;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  .reveal--wipe.is-in { clip-path: inset(0 0 0 0); }

  /* ---- 2. 极光背景：三层径向渐变缓慢漂移（magicui aurora，改为纯 CSS） ---- */
  .aurora {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 78vh;
    z-index: 0;
    pointer-events: none;
    opacity: var(--aurora);
    overflow: hidden;
  }
  .aurora::before,
  .aurora::after {
    content: "";
    position: absolute;
    inset: -30%;
    background:
      radial-gradient(38% 46% at 18% 28%, rgba(142, 47, 28, .17), transparent 62%),
      radial-gradient(34% 42% at 78% 18%, rgba(156, 116, 52, .15), transparent 64%),
      radial-gradient(46% 52% at 56% 72%, rgba(110, 114, 118, .14), transparent 66%);
    filter: blur(46px);
    animation: aurora-drift 34s var(--ease-in-out) infinite alternate;
  }
  .aurora::after {
    background:
      radial-gradient(32% 40% at 84% 62%, rgba(46, 93, 76, .12), transparent 62%),
      radial-gradient(40% 44% at 26% 78%, rgba(44, 58, 107, .11), transparent 64%);
    animation-duration: 46s;
    animation-direction: alternate-reverse;
    filter: blur(58px);
  }

  @keyframes aurora-drift {
    0%   { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1.04); }
    50%  { transform: translate3d(3%, 4%, 0) rotate(6deg) scale(1.12); }
    100% { transform: translate3d(6%, -3%, 0) rotate(-5deg) scale(1.06); }
  }

  /* ---- 3. 玻璃面板：品牌母题，三片叠压的圆角面板 ---- */
  .glass {
    position: relative;
    aspect-ratio: 1 / 1;
    pointer-events: none;
  }
  .glass__p {
    position: absolute;
    width: 62%;
    aspect-ratio: 1 / 1;
    border-radius: 22%;
    border: 1px solid var(--glass-line);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: cascade 9s var(--ease-in-out) infinite alternate;
  }
  .glass__p:nth-child(1) {
    top: 2%; left: 34%;
    background: linear-gradient(150deg, rgba(23, 26, 29, .92), rgba(23, 26, 29, .68));
    animation-delay: 0s;
  }
  .glass__p:nth-child(2) {
    top: 19%; left: 17%;
    background: linear-gradient(150deg, rgba(110, 114, 118, .58), rgba(110, 114, 118, .34));
    animation-delay: -3s;
  }
  .glass__p:nth-child(3) {
    top: 36%; left: 0%;
    background: linear-gradient(150deg, rgba(201, 204, 207, .78), rgba(201, 204, 207, .5));
    animation-delay: -6s;
  }

  @keyframes cascade {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-3.5%, 3.5%, 0); }
  }

  /* ---- 4. 聚光卡片：跟随光标的径向高光（aceternity spotlight card） ---- */
  .spotlight { position: relative; }
  .spotlight::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease);
    background: radial-gradient(
      22rem 22rem at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 62%);
    mix-blend-mode: soft-light;
  }
  .spotlight:hover::after,
  .spotlight:focus-within::after { opacity: 1; }

  /* ---- 5. 扫光：对角高光扫过（magicui shine） ---- */
  .sheen { position: relative; overflow: hidden; }
  .sheen::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -70%;
    width: 46%;
    height: 220%;
    z-index: 3;
    pointer-events: none;
    transform: rotate(18deg) translateX(0);
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0), rgba(255, 255, 255, .58), rgba(255, 255, 255, 0));
    transition: transform 0s;
  }
  .sheen:hover::before,
  .sheen:focus-within::before {
    transform: rotate(18deg) translateX(360%);
    transition: transform .85s var(--ease-out);
  }

  /* ---- 6. 数字：滚动到视口时由 JS 递增，这里只管等宽对齐 ---- */
  .countup { font-variant-numeric: tabular-nums; }

  /* ---- 7. 字标扫光：品牌名悬停时一层墨色扫过 ---- */
  .wordmark {
    position: relative;
    display: inline-block;
    background-image: linear-gradient(100deg,
      var(--ink) 0%, var(--ink) 42%, var(--accent) 50%, var(--ink) 58%, var(--ink) 100%);
    background-size: 280% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: background-position .9s var(--ease-out);
  }
  .wordmark:hover { background-position: 0 0; }

  /* ---- 8. 呼吸：给徽标一点几乎察觉不到的生命 ---- */
  .breathe { animation: breathe 6.5s var(--ease-in-out) infinite; }
  @keyframes breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
  }

  /* ---- 9. 滚动进度条 ---- */
  .progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 2px;
    z-index: 90;
    transform-origin: 0 50%;
    transform: scaleX(var(--p, 0));
    background: linear-gradient(90deg, var(--accent), var(--gold));
    pointer-events: none;
    will-change: transform;
  }

  /* ---- 10. 走马灯 ---- */
  @keyframes marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }

  /* ---- 统一降级 ---- */
  @media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal--x,
    .reveal--scale,
    .reveal--wipe {
      opacity: 1 !important;
      transform: none !important;
      clip-path: none !important;
    }
    .aurora::before,
    .aurora::after,
    .glass__p,
    .breathe { animation: none !important; }
    .sheen::before { display: none; }
    .spotlight::after { display: none; }
    .progress { display: none; }
  }
}

/* ==========================================================================
   4. 响应式
   ========================================================================== */

@media (max-width: 1100px) {
  @layer hf.base {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}

@media (max-width: 720px) {
  @layer hf.base {
    :root { --gutter: 1.125rem; --nav-h: 3.75rem; }
    .grid-4, .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
    .section { padding-block: var(--space-2xl); }
    .section-head {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-s);
      margin-block-end: var(--space-l);
    }
    .lead { font-size: var(--step-0); }
  }
}