/* ============================================================================
 * public/css/motion.css —— 全站动效层（Lenis 平滑滚动 + AOS 式 fade-up 阶梯）
 *
 * 对标参考站 http://www.btyy.com/（2026-10-21 抓取核过）：
 *   · 滚动：`new Lenis()` 默认参数（lerp .1 / smoothWheel true）
 *   · 入场：AOS 2.x，清一色 `fade-up`（100px 上浮），默认 400ms / ease，
 *           `data-aos-delay` 只有 100/200/300/400 四档
 *
 * 为什么单独一份、而不是改 home.css / proto.css：
 *   ① `home.css` 是客户设计稿原件（逐字不许改，见项目约定）；
 *   ② 两套设计各有一份样式表，动效要**两边同时生效**，只能再挂一张"两边都能用"的表；
 *   ③ 本表用 `.lenis`（官方类名）与既有的 `html.js-anim` / `html.js-reveal` 门控类，
 *      不新增任何选择器到客户的设计系统里。
 *
 * 加载顺序要求：必须排在这两套样式表**之后**（SSR 与客户端切换都按这个顺序挂）。
 * ========================================================================== */

/* ---------- 1. Lenis 必需的核心样式（官方 lenis.css，原样搬过来） ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- 2. 入场动画：清一色 fade-up（100px / 400ms / ease） ----------
 * 隐藏态一律挂在门控类下（`html.js-anim` / `html.js-reveal` 是"显形机制已就绪"的标志）：
 * 若写成无条件 opacity:0，JS 没跑起来时整页会永远空白（本项目 2026-10-13 踩过）。
 *
 * 🔴 这里**不能**用 `:not([data-reveal="left"]):not(...)` 去排除变体（2026-10-21 实测踩到）：
 *    `:not()` 会把参数里的选择器特异性算进来 —— 四条 `:not([attr])` = +4 个属性，
 *    隐藏规则变成 (0,6,0)，而显形规则 `.js-anim [data-reveal].in` 只有 (0,3,0)
 *    ⇒ **带了 `in` 也照样 opacity:0，整页空白**（首页 46 个块全中，腿里报成"CDP 超时"）。
 *    ⇒ 正确写法：隐藏规则就写最朴素的 `.js-anim [data-reveal]`（0,2,0），
 *      让 home.css 里更强的 `.in`（0,3,0）与四个变体（0,3,0）都能正常覆盖它。
 *      变体（left/right/zoom/fade）因此仍按客户稿的方向位移走，只有 plain 块是 fade-up。
 */
@media (prefers-reduced-motion: no-preference) {
  .js-anim [data-reveal],
  .js-reveal .reveal {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
    transition: opacity .4s ease, transform .4s ease;
    transition-delay: var(--d, 0ms);
    will-change: opacity, transform;
  }

  .js-anim [data-reveal].in,
  .js-reveal .reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* 内页新闻列表：容器自己先淡入，行还要逐行错峰（proto.css 里已有 70ms 阶梯），
     这里只把行的额外位移收一点，避免"容器 100px + 行 30px"叠成 130px 的夸张位移。 */
  .js-reveal .news-rows > li { transform: translateY(18px); }
  .js-reveal .news-rows.is-in > li { transform: translateY(0); }

  /* ── 首页 CTA 区（「立即提交产品需求」）在手机端：只淡入、不做 100px 上浮 ──────────
     2026-10-28 实测（390×844）——客户报"Wap 端这个按钮不对"，病根在这里：
       `.cta` 手机端是 `height:auto;padding:56px 0`，内容 136px 正好把容器填满，
       按钮底边离容器底只剩 56px；而隐藏态的 `+100px` 下移把按钮整块推出
       `.cta{overflow:hidden}` 之外 44px ⇒
         ① 按钮被裁掉，用户看不见；
         ② IntersectionObserver 对它的 intersectionRatio 恒为 0（裁切后可见面积为 0）
            ⇒ **永远不会加 `.in`** ⇒ 死锁：滚到哪儿都不显形（实测滚到位后仍 opacity:0）。
     改成纯淡入（`transform:none`）后元素始终在容器内 ⇒ IO 能判相交 ⇒ 正常加 `.in`。
     桌面端余量足（`.cta` 328 高 / 内容 80 高，下移 100 仍在容器内），不受影响 ⇒ 断点只取手机。
     🔴 特异性 (0,3,0)，与 `.js-anim [data-reveal].in` 同级但本表后加载 ⇒ 稳过隐藏态的 (0,2,0)。 */
  @media (max-width: 767px) {
    .js-anim .cta [data-reveal],
    .js-reveal .cta .reveal {
      transform: none;
    }
  }
}

/* 系统开了"减少动态效果"：一律直接显形，不做位移、不做过渡 */
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-reveal],
  .js-reveal .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}