/* =========================================================
   全站动效层 · Motion（只作用于 body.site-glass）
   目的：让页面「活」起来，但不破坏明亮玻璃的静气。
     · 入场：分层错峰上浮 + 标题擦出 + 首屏编排
     · 视差：首屏玻璃面板随滚动轻微上浮
     · 交互：卡片 3D 跟随、指针光斑、按钮磁吸与扫光
     · 锚点 Dock：当前项玻璃胶囊滑动迁移
     · 长图/蓝图：图片沉降缩放、阶段卡逐个落位
   约束：不改文案、不改版式、不出现滚动条、尊重 reduced-motion
   ========================================================= */

:root {
  --mo-ease: cubic-bezier(.16, 1, .3, 1);
  --mo-ease-soft: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 1. 滚动入场：比原先的 16px 更明确，且带错峰 ---------- */
html.js body.site-glass .reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity .82s var(--mo-ease) var(--mo-d, 0ms),
    transform 1s var(--mo-ease) var(--mo-d, 0ms);
}
html.js body.site-glass .reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 标题组：文字逐行被「幕布」自下撩开，比单纯淡入更有落字感。

   关键：clip-path 必须加在子元素上，绝不能加在这个 .reveal 自身。
   IntersectionObserver 计算相交矩形时会把这个元素自身的 clip 算进去，
   一旦 inset 把可见高度裁成 0，元素就永远「不相交」→ is-in 永不触发
   → 标题永久空白（此前 section-head 整块消失就是这个原因）。
   所以容器只做定位，裁切交给 > * 子元素；子元素再按 90ms 阶梯错峰。 */
html.js body.site-glass .reveal[data-mo="head"] {
  opacity: 1;
  transform: none;
}
html.js body.site-glass .reveal[data-mo="head"] > * {
  -webkit-clip-path: inset(-18% -8% 100% -8%);
  clip-path: inset(-18% -8% 100% -8%);
  transform: translate3d(0, 16px, 0);
  transition:
    -webkit-clip-path 1s var(--mo-ease) var(--mo-d, 0ms),
    clip-path 1s var(--mo-ease) var(--mo-d, 0ms),
    transform 1s var(--mo-ease) var(--mo-d, 0ms);
}
html.js body.site-glass .reveal[data-mo="head"].is-in > * {
  -webkit-clip-path: inset(-18% -8% -22% -8%);
  clip-path: inset(-18% -8% -22% -8%);
  transform: none;
}
html.js body.site-glass .reveal[data-mo="head"] > *:nth-child(2) {
  transition-delay: calc(var(--mo-d, 0ms) + 90ms);
}
html.js body.site-glass .reveal[data-mo="head"] > *:nth-child(3) {
  transition-delay: calc(var(--mo-d, 0ms) + 170ms);
}
html.js body.site-glass .reveal[data-mo="head"] > *:nth-child(n+4) {
  transition-delay: calc(var(--mo-d, 0ms) + 240ms);
}

/* 图片 / 大面板：轻微推近，落位后回到 1:1 */
html.js body.site-glass .reveal[data-mo="scale"] {
  transform: translate3d(0, 26px, 0) scale(.962);
}
html.js body.site-glass .reveal[data-mo="scale"].is-in {
  transform: translate3d(0, 0, 0) scale(1);
}

/* 左右分栏：从两侧合拢 */
html.js body.site-glass .reveal[data-mo="left"] { transform: translate3d(-30px, 0, 0); }
html.js body.site-glass .reveal[data-mo="right"] { transform: translate3d(30px, 0, 0); }
html.js body.site-glass .reveal[data-mo="left"].is-in,
html.js body.site-glass .reveal[data-mo="right"].is-in { transform: none; }

/* 卡片统一加长缓动，悬停更「有重量」 */
body.site-glass .card,
body.site-glass .product-card,
body.site-glass .cat-card,
body.site-glass .extra-card,
body.site-glass .segment-card,
body.site-glass .value-card,
body.site-glass .pain-card,
body.site-glass .metric,
body.site-glass .step,
body.site-glass .module,
body.site-glass .model,
body.site-glass .plan,
body.site-glass .tier,
body.site-glass .phase-card,
body.site-glass .bp-cluster {
  transition:
    transform .55s var(--mo-ease),
    box-shadow .5s var(--mo-ease-soft),
    border-color .4s ease,
    background .4s ease;
}
body.site-glass .shot-slot {
  transition: transform .55s var(--mo-ease), box-shadow .5s var(--mo-ease-soft), border-color .4s ease;
}

