/* ===== WORKBUDDYAI_UPDATE_B [SITE] [2026-11-02 全站动效：滚动进场 / 图片淡入 / 数字滚动 / 阅读进度] =====
   设计约束（企业站调性，刻意克制）：
     1. 只动 opacity / transform，不动 top/left/width/height/box-shadow —— 不触发重排，滚动不抖；
     2. 位移 18px、缩放 0.97，时长 0.62s，缓动 cubic-bezier(.22,.61,.36,1)：稳重、不弹跳、不炫技；
     3. 门控在 html.fx-on 上：脚本没跑起来 / JS 被禁用 / 老浏览器不认 IntersectionObserver 时，
        这里所有规则一条都不匹配，内容照常可见 —— 绝不出现"整站白屏"（旧 .reveal 就是栽在无条件 opacity:0）；
     4. prefers-reduced-motion: reduce 时整段失效（无障碍 / 政务类站点硬要求）；
     5. 动画结束由脚本摘掉 data-fx，元素的 transition 交还给主题自己的 hover 过渡（避免抢 .nlsh-prod-card 的悬停动效）。

   与 site.css / nlsh360.css 的关系：本文件只负责"进场"这一件事，主题的常规过渡一概不覆盖。
   开关：后台「设置管理 → Cms设置 → 站点信息 → 前台动效」，关闭后 _Layout 不再输出本文件。
   ===== WORKBUDDYAI_UPDATE_E [SITE] ===== */

/* ---------------- 1. 进场状态机 ---------------- */

html.fx-on [data-fx] {
    transition: opacity 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.fx-on [data-fx="up"] {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
}

html.fx-on [data-fx="down"] {
    opacity: 0;
    transform: translate3d(0, -18px, 0);
}

html.fx-on [data-fx="left"] {
    opacity: 0;
    transform: translate3d(24px, 0, 0);
}

html.fx-on [data-fx="right"] {
    opacity: 0;
    transform: translate3d(-24px, 0, 0);
}

html.fx-on [data-fx="zoom"] {
    opacity: 0;
    transform: scale(0.97);
}

html.fx-on [data-fx="fade"] {
    opacity: 0;
}

/* 进场完成 */
html.fx-on [data-fx].fx-in {
    opacity: 1;
    transform: none;
}

/* ---------------- 2. 图片淡入 ----------------
   只对带 loading="lazy" 的图（本来就在首屏下方）加，不动首屏图，避免拖累 LCP。
   没拿到 loading 事件的兜底：脚本里 3 秒后强制显示。 */
html.fx-on img.fx-img {
    opacity: 0;
    transition: opacity 0.5s ease;
}

html.fx-on img.fx-img.fx-in {
    opacity: 1;
}

/* ---------------- 3. 详情页阅读进度条 ----------------
   只在有正文（.cf-prose / .cfm-prose）的页面由脚本创建，其它页面不存在这个节点。 */
.fx-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 2px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: transparent;
}

.fx-progress.is-on {
    opacity: 1;
}

.fx-progress__bar {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #0C447C 0%, #185FA5 55%, #2E7FC0 100%);
}

/* ---------------- 4. 导航滚动态微调 ----------------
   只调背景与描边，不改高度 —— 改高度会让 sticky 导航下方内容整体位移，滚动时反而更晃。 */
.site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.99);
    border-bottom-color: #dbe5f0;
}

/* ---------------- 5. 无障碍 / 降级 ---------------- */

@media (prefers-reduced-motion: reduce) {
    html.fx-on [data-fx],
    html.fx-on img.fx-img {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .fx-progress,
    .fx-progress__bar {
        transition: none !important;
    }
}