/* ============================================================
   元新星官网 · 视差滚动增强层 v1.0 (2026-09-11)
   纯增量 CSS，不改动既有样式，可整体删除回滚。
   特性：
   1) Hero 滚动视差（背景分层随滚动位移/淡出）
   2) 各 section 入场视差（缓慢上浮 + 轻微缩放）
   3) 品牌卡/流程卡 分层视差
   4) 视差装饰光斑（低开销，GPU 合成）
   ============================================================ */

/* ---------- 0) 基础：给视差容器建立 3D 上下文 ---------- */
.yxx-px-stage{perspective:1200px;transform-style:preserve-3d}
.yxx-px{will-change:transform,opacity;backface-visibility:hidden}

/* ---------- 1) Hero 滚动视差 ---------- */
.yxx-hero-px-bg{
  position:absolute;inset:-12% 0 -12% 0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 78% 22%,rgba(0,132,255,.20),transparent 42%),
    radial-gradient(circle at 16% 78%,rgba(240,101,15,.14),transparent 46%),
    linear-gradient(180deg,#f7fcfb 0%,#eef7f5 100%);
  will-change:transform,opacity;
}
/* 细网格纹理层（位移更慢 → 纵深感） */
.yxx-hero-px-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(13,59,140,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(13,59,140,.055) 1px,transparent 1px);
  background-size:56px 56px;
  will-change:transform;
}
/* Hero 内容随滚动轻微上移淡出 */
.yxx-hero-px-inner{will-change:transform,opacity}

/* ---------- 2) Section 入场视差 ---------- */
.yxx-px-sec{opacity:0;transform:translate3d(0,54px,0) scale(.985);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .95s cubic-bezier(.22,.61,.36,1)}
.yxx-px-sec.yxx-px-in{opacity:1;transform:none}

/* ---------- 3) 分层视差（同元素不同速度） ---------- */
.yxx-px-slow{will-change:transform}
.yxx-px-fast{will-change:transform}

/* 品牌卡 / 流程卡 hover 时轻微抬起（与滚动视差叠加） */
.brand-card,.flow-card,.partner-card,.activity-card{transform-style:preserve-3d}

/* ---------- 4) 视差装饰光斑 ---------- */
.yxx-px-blob{
  position:absolute;border-radius:50%;filter:blur(70px);opacity:.30;
  pointer-events:none;z-index:0;will-change:transform;
}

/* ---------- 5) 滚动进度条（视差提示用，可选） ---------- */
.yxx-px-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:200;
  background:linear-gradient(90deg,#0d3b8c,#0084ff 60%,#f0650f);
  transition:width .1s linear;pointer-events:none;
}

/* ---------- 6) 尊重减弱动效 ---------- */
@media (prefers-reduced-motion: reduce){
  .yxx-px-sec{opacity:1!important;transform:none!important}
  .yxx-hero-px-bg,.yxx-hero-px-grid,.yxx-hero-px-inner{transform:none!important}
  .yxx-px-progress{display:none}
}

/* ---------- 7) 移动端降级（视差幅度由 JS 控制，这里只保证不溢出） ---------- */
@media (max-width:850px){
  .yxx-hero-px-bg{inset:-6% 0}
  .yxx-px-blob{filter:blur(52px);opacity:.22}
}