/* ============================================================
   NTKRIB 内页动效层 (site-motion.css) v1 — 2026-09-10
   与首页同一套动效语言：GSAP + ScrollTrigger，ease power3.out，
   位移 16~40px、stagger .05~.09、once 触发（滚回不回收，避免来回闪）。

   预隐机制：<head> 内联脚本给 <html> 加 .mjs（防止首屏闪一下再动），
   动效引擎初始化后立刻移除 .mjs，元素改由 GSAP 内联样式接管 →
   「被 CSS 预隐但没被动画接管」的元素不会停留不可见，JS 挂了也不影响可读性。
   ============================================================ */

/* ⚠️ JS 渲染的卡片容器（产品/工艺/资讯列表 + 相关推荐 + 翻页条）也必须预隐：
   否则它们在首帧是可见的，等 MutationObserver 认领（~150ms 后）才被藏起来，
   肉眼就是「卡片先闪出来 → 消失 → 过一会儿才淡入」（用户读作「卡片出现得太慢」）。
   这些规则对「后来插入的子节点」同样生效，所以能在插入那一刻就挡住。 */
html.mjs :is(
  .site-header,
  .ip-en, .ip-zh, .ip-head p, .ip-toolbar,
  .ip-title, .ip-lead, .ip-meta,
  .nl-en, .nl-zh, .nl-head p,
  .nd-head, .nd-meta, .nd-author,
  .ct-strip, .ct-grid, .ct-foot,
  .e404-code, .e404-h1, .e404-intro, .e404-links,
  .sf-cta, .sf-col, .sf-social, .sf-bar,
  .ip-grid > *, .ip-cards > *, .ip-related, .ip-pager,
  .nl-row, .nl-pager, .nd-cards > *,
  .ip-three figure, .ip-spec
) { opacity: 0; }

/* ---------------- 动画进行中：关 CSS 过渡 + 提升合成层 ----------------
   ⚠️ 必须！卡片自带 `transition: transform .45s`，而 GSAP 每帧写行内 transform，
   两者打架的结果是：①起始态（gsap.set 的 +22px）被过渡抹成 0.45s 慢慢滑过去
   ②补间过程中显示位置比 GSAP 小一个 ~0.45s 的尾巴，动完还飘一下 —— 肉眼就是「卡顿/发滞」。
   所以动画期间挂 .mo-on（transition:none + will-change），播完由 JS 移除，悬停过渡照常。 */
.mo-on, .mo-on * { transition: none !important; }
.mo-on.is-play { will-change: transform, opacity; }
/* 2026-09-12 合成层预算：will-change 只在「真正开始播」时挂（.mo-on.is-play，由 site-motion 的
   play()/headPass() 与 products.html 的 release() 加），播完随 .mo-on 一起摘。
   原来挂在 .mo-on 上 → 首屏下方所有待播元素从加载起就各占一个合成层（详情页实测 26 个），
   而它们可能几秒到几分钟后才被滚到，纯属白占显存 + 每帧层管理。
   .mo-on 本身保留（transition:none 那半职责不能动，见上一条注释）。 */

/* ---------------- 悬停微动（与首页克制的调性一致） ---------------- */
.ip-tile, .ip-card, .nd-card {
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}
.ip-tile:hover, .ip-card:hover, .nd-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(20, 21, 26, .09);
}
.ip-tile:active, .ip-card:active, .nd-card:active { transform: translateY(-1px); }

/* 悬停：三张「相关推荐」卡（产品/工艺详情 .ip-card、资讯详情 .nd-card）
   只保留图片微放大，不做整卡上浮与阴影（用户 2026-09-10：与产品/工艺列表页 .ip-tile 同一口径）。
   ⚠️ 必须 !important：site-motion.js 入场播完后会在卡片与卡内图片上永久留下
   行内 style="transform: translate3d(0,0,0)"，行内样式优先于普通选择器 ——
   不加 !important 时上浮与放大都不生效，只剩 box-shadow 冒一圈灰影。 */
.ip-card:hover, .nd-card:hover { transform: none !important; box-shadow: none !important; }
.ip-card:hover .ip-card-img img,
.nd-card:hover .nd-card-img img { transform: scale(1.06) !important; }

.ip-btn { transition: transform .3s cubic-bezier(.22, 1, .36, 1), background .25s, color .25s; }
.ip-btn:hover { transform: translateY(-2px); }
.ip-btn:active { transform: translateY(0); }

.sf-btn { will-change: transform; }
.ct-soc-btn, .ct-pill { will-change: transform; }

/* 图片容器统一裁剪，保证入场缩放不外溢 */
.ip-tile .ph, .ip-card-img, .nl-img, .nd-card-img { overflow: hidden; }

/* ---------------- 系统「减少动态效果」时全部退化为静态 ---------------- */
@media (prefers-reduced-motion: reduce) {
  html.mjs :is(
    .site-header, .ip-en, .ip-zh, .ip-head p, .ip-toolbar,
    .ip-title, .ip-lead, .ip-meta, .nl-en, .nl-zh, .nl-head p,
    .nd-head, .nd-meta, .nd-author, .ct-strip, .ct-grid, .ct-foot,
    .e404-code, .e404-h1, .e404-intro, .e404-links,
    .sf-cta, .sf-col, .sf-social, .sf-bar,
    .ip-grid > *, .ip-cards > *, .ip-related, .ip-pager,
    .nl-row, .nl-pager, .nd-cards > *,
    .ip-three figure, .ip-spec
  ) { opacity: 1 !important; }
  .ip-tile, .ip-card, .nd-card, .ip-btn { transition: none !important; }
  .ip-tile:hover, .ip-card:hover, .nd-card:hover, .ip-btn:hover { transform: none !important; }
}