@charset "utf-8";
/* ==========================================================
   皇嘉官网 · 滚动动效（P0）
   1) 滚动入场：淡入上移 / 左右交替，同组自动交错
   2) 首屏标语：加载即淡入
   3) 悬停微交互：卡片上浮、图片微放大
   4) 数字滚动计数（配合 [data-count]）
   全部只动 transform / opacity —— 不触发布局，不影响首屏 LCP。
   ========================================================== */

/* ---------- 1) 滚动入场 ---------- */
.reveal,
.reveal-l,
.reveal-r {
    opacity: 0;
    transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
                transform .6s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}
.reveal   { transform: translateY(24px); }
.reveal-l { transform: translateX(-28px); }
.reveal-r { transform: translateX(28px); }

.reveal.is-in,
.reveal-l.is-in,
.reveal-r.is-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

/* ---------- 2) 首屏标语：加载即淡入（不延迟） ---------- */
.hero-in > * {
    animation: hjHero .9s cubic-bezier(.22, .61, .36, 1) both;
}
.hero-in > *:nth-child(2) { animation-delay: .12s; }
@keyframes hjHero {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 3) 悬停微交互 ---------- */
.hover-lift {
    transition: transform .28s cubic-bezier(.22, .61, .36, 1),
                box-shadow .28s ease;
}
.hover-lift:hover { transform: translateY(-6px); }

/* 2026-09-30：内页卡片上浮时叠一层柔和投影，让「浮起」有体积感。
   只挑内页特有的卡片类（.bdg 服务卡 / .bdgwr 新闻・法规卡 / .imgbod 团队照 /
   .office-card 办公点），首页用的 .col-sm-3/.col-sm-4 不在其中 → 首页视觉不变。 */
.bdg.hover-lift:hover,
.bdgwr.hover-lift:hover,
.imgbod.hover-lift:hover,
.office-card.hover-lift:hover {
    box-shadow: 0 12px 28px rgba(27, 38, 51, .12);
}

.zoom-img { overflow: hidden; }
.zoom-img img { display: block; transition: transform .45s ease; }
.zoom-img:hover img { transform: scale(1.05); }

/* ---------- 4) 数字滚动计数 ---------- */
.count-num { font-variant-numeric: tabular-nums; }

/* ---------- 5) 尊重系统「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-l, .reveal-r {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .hero-in > * { animation: none !important; }
    .hover-lift, .hover-lift:hover { transform: none !important; }
    .hover-lift:hover { box-shadow: none !important; }
    .zoom-img:hover img { transform: none !important; }
}

/* ---------- 6) 移动端：位移减半，避免晃动感 ---------- */
@media (max-width: 768px) {
    .reveal   { transform: translateY(14px); }
    .reveal-l { transform: translateX(-16px); }
    .reveal-r { transform: translateX(16px); }
}

/* ---------- 7) 区块标题下划线展开（跟随标题行 reveal） ---------- */
.tith.is-in .titmin,
.tith.is-in .titminw,
.tith3.is-in .titmin,
.tith3.is-in .titminw,
.tith.is-in .titminabout,
.tith3.is-in .titminabout {
    animation: hjUnderline .8s cubic-bezier(.22, .61, .36, 1) .18s both;
}

/* 2026-09-30：内页区块标题题用 .titminabout（贴标题右侧的小红条），
   此前没被上面这组选择器覆盖，所以内页标题没有展开动效 —— 这里补上，
   并把它改成「从左向右」展开（它靠左对齐，居中展开会显得发散）。 */
.tith.is-in .titminabout,
.tith3.is-in .titminabout {
    transform-origin: left center;
}

@keyframes hjUnderline {
    from { transform: scaleX(0); opacity: .25; }
    to   { transform: scaleX(1); opacity: 1; }
}

/* ---------- 8) 横向画廊：自动滚动（悬停暂停由 JS 控制） ---------- */
.scroll_box ul {
    will-change: left;
}

@media (prefers-reduced-motion: reduce) {
    .tith.is-in .titmin,
    .tith.is-in .titminw,
    .tith3.is-in .titmin,
    .tith3.is-in .titminw,
    .tith.is-in .titminabout,
    .tith3.is-in .titminabout {
        animation: none !important;
        transform: none !important;
    }
}

