/* ============================================================
   mutop.cn · 全站动效体系（白底系列页公共引入）
   设计语言：克制 AI 科技感 —— 位移 + 淡入 + 微光晕，
   全部基于 transform/opacity，尊重 prefers-reduced-motion。
   ============================================================ */

/* ---------- 主题光色（页面可在 <style> 中以 :root 覆盖） ---------- */
:root {
  --mo-c1: #5b8cff;              /* 主氛围色 A */
  --mo-c2: #7c5cff;              /* 主氛围色 B */
  --mo-ink: #101828;
  --mo-ease: cubic-bezier(.22, .61, .36, 1);
}

html.js-motion { scroll-behavior: smooth; }

/* ---------- 1. 顶部滚动进度条 ---------- */
.mo-progress {
  position: fixed; top: 0; left: 0; z-index: 9999;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--mo-c1), var(--mo-c2));
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(124, 108, 255, .55);
  opacity: 0; transition: opacity .3s ease;
  pointer-events: none;
}
.mo-progress.on { opacity: 1; }

/* ---------- 2. Hero 入场（标题区错落浮现） ---------- */
@keyframes moHeroUp {
  from { opacity: 0; transform: translateY(26px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
html.js-motion .hero .wrap > *,
html.js-motion .hero .hero-grid > * {
  animation: moHeroUp .9s var(--mo-ease) both;
}
html.js-motion .hero .wrap > *:nth-child(1) { animation-delay: .06s; }
html.js-motion .hero .wrap > *:nth-child(2) { animation-delay: .18s; }
html.js-motion .hero .wrap > *:nth-child(3) { animation-delay: .30s; }
html.js-motion .hero .wrap > *:nth-child(4) { animation-delay: .42s; }
html.js-motion .hero .wrap > *:nth-child(5) { animation-delay: .54s; }
html.js-motion .hero .hero-grid > *:nth-child(1) { animation-delay: .12s; }
html.js-motion .hero .hero-grid > *:nth-child(2) { animation-delay: .30s; }
html.js-motion .hero .hero-grid > *:nth-child(3) { animation-delay: .48s; }

/* ---------- 3. Hero 氛围光斑（自动跟随页面主题色） ---------- */
.mo-aura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
html.js-motion .hero > .wrap { position: relative; z-index: 1; }
.mo-aura i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(70px); opacity: .5;
  will-change: transform;
}
.mo-aura i.a { width: 520px; height: 520px; left: -120px; top: -180px;
  background: radial-gradient(circle at center, var(--mo-c1), transparent 68%);
  animation: moDriftA 16s ease-in-out infinite alternate; }
.mo-aura i.b { width: 420px; height: 420px; right: -110px; bottom: -200px;
  background: radial-gradient(circle at center, var(--mo-c2), transparent 68%);
  animation: moDriftB 20s ease-in-out infinite alternate; }
@keyframes moDriftA {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(60px, 40px) scale(1.15); }
}
@keyframes moDriftB {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-70px, -30px) scale(.9); }
}
/* 浅色 Hero 自动降透明度，避免显脏 */
html.js-motion .hero.mo-soft .mo-aura i { opacity: .14; }
html.js-motion .hero.mo-soft .mo-aura i.a { filter: blur(90px); }
html.js-motion .hero.mo-soft .mo-aura i.b { filter: blur(100px); }

/* 深色 Hero 上叠加一层极淡网格，增强“引擎感” */
html.js-motion .hero.mo-dark .mo-aura::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 30%, transparent 78%);
}