/* ---------- 2. 首屏编排：面包屑 → 标题 → 正文 → 按钮 ---------- */
@keyframes moRise {
  from { opacity: 0; transform: translate3d(0, 24px, 0); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
/* 用 backwards：结束后回到元素自然样式，不留 filter 残留，
   否则 hero 里的玻璃按钮 backdrop-filter 采样会被 filter 改变 */
body.site-glass .page-hero .breadcrumb { animation: moRise .85s var(--mo-ease) .04s backwards; }
body.site-glass .page-hero h1 { animation: moRise 1.05s var(--mo-ease) .12s backwards; }
body.site-glass .page-hero .lead { animation: moRise 1.05s var(--mo-ease) .26s backwards; }
body.site-glass .page-hero .hero-actions { animation: moRise .95s var(--mo-ease) .38s backwards; }
body.site-glass .error-hero > .container > * { animation: moRise .9s var(--mo-ease) backwards; }
body.site-glass .error-hero > .container > *:nth-child(2) { animation-delay: .1s; }
body.site-glass .error-hero > .container > *:nth-child(3) { animation-delay: .2s; }

/* 右侧白玻璃面板：缩放就位（用独立 scale，不干扰已有的透视 transform） */
@keyframes moPanelIn {
  from { opacity: 0; scale: .9; }
  to   { opacity: 1; scale: 1; }
}
body.site-glass .page-hero > .container::before { animation: moPanelIn 1.1s var(--mo-ease) .18s backwards; }
body.site-glass .page-hero > .container::after { animation: moPanelIn 1.3s var(--mo-ease) .30s backwards; }
body.site-glass .page-hero--art > .container > .hero-art { animation: moPanelIn 1.3s var(--mo-ease) .30s backwards; }

/* 首屏视差：滚动时面板相对内容慢半拍（独立 translate，不抢 hover 的 transform） */
body.site-glass .page-hero > .container::before,
body.site-glass .page-hero > .container::after {
  translate: 0 var(--sg-py, 0px);
}

/* ---------- 3. 顶栏：滚动后加深，导航下划线扫出 ---------- */
body.site-glass .site-header {
  transition: box-shadow .5s var(--mo-ease-soft), background-color .5s ease;
}
body.site-glass .site-header.is-scrolled {
  box-shadow:
    inset 0 1px 0 #fff,
    0 18px 46px rgba(46, 76, 140, .17) !important;
}
body.site-glass .nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2b7cff, #a78bfa);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .42s var(--mo-ease);
}
body.site-glass .nav-links a:hover::after,
body.site-glass .nav-links a[aria-current="true"]::after {
  transform: scaleX(1);
  background: linear-gradient(90deg, #2b7cff, #a78bfa);
}

/* ---------- 4. 锚点 Dock：当前项由一枚滑动玻璃胶囊承载 ---------- */
body.site-glass .anchor-nav {
  animation: moDockIn .72s var(--mo-ease) backwards;
}
@keyframes moDockIn {
  from { opacity: 0; transform: translate3d(0, -12px, 0) scale(.99); }
  to   { opacity: 1; transform: none; }
}
body.site-glass .anchor-nav a { position: relative; z-index: 1; }
body.site-glass .anchor-nav .anchor-ink {
  position: absolute;
  left: 0;
  top: 50%;
  height: 46px;
  margin-top: -23px;
  width: 0;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(150deg, rgba(255, 255, 255, .99), rgba(232, 226, 255, .95));
  border: 1.5px solid rgba(124, 92, 255, .38);
  box-shadow:
    inset 0 1px 0 #fff,
    0 10px 24px rgba(47, 100, 240, .22),
    0 0 22px rgba(124, 92, 255, .18);
  transform: translate3d(var(--ink-x, 0px), 0, 0);
  transition:
    transform .6s var(--mo-ease),
    width .6s var(--mo-ease),
    opacity .35s ease;
}
/* 有胶囊后，当前项自身不再画框，避免「双层边框」 */
body.site-glass .anchor-nav.has-ink a.is-active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body.site-glass .anchor-nav.is-stuck .anchor-ink {
  box-shadow:
    inset 0 1px 0 #fff,
    0 12px 28px rgba(47, 100, 240, .26),
    0 0 26px rgba(124, 92, 255, .24);
}

/* ---------- 5. 卡片：指针跟随的柔光 + 轻微立体 ---------- */
body.site-glass .card:hover,
body.site-glass .product-card:hover,
body.site-glass .extra-card:hover,
body.site-glass .value-card:hover,
body.site-glass .pain-card:hover,
body.site-glass .step:hover,
body.site-glass .metric:hover,
body.site-glass .module:hover,
body.site-glass .model:hover {
  background-image:
    radial-gradient(260px 220px at var(--mx, 50%) var(--my, 0%), rgba(86, 140, 255, .22), rgba(255, 255, 255, 0) 70%),
    radial-gradient(220px 180px at var(--mx, 50%) var(--my, 0%), rgba(196, 148, 255, .16), rgba(255, 255, 255, 0) 72%),
    linear-gradient(150deg, rgba(255, 255, 255, .93), rgba(240, 247, 255, .62)) !important;
}
/* 图标与编号在悬停时轻轻抬头 */
body.site-glass .card-icon,
body.site-glass .card-num,
body.site-glass .bp-ico {
  transition: transform .5s var(--mo-ease), color .35s ease, box-shadow .45s ease;
}
body.site-glass .card:hover .card-icon,
body.site-glass .pain-card:hover .card-num,
body.site-glass .bp-cluster:hover .bp-ico {
  transform: translateY(-3px) rotate(-5deg) scale(1.07);
}
body.site-glass .card-link {
  transition: color .3s ease, gap .35s var(--mo-ease), transform .35s var(--mo-ease);
}
body.site-glass .card:hover .card-link { transform: translateX(3px); }

/* ---------- 6. 截图位：落位后仍有呼吸，悬停缓慢推近 ---------- */
body.site-glass .shot-slot img {
  transition: transform 1.4s var(--mo-ease), filter .6s ease;
}
body.site-glass .shot-slot:hover img { transform: scale(1.028); }

/* ---------- 7. 蓝色主按钮：磁吸位移 + 一次扫光 ---------- */
body.site-glass .btn { position: relative; overflow: hidden; }
body.site-glass .btn::after {
  content: "";
  position: absolute;
  top: -70%; bottom: -70%;
  left: 0;
  width: 38%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .62), transparent);
  transform: translate3d(-240%, 0, 0) skewX(-16deg);
  opacity: 0;
  transition: transform .9s var(--mo-ease), opacity .35s ease;
}
body.site-glass .btn:hover::after {
  transform: translate3d(420%, 0, 0) skewX(-16deg);
  opacity: 1;
}