/* ---------- 9) 顶部导航滚动后转白底（仅限「会吸顶」的导航） ---------- */
/* 内页主导航不吸顶（随页面滚走），只用第 10 节把二级 tab 栏钉在视口最上沿；
   所以内页不套用这段白底 —— js/scroll-anim.js 会按 header 的实际 position 判断，
   不吸顶就不加 head-on，避免导航滚出视口时闪出一条白带。
   首页 .header 由页面自身 <style> 定义为 position:fixed（会吸顶），不受影响。 */
.header.head-on {
    background: #fff;
    box-shadow: 0 2px 12px rgba(27, 38, 51, .10);
    transition: background .25s ease, box-shadow .25s ease;
}
.header.head-on .headerhome a,
.header.head-on .headerlogo a {
    color: #1b2633 !important;
}
/* 2026-09-30：当前栏目下划线已由 border-bottom 改为伪元素（common.css 的
   .headerhome a::after）。这里同步改成给伪元素上色，否则吸顶转白底后
   深字配 currentColor 会看不出「当前项」。 */
.header.head-on .headerhome .active::after {
    background: #b21017 !important;
}

/* ---------- 10) 二级 sticky 导航：钉在视口最上沿（只占 68px） ---------- */
/* 主导航（logo + 菜单，约 180/205px）随页面滚走，只把二级 tab 栏固定在最上沿，
   整屏只被占掉 68px，且 tab 栏与内容之间不会出现「主导航让出的空白带」。
   ⚠️ 若以后又把 .header 改回 sticky 吸顶，本节必须改回 top: var(--head-offset, 180px)，
      否则 tab 栏会被吸顶导航压住看不见。 */
.mywhite[style*="sticky"],
.tith3[style*="sticky"] {
    top: 0 !important;
}

/* ---------- 11) 锚点跳转避开吸顶 tab 栏 ---------- */
/* 点击左侧目录跳转时，让目标区块停在 tab 栏下方，而不是被压在它后面 */
html {
    scroll-behavior: smooth;
}
[id^="simple-list-item"] {
    scroll-margin-top: 88px;   /* 吸顶 tab 栏 68px + 20px 余量 */
}

/* ==========================================================
   12) 内页动效补齐（2026-09-30）
   背景：首页早已挂满 reveal / hover-lift / zoom-img 三件套
   （中文首页 23 处 reveal + 14 处 hover-lift，英文首页 44 + 15），
   但 10 个中文内页 + 10 个英文内页几乎没挂（实测 reveal 仅 1~6 处、
   hover-lift 0 处），内页看起来「很静」。
   本节 + js/scroll-anim.js 的「内页自动挂载」一起把同一套动效补齐：
     · 正文区块 / 卡片栅格 → 滚入淡入上移（类名由 JS 自动挂，见 JS 注释）
     · 卡片 → 悬停上浮 + 柔和投影（第 3 节已定义）
     · 团队照片 → 悬停微放大（.zoom-img，第 3 节已定义）
     · 区块标题小红条 → 从左展开（第 7 节）
     · banner 底图「拉幕」入场 + 标语淡入上移（本节）
   原则：只动 transform / opacity / clip-path，一律不触发布局。
   ========================================================== */

/* 内页 banner 标语：加载即淡入上移（复用首页首屏的 hjHero 关键帧） */
.banner > .bancc > p {
    animation: hjHero .9s cubic-bezier(.22, .61, .36, 1) .08s backwards;
}

/* 内页 banner 底图：自上而下的「拉幕」入场
   ⚠️ 这里刻意不用 scale()（推镜）—— .banner 不能加 overflow:hidden，
      因为 .bancc 的 margin-bottom（50/100px）目前是塌陷穿过 .banner 的，
      一旦建立 BFC，下方所有内容会整体下移 100px。clip-path 不参与布局
      计算也不建立 BFC，所以 banner 高度与下方区块位置与改动前完全一致。
      fill-mode=backwards → 动画结束后不留 clip-path，图片回到常态。 */
.banner > img.d-block {
    animation: hjBannerWipe 1.05s cubic-bezier(.22, .61, .36, 1) backwards;
}

@keyframes hjBannerWipe {
    from {
        clip-path: inset(0 0 100% 0);
        opacity: .45;
    }

    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .banner > .bancc > p,
    .banner > img.d-block {
        animation: none !important;
    }
}