/* ---------- 4. 滚动渐入（Scroll Reveal） ---------- */
html.js-motion .rv {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .75s var(--mo-ease),
    transform .75s var(--mo-ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
html.js-motion .rv.in { opacity: 1; transform: none; }

/* ---------- 5. 卡片交互：上浮 + 光晕边框 + 图标微动 ---------- */
@media (hover: hover) {
  html.js-motion .grid3 > *, html.js-motion .grid-3 > *, html.js-motion .grid-2 > *,
  html.js-motion .biz-grid > *, html.js-motion .chan-grid > *, html.js-motion .cap-grid > *,
  html.js-motion .method-grid > *, html.js-motion .flow-grid > *, html.js-motion .who-grid > *,
  html.js-motion .guarantee-grid > *, html.js-motion .loop-grid > *, html.js-motion .stats-grid > *,
  html.js-motion .foot-grid > * {
    transition: transform .35s var(--mo-ease), box-shadow .35s ease, border-color .35s ease;
  }
  html.js-motion .grid3 > *:hover, html.js-motion .grid-3 > *:hover, html.js-motion .grid-2 > *:hover,
  html.js-motion .biz-grid > *:hover, html.js-motion .chan-grid > *:hover, html.js-motion .cap-grid > *:hover,
  html.js-motion .method-grid > *:hover, html.js-motion .flow-grid > *:hover, html.js-motion .who-grid > *:hover,
  html.js-motion .guarantee-grid > *:hover, html.js-motion .loop-grid > *:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(16, 24, 40, .10);
  }
  html.js-motion .stats-grid > *:hover { transform: translateY(-3px); }
  /* 卡片图标悬浮微动（覆盖常见 icon 容器） */
  html.js-motion .grid3 > *:hover svg, html.js-motion .grid-3 > *:hover svg,
  html.js-motion .grid-2 > *:hover svg, html.js-motion .biz-grid > *:hover svg,
  html.js-motion .cap-grid > *:hover svg, html.js-motion .method-grid > *:hover svg,
  html.js-motion .who-grid > *:hover svg, html.js-motion .guarantee-grid > *:hover svg,
  html.js-motion .grid3 > *:hover .ico, html.js-motion .grid-3 > *:hover .ico,
  html.js-motion .grid-2 > *:hover .ico, html.js-motion .biz-grid > *:hover .ico,
  html.js-motion .cap-grid > *:hover .ico, html.js-motion .method-grid > *:hover .ico,
  html.js-motion .who-grid > *:hover .ico, html.js-motion .guarantee-grid > *:hover .ico {
    transform: translateY(-3px) scale(1.06);
    transition: transform .35s var(--mo-ease);
  }
}

/* ---------- 6. 主按钮：悬浮光晕 ---------- */
@media (hover: hover) {
  html.js-motion .btn, html.js-motion .hero a[class*="btn"], html.js-motion .cta a[class*="btn"] {
    transition: transform .3s var(--mo-ease), box-shadow .3s ease, filter .3s ease;
  }
  html.js-motion .btn:hover, html.js-motion .hero a[class*="btn"]:hover, html.js-motion .cta a[class*="btn"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(74, 108, 247, .28), 0 0 0 1px rgba(255,255,255,.06) inset;
    filter: brightness(1.05);
  }
}

/* ---------- 7. 导航滚动态：毛玻璃 + 底部微光 ---------- */
html.js-motion .nav { transition: box-shadow .35s ease, background .35s ease, border-color .35s ease; }
html.js-motion .nav.mo-scrolled {
  box-shadow: 0 1px 0 rgba(16, 24, 40, .06), 0 10px 30px -18px rgba(16, 24, 40, .18);
}

/* ---------- 8. 返回顶部 ---------- */
.mo-top {
  position: fixed; right: 22px; bottom: 26px; z-index: 9980;
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--mo-c1), var(--mo-c2));
  color: #fff; cursor: pointer; border: none;
  box-shadow: 0 10px 24px rgba(74, 108, 247, .32);
  opacity: 0; transform: translateY(14px); visibility: hidden;
  transition: opacity .3s ease, transform .3s var(--mo-ease), visibility .3s;
}
.mo-top.on { opacity: 1; transform: none; visibility: visible; }
.mo-top:hover { transform: translateY(-3px); filter: brightness(1.08); }
.mo-top svg { width: 18px; height: 18px; }

/* ---------- 9. 减少动态偏好：全部静置 ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js-motion { scroll-behavior: auto; }
  html.js-motion .hero .wrap > *, html.js-motion .hero .hero-grid > *,
  html.js-motion .rv { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  .mo-aura i { animation: none !important; }
}

/* ---------- 10. 手机端收敛 ---------- */
@media (max-width: 760px) {
  html.js-motion .rv { transform: translateY(14px); }
  .mo-aura i.a { width: 360px; height: 360px; }
  .mo-aura i.b { width: 300px; height: 300px; }
  .mo-top { right: 14px; bottom: 18px; width: 40px; height: 40px; }
}