/* 浅色按钮上换成淡蓝扫光，白底上也看得见 */
body.site-glass .btn-ghost::after,
body.site-glass .btn-light::after,
body.site-glass .btn-outline-light::after {
  background: linear-gradient(100deg, transparent, rgba(110, 160, 255, .38), transparent);
}

/* ---------- 8. 蓝图：阶段卡依次落位、站点逐个点亮 ---------- */
@keyframes moCardUp {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
}
@keyframes moDotPop {
  from { opacity: 0; transform: scale(.4); }
}
body.site-glass .bp-timeline.is-in .bp-card {
  animation: moCardUp .85s var(--mo-ease) backwards;
}
body.site-glass .bp-timeline.is-in .bp-card:nth-child(1) { animation-delay: .18s; }
body.site-glass .bp-timeline.is-in .bp-card:nth-child(2) { animation-delay: .28s; }
body.site-glass .bp-timeline.is-in .bp-card:nth-child(3) { animation-delay: .38s; }
body.site-glass .bp-timeline.is-in .bp-card:nth-child(4) { animation-delay: .48s; }
body.site-glass .bp-timeline.is-in .bp-station {
  animation: moDotPop .62s cubic-bezier(.34, 1.4, .64, 1) backwards;
}
body.site-glass .bp-timeline.is-in .bp-station:nth-child(1) { animation-delay: .06s; }
body.site-glass .bp-timeline.is-in .bp-station:nth-child(2) { animation-delay: .14s; }
body.site-glass .bp-timeline.is-in .bp-station:nth-child(3) { animation-delay: .22s; }
body.site-glass .bp-timeline.is-in .bp-station:nth-child(4) { animation-delay: .30s; }

/* 小标题前的那道短线，进入时向右侧展开 */
html.js body.site-glass .reveal .kicker::before {
  transition: width .9s var(--mo-ease) .12s;
}
html.js body.site-glass .reveal:not(.is-in) .kicker::before { width: 0 !important; }

/* ---------- 9. 触屏 / 窄屏：去掉立体与光斑，只保留位移 ---------- */
@media (hover: none), (max-width: 900px) {
  body.site-glass .card:hover,
  body.site-glass .product-card:hover,
  body.site-glass .extra-card:hover,
  body.site-glass .value-card:hover,
  body.site-glass .pain-card:hover {
    background-image: linear-gradient(150deg, rgba(255, 255, 255, .92), rgba(240, 247, 255, .60)) !important;
  }
  body.site-glass .anchor-nav .anchor-ink { transition: transform .45s var(--mo-ease), width .45s var(--mo-ease), opacity .3s ease; }
}
@media (max-width: 700px) {
  body.site-glass .anchor-nav .anchor-ink { height: 40px; margin-top: -20px; }
}

/* ---------- 10. 尊重系统的减弱动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js body.site-glass .reveal,
  html.js body.site-glass .reveal[data-mo="head"],
  html.js body.site-glass .reveal[data-mo="head"] > *,
  html.js body.site-glass .reveal[data-mo="scale"],
  html.js body.site-glass .reveal[data-mo="left"],
  html.js body.site-glass .reveal[data-mo="right"] {
    opacity: 1 !important;
    transform: none !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  body.site-glass .page-hero .breadcrumb,
  body.site-glass .page-hero h1,
  body.site-glass .page-hero .lead,
  body.site-glass .page-hero .hero-actions,
  body.site-glass .error-hero > .container > *,
  body.site-glass .page-hero > .container::before,
  body.site-glass .page-hero > .container::after,
  body.site-glass .page-hero--art > .container > .hero-art,
  body.site-glass .anchor-nav,
  body.site-glass .bp-timeline.is-in .bp-card,
  body.site-glass .bp-timeline.is-in .bp-station {
    animation: none !important;
  }
  body.site-glass .btn::after { display: none; }
  body.site-glass .shot-slot:hover img { transform: none; }
  html.js body.site-glass .reveal:not(.is-in) .kicker::before { width: 22px !important; }
}