/* ---- 从 01 层迁回的基础规则 ----
   它们当年和 :root 同处一个文件, 拆层时被划进 token 层;
   token 层现在由 tokens.json 生成(只产出 :root), 所以必须搬到这里。 */
*{box-sizing:border-box}
  
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background-image:repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px var(--grid-gap));
    -webkit-mask:linear-gradient(#000,#000 26%,transparent 62%);
    mask:linear-gradient(#000,#000 26%,transparent 62%)}
  body{margin:0;color:var(--ink);font-size:var(--fs-body);
    background:var(--bg);
    line-height:1.6;-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
      "Hiragino Sans GB","Microsoft YaHei",sans-serif;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
      "Hiragino Sans GB","Microsoft YaHei",sans-serif;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    overflow-x:hidden}
  a{color:var(--brand);text-decoration:none}
  button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}

/* 02-base.css
   重置与基础排版 + 动效关键帧 + prefers-reduced-motion 兜底。
   由 index.html 的内联样式按层拆出; 加载顺序即层叠顺序, 不要调整。 */

/* ================= 动效 ================= */
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes fadein{from{opacity:0}to{opacity:1}}
  @keyframes shimmer{from{background-position:-560px 0}to{background-position:560px 0}}
  @keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
  /* 比 rise 更有"落地感"的一条: 从下方浮起 + 轻微放大, 用弹性缓动收尾 */
  @keyframes floatup{from{opacity:0;transform:translateY(18px) scale(.985)}
    to{opacity:1;transform:none}}
  /* Hero 的强调下划线从左侧画出来 */
  @keyframes drawline{from{background-size:0% .055em}to{background-size:100% .055em}}
  /* 分区标题: 细竖线长出来 */
  @keyframes growbar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  /* 主按钮掠过一道微光 —— 只在 hover 触发一次, 不循环 */
  @keyframes sweep{from{transform:translateX(-120%)}to{transform:translateX(220%)}}
  .anim{animation:floatup .42s var(--ease) both;
    animation-delay:calc(var(--i,0) * 26ms);will-change:transform,opacity}
  /* 区块级滚动进入: 让页面"活"起来, 而不是一次性全部堆在那里 */
  .reveal{opacity:0;transform:translateY(22px)}
  .reveal.in{opacity:1;transform:none;
    transition:opacity .7s var(--ease),transform .7s var(--ease)}
  /* 跟手时要短过渡, 否则指针移动会有"拖拽感" */
  .card.tilting,.hcard.tilting{
    transition:transform .1s linear,box-shadow .3s var(--ease)}
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none}
    /* animation-delay 也必须清掉: 只改 duration 的话, 错峰延迟仍在,
       开了"减弱动效"的用户反而要多等 —— 而且配合 fill:both 会短暂空白。 */
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
      animation-delay:0ms !important;transition-duration:.001ms !important;
      transition-delay:0ms !important;scroll-behavior:auto !important}
  }

  /* Hero 分层进入: eyebrow -> 标题 -> 说明 -> 统计条 -> 底线, 依次浮起。
     比"整块一起淡入"更有层次, 也让首屏有"内容正在就位"的感觉。 */
  .intro .eyebrow{animation:floatup .5s var(--ease) both}
  .intro h1{animation:floatup .55s var(--ease) .06s both}
  .intro h1 em{animation:drawline .7s var(--ease) .42s both}
  .intro .lede{animation:floatup .55s var(--ease) .12s both}
  .intro .stats{animation:floatup .6s var(--ease) .18s both}
  .intro .rule::after{transform-origin:left center;
    animation:growbar .7s var(--ease) .1s both}