/* ============================================================
   动效升级（motion）— 2026-10-16
   ------------------------------------------------------------
   配合 style/js/motion.js 使用，由 header.php 全站挂一次。
   设计原则（与项目既有约定一致）：
   · 只动 transform / opacity / clip-path / box-shadow，不触发布局
   · 系统开启「减少动态效果」时全部关闭（文件末尾统一兜底）
   · 不覆盖 reveal.js 已有的入场动画，只在其之后接管 hover
   ============================================================ */

/* ---------- ① 卡片：悬停上浮 + 投影加深 ----------
   ⚠️ 这些卡片同时是 reveal.js 的 .rv-item（父级是 ul / -grid / -list），
   而 .rv-item-in 上有 transition-delay（最多 540ms 错峰），
   会让 hover 反应明显发滞后。所以 motion.js 会在入场动画结束后
   把 .rv-item / .rv-item-in 与内联 --rv-delay 摘掉，这里才接管过渡。
   覆盖到的卡片：首页技术能力/成功案例、组件库的卡片网格、
   ISV 案例卡、设计要素卡、快捷入口卡、内页 hero 图卡。
   ⚠️ 不要把 .ind-tsteps-item 加进来（2026-10-16 踩过）：
   它是 /23/ 的步骤展示项，不是可点卡片；而且在 .is-live 状态下
   5 个步骤被塞进同一个网格单元（grid-area:1/1），悬停命中的是**最上层那个**，
   可能是个 opacity:0 的隐藏项 —— 表现为「文字区冒出阴影、且触发位置飘忽」。
   用户反馈后已移除。 */
.techGrid > li,
.caseGrid > li,
.partnerGrid > li,
.ind-grid-item,
.ind-card,
.ind-isv-case-item,
.ind-quick-card,
.ind-hero-card,
.ind-flow-item {
    transition: transform .38s cubic-bezier(.22, .61, .36, 1),
                box-shadow .38s cubic-bezier(.22, .61, .36, 1);
}
.techGrid > li:hover,
.caseGrid > li:hover,
.ind-grid-item:hover,
.ind-card:hover,
.ind-isv-case-item:hover,
.ind-quick-card:hover,
.ind-hero-card:hover,
.ind-flow-item:hover {
    transform: translate3d(0, -6px, 0);
    box-shadow: 0 18px 40px rgba(16, 24, 40, .16);
}
/* logo 墙：企业 logo 不宜位移太多，只做轻微上浮 */
.partnerGrid > li:hover {
    transform: translate3d(0, -3px, 0);
}

/* ---------- ② 卡片内的图片缓推 ----------
   容器必须有 overflow:hidden，否则放大后溢出。
   .techGrid/.caseGrid/.ind-isv-case-item 自带 overflow:hidden；
   .ind-grid-item 等纯文字卡没有图片，不受影响。 */
.techGrid > li img,
.caseGrid > li img,
.ind-isv-case-item > img,
.ind-isv-case-item > video {
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}
.techGrid > li:hover img,
.caseGrid > li:hover img,
.ind-isv-case-item:hover > img,
.ind-isv-case-item:hover > video {
    transform: scale(1.055);
}

/* ---------- ③ 区块标题：遮罩揭示 ----------
   用 clip-path 做「文字从下往上被揭开」的效果，不需要额外包一层标签。
   .ind-section / .section 是 body 的直接子元素，reveal.js 会给它加 .rv-shown，
   这里就借用同一个状态触发（不加 .rv-on 时整段规则不生效，标题照常显示）。 */
html.rv-on .ind-section:not(.rv-shown) .ind-sec-title,
html.rv-on .section:not(.rv-shown) .sec-title {
    clip-path: inset(0 0 105% 0);
    transform: translate3d(0, 16px, 0);
}
html.rv-on .ind-section.rv-shown .ind-sec-title,
html.rv-on .section.rv-shown .sec-title {
    clip-path: inset(-8% -2% -8% -2%);
    transform: none;
    transition: clip-path .85s cubic-bezier(.22, .61, .36, 1) .12s,
                transform .85s cubic-bezier(.22, .61, .36, 1) .12s;
}

/* ---------- ④ 按钮：悬停上浮 + 投影 ----------
   ripple.js 负责点击波纹，这里只补悬停态，两者互不干扰。
   ⚠️ rightNav.css 里有一个**无作用域**的全局 button{}（display:block;
   width:180px; margin:25px auto），新按钮必须显式覆盖 margin。 */
.ind-hero-btn,
.moreBox,
.ind-sec-more,
.ind-hero-btn:visited {
    transition: transform .28s cubic-bezier(.22, .61, .36, 1),
                box-shadow .28s cubic-bezier(.22, .61, .36, 1),
                background-color .28s ease;
}
.ind-hero-btn:hover,
.moreBox:hover,
.ind-sec-more:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 10px 24px rgba(254, 201, 1, .32);
}

/* ---------- ⑤ 顶栏：滚动后吸顶 + 投影 + 毛玻璃 ----------
   position:sticky 不脱离文档流 → 页面高度与内容位置零变化
   （不能改成 fixed，那会让内容整体上移 72px）。
   右侧浮层 .rightNav 的 z-index 是 996~999，高于这里的 900，不受影响。 */
header {
    position: sticky;
    top: 0;
    z-index: 900;
    transition: box-shadow .3s ease, background-color .3s ease;
}
header.mt-scrolled {
    box-shadow: 0 4px 22px rgba(16, 24, 40, .10);
    background-color: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
            backdrop-filter: saturate(180%) blur(12px);
}

/* ---------- ⑥ 兜底：系统开启「减少动态效果」时全部关闭 ---------- */
@media (prefers-reduced-motion: reduce) {
    .techGrid > li,
    .caseGrid > li,
    .partnerGrid > li,
    .ind-grid-item,
    .ind-card,
    .ind-isv-case-item,
    .ind-quick-card,
    .ind-hero-card,
    .ind-flow-item,
    .ind-hero-btn,
    .moreBox,
    .ind-sec-more,
    .techGrid > li img,
    .caseGrid > li img,
    .ind-isv-case-item > img,
    .ind-isv-case-item > video {
        transition: none !important;
    }
    .techGrid > li:hover,
    .caseGrid > li:hover,
    .partnerGrid > li:hover,
    .ind-grid-item:hover,
    .ind-card:hover,
    .ind-isv-case-item:hover,
    .ind-quick-card:hover,
    .ind-hero-card:hover,
    .ind-flow-item:hover,
    .ind-hero-btn:hover,
    .moreBox:hover,
    .ind-sec-more:hover {
        transform: none !important;
    }
    .techGrid > li:hover img,
    .caseGrid > li:hover img,
    .ind-isv-case-item:hover > img,
    .ind-isv-case-item:hover > video {
        transform: none !important;
    }
    html.rv-on .ind-section:not(.rv-shown) .ind-sec-title,
    html.rv-on .section:not(.rv-shown) .sec-title {
        clip-path: none !important;
        transform: none !important;
    }
}