/* ═══════════════ 首页动效层（motion.css） ═══════════════
   只挂首页：三语 index.html 各一行 <link> + 一行 <script src="motion.js">，
   子页一行都不碰 —— 招牌动效留在首页，文档页该稳。
   动效三件事：一组同层的 .reveal **一排排涌上来**；卡片 hover 抬起来并扫过一道光；
   #features 的序号行走另一套更收的入场（只上浮 14px，不缩放不模糊 —— 18 行
   一起缩放会糊字，也像 18 个方块在弹，那正是「一堆一堆卡片冒出来」的观感）。
   三处刻意的做法，写在这儿免得以后被"顺手改掉"：

   1) 入场用 transform，hover 抬升用**独立的 translate**。
      style.css 里 `.reveal.in{transform:none}` 排在 `.card:hover{transform:…}` 之后，
      特异性又相同 —— 结果所有带 .reveal 的卡片/步骤/更新日志条目的 hover 抬升
      一直被压死（点了半天没反应）。换成 translate 两个就各走各的。
   2) 延迟（--fx-d）只写在 .in 态上。transition-delay 取的是"切过去那一边"的值：
      写在基础态的话，hover 也得跟着等半秒，手感发黏。
   3) 延迟由 motion.js 按"行 % 3"算好写进 --fx-d。JS 不跑（或系统开了
      prefers-reduced-motion）时，这儿全是 0 延迟 —— 只是没有波浪，静态样子不变。
   ══════════════════════════════════════════════════════ */

/* ── 1. 涌上来：同层的一排 .reveal 依次淡入 ── */
[data-fx] > .reveal {
  transition: opacity .6s var(--ease), transform .72s var(--ease), filter .5s ease,
              border-color .4s, box-shadow .4s, translate .4s var(--ease);
}
[data-fx] > .reveal.in {
  transform: none;
  filter: none;
  transition-delay: var(--fx-d, 0s), var(--fx-d, 0s), var(--fx-d, 0s);
}

/* 小方块再补一点"缩着浮上来"的劲（大行块不加 scale：整块缩放会糊字） */
[data-fx] > .cgroup, [data-fx] > .step,
[data-fx] > .platform, [data-fx] > .link-card, [data-fx] > .clink {
  transform: translateY(30px) scale(.972);
  filter: blur(5px);
}
[data-fx] > .cl-version { transform: translateY(26px); }

/* ── 2. #features 的序号行：比大块头收着劲 ──
   行本身只上浮 14px；图标片只淡入（位移/缩放都留给「行」这一层，不然一次入场
   有五六种动作在抢眼睛）。opacity 的 transition 写在 features.css 的 .feat-ico 上，
   这里只管首/末两态，免得两边都写 transition 互相盖掉。 */
[data-fx] > .feat { transform: translateY(14px); }
[data-fx] > .feat .feat-ico { opacity: 0; }
[data-fx] > .feat.in .feat-ico { opacity: 1; }

/* ── 3. 章节标题：整块抬一下，比卡片略早 ── */
[data-fx1].reveal {
  transform: translateY(22px); filter: blur(4px);
  transition: opacity .66s var(--ease) .04s, transform .78s var(--ease) .04s,
              filter .5s ease .04s;
}
[data-fx1].reveal.in { transform: none; filter: none; }

/* ── 4. hover：抬起来（首页已经没有 .card 了，扫光那套跟着卡片一起退场） ── */
[data-fx] > .cgroup:hover, [data-fx] > .contributor:hover { translate: 0 -3px; }
[data-fx] > .step:hover { translate: 0 -6px; }
[data-fx] > .platform:hover, [data-fx] > .clink:hover { translate: 0 -5px; }
[data-fx] > .link-card:hover { translate: 0 -3px; }
[data-fx] > .cl-version:hover { translate: 0 -3px; }

/* ── 5. #features 那一层已经不在这里了 ──
   功能清单从「18 张卡片」改成「分组序号列表」（不是卡片），布局/配色全在
   docs/css/features.css 里，这里不再有卡片网格、彩虹图标片、跨列大卡这些东西。 */

@media (prefers-reduced-motion: reduce) {
  [data-fx] > .reveal, [data-fx1].reveal,
  [data-fx] > .feat, [data-fx] > .cgroup, [data-fx] > .step,
  [data-fx] > .platform, [data-fx] > .link-card, [data-fx] > .clink,
  [data-fx] > .cl-version { transform: none; filter: none; opacity: 1; }
  [data-fx] > .feat .feat-ico { opacity: 1; }
}