/* ============================================================
   走进驰骋 · 页面级补丁（2026-10-30）

   1) 首屏高度对齐设计稿 820
      about.html 里这句注释写得很清楚：「01 Hero（设计稿 8:708 · 1920×820）」。
      但 style.css 里是 .ab-hero{height:calc(820px + var(--header-h))}，
      而页头 .header 是 position:fixed —— 它浮在首屏之上、不占文档流，
      所以再叠 76px 之后实际渲染成 896，比设计稿整整高 76。
      口径与招商加盟页保持一致（.jf-hero{height:820px}，同样是严格 820）。

      为什么不直接改 style.css：它是 11 页共用的，改一次要全站轮转版本号，
      风险与收益不成比例；这里走页面级补丁（和 news.css / franchise.css 同一做法），
      只被 about.html 引用，影响面只有这一页。

      用 body .ab-hero 而不是 .ab-hero，是为了稳定压过 style.css 里的基础规则，
      不必依赖「谁后加载」这种脆弱条件。
   ============================================================ */

/* 2026-11-10 首屏高度全站统一（阿凯重申定稿）：与加入我们/好物合作同款
   min(820px,88vw)，移动端 390 宽 ≈ 343px（原桌面 820 / 窄屏 520 各行其是） */
body .ab-hero { height: min(820px, 88vw); }

@media (max-width: 1023px) {
  body .ab-hero { height: min(820px, 88vw); }
}

/* ============================================================
   2)「以文化人 以人强企」三张卡：逐张入场 + 轻视差（2026-10-30 第二批）

   改动点：
   - about.html 里三张卡原本挂 .fade-up（全站同组错峰，三张几乎同时出现），
     这里撤掉，交给 assets/about-culture.js 按卡各自触发。
   - 隐藏态只写在 .ab-cul.is-reveal 下 —— 这个类由 JS 加。
     JS 不跑 / 没有 IntersectionObserver / 用户开了减少动态效果
     → 没有这个类，卡就是普通静态卡，不会白屏。
   - 入场分三层：卡(64px) → 蓝标签(18px) → 大标题(24px)，
     延迟 0 / .12s / .22s，时长 0.78 / 0.62 / 0.62s，
     叠起来是「整张卡落位后，标签先浮起来、标题再跟上」。
   - 背景视差 ±14px 由 JS 写 --cul-py；为此把三张图的裁切上下各放宽 14px，
     保证滑动时不会露出底色 #0B2E5C（hq 那张原本底边正好齐平）。
   ============================================================ */

/* ① 裁切上下各放宽 14px：视觉裁切范围不变，只为视差留余量 */
body .ab-cul-card--hq .ab-cul-card__bg{
  top: calc(-56.25% - 14px); height: calc(156.25% + 28px);
}
body .ab-cul-card--hands .ab-cul-card__bg{
  top: calc(-5.8333% - 14px); height: calc(133.125% + 28px);
}
body .ab-cul-card--meeting .ab-cul-card__bg{
  top: calc(-25.4167% - 14px); height: calc(131.0417% + 28px);
}

/* ② 视差层（transform 由 JS 逐帧写，这里只给合成提示） */
body .ab-cul-card__bg{
  transform: translate3d(0, var(--cul-py, 0px), 0);
  will-change: transform;
}

/* ③ hover 轻微推近：用独立的 scale 属性，不与上面的 transform 抢同一个属性 */
@media (hover: hover) and (min-width: 1024px){
  body .ab-cul-card__bg{ transition: scale .65s cubic-bezier(.22,.61,.36,1); }
  body .ab-cul-card:hover .ab-cul-card__bg{ scale: 1.035; }
}

/* ④ 入场：卡本体 */
body .ab-cul.is-reveal .ab-cul-card{
  opacity: 0;
  transform: translate3d(0, 64px, 0) scale(.985);
  transition:
    opacity .78s cubic-bezier(.22,.61,.36,1),
    transform .78s cubic-bezier(.22,.61,.36,1);
}
body .ab-cul.is-reveal .ab-cul-card.is-in{
  opacity: 1;
  transform: none;
}

/* ⑤ 入场：卡内两个元素错峰上浮（依赖卡上的 .is-in） */
body .ab-cul.is-reveal .ab-cul-card__label,
body .ab-cul.is-reveal .ab-cul-card__title{
  opacity: 0;
  transition:
    opacity .62s cubic-bezier(.22,.61,.36,1),
    transform .62s cubic-bezier(.22,.61,.36,1);
}
body .ab-cul.is-reveal .ab-cul-card__label{ transform: translate3d(0, 18px, 0); }
body .ab-cul.is-reveal .ab-cul-card__title{ transform: translate3d(0, 24px, 0); transition-delay: .10s; }

body .ab-cul.is-reveal .ab-cul-card.is-in .ab-cul-card__label,
body .ab-cul.is-reveal .ab-cul-card.is-in .ab-cul-card__title{
  opacity: 1;
  transform: none;
}

/* ⑥ 减少动态效果：一切归位，不做位移 */
@media (prefers-reduced-motion: reduce){
  body .ab-cul-card,
  body .ab-cul-card__label,
  body .ab-cul-card__title{ opacity: 1 !important; transform: none !important; }
  body .ab-cul-card__bg{ transform: none !important; }
}