/* ============================================================
   非研科技官网 · 动效系统  motion.css
   风格：克制专业（滚动进场 / 悬停上浮 / 图片放大 / 数字滚动
        标题装饰线 / 导航吸顶与下划线 / 返回顶部）
   设计约束：
     1) 只使用 opacity / transform / box-shadow / transition，
        不改变任何元素的文档流与占位，保证接入后布局零位移。
     2) 无 JS 或 JS 失败时内容必须完全可见（由 html.mz-js.mz-ready 门槛控制）。
     3) 尊重系统的「减弱动态效果」偏好。
   ============================================================ */

:root {
    --mz-brand: #003f98;
    --mz-brand-2: #0b7be4;
    --mz-ease: cubic-bezier(.22, .61, .36, 1);
    --mz-dur: .72s;
    --mz-shift: 30px;
}

/* ------------------------------------------------------------
   1. 滚动进场：淡入 + 位移
   ------------------------------------------------------------ */

/* 只有 JS 成功接管后才隐藏元素，避免 JS 失败导致内容不可见 */
html.mz-js.mz-ready .mz-reveal {
    opacity: 0;
    transform: translate3d(0, var(--mz-shift), 0);
    transition:
        opacity var(--mz-dur) var(--mz-ease),
        transform var(--mz-dur) var(--mz-ease);
    transition-delay: var(--mz-delay, 0ms);
    will-change: opacity, transform;
}

/* 进场方向变体 */
html.mz-js.mz-ready .mz-reveal.mz-from-left {
    transform: translate3d(calc(-1 * var(--mz-shift) * 1.4), 0, 0);
}

html.mz-js.mz-ready .mz-reveal.mz-from-right {
    transform: translate3d(calc(var(--mz-shift) * 1.4), 0, 0);
}

html.mz-js.mz-ready .mz-reveal.mz-zoom {
    transform: scale(.95);
}

html.mz-js.mz-ready .mz-reveal.mz-short {
    --mz-shift: 16px;
}

/* 已进场 —— 必须放在所有变体之后，靠书写顺序取胜 */
html.mz-js.mz-ready .mz-reveal.mz-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* ------------------------------------------------------------
   2. 卡片悬停上浮 + 阴影
   ------------------------------------------------------------ */

.mz-lift {
    transition:
        transform .38s var(--mz-ease),
        box-shadow .38s var(--mz-ease);
}

.mz-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 38px rgba(0, 63, 152, .16);
}

/* ------------------------------------------------------------
   3. 图片悬停放大（容器裁切）
   ------------------------------------------------------------ */

.mz-zoom {
    overflow: hidden;
}

.mz-zoom img {
    display: block;
    transition: transform .85s var(--mz-ease);
}

.mz-zoom:hover img {
    transform: scale(1.06);
}

/* ------------------------------------------------------------
   4. 标题装饰线延展
   ------------------------------------------------------------ */

.mz-underline {
    position: relative;
}

.mz-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -9px;
    width: 100%;
    max-width: 128px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--mz-brand), var(--mz-brand-2));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .9s var(--mz-ease) .12s;
}

/* 无 JS 时直接展示装饰线 */
html:not(.mz-ready) .mz-underline::after,
html.mz-js.mz-ready .mz-underline.mz-in::after {
    transform: scaleX(1);
}

/* ------------------------------------------------------------
   5. 数字滚动计数
   ------------------------------------------------------------ */

.mz-count {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ------------------------------------------------------------
   6. 导航吸顶 + 链接下划线滑动
   ------------------------------------------------------------ */

.mz-sticky {
    position: sticky;
    top: 0;
    z-index: 900;
    transition: box-shadow .32s ease, background-color .32s ease;
}

.mz-sticky.mz-stuck {
    box-shadow: 0 6px 22px rgba(0, 32, 78, .12);
}

/* 导航链接下划线由中心向两侧滑出 */
.mz-navlink {
    position: relative;
}

.mz-navlink::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    height: 2px;
    background: currentColor;
    opacity: .85;
    transition: left .3s var(--mz-ease), right .3s var(--mz-ease);
}

.mz-navlink:hover::after,
.mz-navlink.mz-active::after {
    left: 0;
    right: 0;
}

/* ------------------------------------------------------------
   7. 按钮 / 链接微交互
   ------------------------------------------------------------ */

.mz-btn {
    transition: transform .3s var(--mz-ease), box-shadow .3s var(--mz-ease);
}

.mz-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(11, 123, 228, .28);
}

.mz-btn:active {
    transform: translateY(0);
}

/* ------------------------------------------------------------
   8. 返回顶部按钮
   ------------------------------------------------------------ */

#backTop {
    transition: opacity .32s ease, transform .32s var(--mz-ease) !important;
}

#backTop.mz-hidden {
    opacity: 0 !important;
    pointer-events: none;
    transform: translateY(12px) scale(.85);
}

/* ------------------------------------------------------------
   9. 无障碍：尊重系统「减弱动态效果」
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    html.mz-js.mz-ready .mz-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .mz-underline::after {
        transform: scaleX(1) !important;
        transition: none !important;
    }

    .mz-lift,
    .mz-lift:hover,
    .mz-zoom img,
    .mz-zoom:hover img,
    .mz-btn,
    .mz-btn:hover,
    .mz-navlink::after,
    #backTop {
        transform: none !important;
        transition: none !important;
    }
}

/* ------------------------------------------------------------
   10. 打印：全部展开，避免打印出空白页
   ------------------------------------------------------------ */

@media print {

    html.mz-js.mz-ready .mz-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}