/* ==========================================================================
   APX MOTION · 苹果式滚动动效系统 v2
   统一缓动：cubic-bezier(.28,.11,.32,1)  入场位移 ≤ 28px
   1) .apx / .apx-hero        区块淡入上移
   2) .apx-cv 内 .apx-cw      大字从两侧向中间聚拢（滚动进入时触发）
   3) [data-apx-hero]         首屏随滚动轻微缩小淡出
   4) .apx-pin                钉住一屏 + 分步切换（Apple 产品页节奏）
   5) .apx-img                图片轻微缩放显现
   全部尊重 prefers-reduced-motion
   ========================================================================== */
:root{
  --apx-ease:cubic-bezier(.28,.11,.32,1);
  --apx-ease-out:cubic-bezier(.4,0,.2,1);
  --apx-ease-in-out:cubic-bezier(.65,0,.35,1);
}
html{scroll-behavior:smooth}

@media (prefers-reduced-motion: no-preference){

  /* ① 区块入场 */
  .apx{opacity:0;transform:translateY(28px);
    transition:opacity .95s var(--apx-ease),transform .95s var(--apx-ease);
    will-change:opacity,transform}
  .apx.apx-in{opacity:1;transform:none}
  .apx-hero{opacity:0;transform:translateY(18px);
    transition:opacity 1.05s var(--apx-ease),transform 1.05s var(--apx-ease)}
  .apx-hero.apx-in{opacity:1;transform:none}

  /* ② 大字聚拢：每个字符/词一个 span */
  .apx-cv{--apx-cv-d:1}
  .apx-cv .apx-cw{
    display:inline-block;
    opacity:0;
    transform:translateX(var(--dx,0)) translateY(6px) scale(.96);
    filter:blur(7px);
    transition:opacity .78s var(--apx-ease),transform .78s var(--apx-ease),filter .78s var(--apx-ease);
    will-change:opacity,transform,filter;
  }
  .apx-cv .apx-cw.sp{display:inline-block;width:.34em;height:1px;transform:none!important;filter:none!important;opacity:1!important}
  .apx-cv.apx-cv-in .apx-cw{opacity:1;transform:none;filter:blur(0)}

  /* ③ 首屏随滚动缩小淡出（JS 写 --sp：0→1） */
  [data-apx-hero]{transform-origin:center 30%}
  [data-apx-hero] > .wrap{
    transform:translateY(calc(var(--sp,0) * -34px)) scale(calc(1 - var(--sp,0) * .035));
    opacity:calc(1 - var(--sp,0) * .95);
    transition:transform .08s linear,opacity .08s linear;
    will-change:transform,opacity;
  }

  /* ④ 钉屏分步 */
  .apx-pin{position:relative}
  .apx-pin-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
  .apx-pin-stage>.wrap{width:100%}
  .apx-pin-steps{position:relative;height:min(56vh,430px);margin-top:6px}
  .apx-pin-step{
    position:absolute;inset:0;display:flex;align-items:center;gap:clamp(30px,5vw,70px);
    opacity:0;transform:translateY(34px) scale(.985);
    transition:opacity .55s var(--apx-ease),transform .62s var(--apx-ease);
    pointer-events:none;
  }
  .apx-pin-step .pin-txt{flex:1.15;max-width:560px}
  .apx-pin-step .pin-art{flex:.85;display:flex;align-items:center;justify-content:center}
  .apx-pin-step .pin-art svg{width:min(100%,380px);height:auto}
  .apx-pin-step.is-on{opacity:1;transform:none;pointer-events:auto}
  .apx-pin-step.is-past{opacity:0;transform:translateY(-30px) scale(.99)}
  .apx-pin-dots{display:flex;gap:8px;margin-top:26px}
  .apx-pin-dots i{width:26px;height:3px;border-radius:2px;background:rgba(20,23,28,.14);transition:background .4s var(--apx-ease),width .4s var(--apx-ease)}
  .apx-pin-dots i.on{background:var(--o2,#F2611C);width:44px}
  .apx-pin-on-dark .apx-pin-dots i{background:rgba(255,255,255,.18)}
  /* 分步内排版 */
  .apx-pin-step .pin-n{font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--o2,#F2611C);margin-bottom:14px}
  .apx-pin-step h3{font-size:clamp(26px,3.6vw,42px);font-weight:800;letter-spacing:-.025em;line-height:1.2;margin-bottom:14px}
  .apx-pin-step p{font-size:clamp(15px,1.15vw,17px);color:var(--ink3,#6b7178);max-width:620px;line-height:1.85}

  /* ⑤ 图片轻微缩放显现 */
  .apx-img{opacity:0;transform:scale(1.035);transition:opacity 1s var(--apx-ease),transform 1.2s var(--apx-ease)}
  .apx-img.apx-in{opacity:1;transform:none}
}

@media(max-width:1000px){.apx-pin-step .pin-art{display:none}}

/* 移动端 / 减少动效：钉屏退化为普通堆叠 */
@media (max-width:760px){
  .apx-pin{height:auto!important}
  .apx-pin-stage{position:static;height:auto;display:block;padding:52px 0}
  .apx-pin-steps{height:auto;display:flex;flex-direction:column;gap:14px}
  .apx-pin-step{position:static;opacity:1!important;transform:none!important;pointer-events:auto}
  .apx-pin-dots{display:none}
  .apx-pin-step .pin-art{display:none}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .apx,.apx-hero,.apx-cv .apx-cw,.apx-img{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .apx-pin{height:auto!important}
  .apx-pin-stage{position:static;height:auto;display:block;padding:52px 0}
  .apx-pin-steps{height:auto;display:flex;flex-direction:column;gap:14px}
  .apx-pin-step{position:static;opacity:1!important;transform:none!important}
  .apx-pin-step .pin-art{display:none}
  .apx-pin-dots{display:none}
  [data-apx-hero] > .wrap{transform:none!important;opacity:1!important}
}