@charset "UTF-8";
/* ==========================================================================
   微信数字员工站群 · 动效层  motion.css
   三个站（01 智研 / 02 NestSpace / 03 薄暮回声）共用这一份。
   站间差异只有主色，由 index.html 里一行 <style> 注入：
     --mo-accent  主色      --mo-halo / --mo-halo0  呼吸光环颜色（同色，alpha 1 / 0）

   三条设计原则
     1. 位移一律用独立属性 translate，不去碰 transform ——
        各站卡片 hover 用的是 transform，两者互不干扰。
     2. 折叠线以上（首屏）用纯 CSS 载入动画，不等 JS；下方交给 motion.js 的视口观察。
     3. 无 JS、脚本报错、prefers-reduced-motion 三种情况下，内容一律正常可见。
   ========================================================================== */

:root {
  --mo-accent: #4b70a5;
  --mo-halo:   rgba(75, 112, 165, .42);
  --mo-halo0:  rgba(75, 112, 165, 0);
  --mo-ease:   cubic-bezier(.22, .8, .28, 1);
}

/* ===================== 1. 视口入场（折叠线以下） ===================== */
html.mo-js [data-mo] { opacity: 0; translate: 0 22px; }
html.mo-js [data-mo].mo-in {
  opacity: 1;
  translate: 0 0;
  transition: opacity .66s var(--mo-ease), translate .66s var(--mo-ease);
  transition-delay: var(--mo-d, 0ms);
}

/* ===================== 2. 首屏载入入场（纯 CSS，不需要 JS） ===================== */
@keyframes moUp {
  from { opacity: 0; translate: 0 20px; }
  to   { opacity: 1; translate: 0 0; }
}

.hero-badge, .hero-title, .hero-sub, .hero-actions, .hero-note,
.hero-tags, .hero-desc, .hero-stats, .hero-side,
.eyebrow, .hero-copy h1, .hero-copy p, .hero-cta, .hero-divider,
.stats, .stats > *, .hero-stats > * {
  animation: moUp .72s var(--mo-ease) both;
}

/* 01 智研版 */
.hero-badge   { animation-delay: .04s; }
.hero-title   { animation-delay: .10s; }
.hero-sub     { animation-delay: .16s; }
.hero-actions { animation-delay: .22s; }
.hero-note    { animation-delay: .28s; }
.stats        { animation-delay: .34s; }
.stats > :nth-child(1), .hero-stats > :nth-child(1) { animation-delay: .40s; }
.stats > :nth-child(2), .hero-stats > :nth-child(2) { animation-delay: .46s; }
.stats > :nth-child(3), .hero-stats > :nth-child(3) { animation-delay: .52s; }
.stats > :nth-child(4), .hero-stats > :nth-child(4) { animation-delay: .58s; }

/* 02 NestSpace 版 */
.eyebrow      { animation-delay: .04s; }
.hero-copy h1 { animation-delay: .10s; }
.hero-copy p  { animation-delay: .16s; }
.hero-cta     { animation-delay: .22s; }
.hero-divider { animation-delay: .28s; }

/* 03 薄暮回声版 */
.hero-tags    { animation-delay: .04s; }
.hero-desc    { animation-delay: .22s; }
.hero-stats   { animation-delay: .28s; }
.hero-side    { animation-delay: .34s; }

/* ===================== 3. 按钮 / 卡片按钮：光泽扫过 ===================== */
.mo-sheen { position: relative; overflow: hidden; }
.fab.mo-sheen { position: fixed; }

.mo-sheen::after {
  content: "";
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 42%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .58), rgba(255, 255, 255, 0));
  transform: translateX(-190%) skewX(-18deg);
}
.mo-sheen:hover::after,
.mo-sheen:focus-visible::after { animation: moSheen .8s cubic-bezier(.3, .7, .3, 1); }

/* 浅底按钮换暗色高光，否则白光看不见 */
.mo-sheen-dark::after {
  background: linear-gradient(100deg, rgba(20, 30, 45, 0), rgba(20, 30, 45, .10), rgba(20, 30, 45, 0));
}

/* 进视口自动扫一次（二维码卡、工作台） */
.mo-sheen-auto::after { animation: moSheen 1.15s cubic-bezier(.3, .7, .3, 1) 1s 1; }

@keyframes moSheen {
  0%   { transform: translateX(-190%) skewX(-18deg); opacity: 0; }
  14%  { opacity: .95; }
  100% { transform: translateX(400%) skewX(-18deg); opacity: 0; }
}

/* ===================== 4. 呼吸光环（下载卡、悬浮按钮） ===================== */
.mo-halo { position: relative; }
.fab.mo-halo { position: fixed; }

.mo-halo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: moHalo 3.2s cubic-bezier(.2, .7, .3, 1) infinite;
}

@keyframes moHalo {
  0%   { box-shadow: 0 0 0 0    var(--mo-halo); }
  62%  { box-shadow: 0 0 0 13px var(--mo-halo0); }
  100% { box-shadow: 0 0 0 13px var(--mo-halo0); }
}

/* ===================== 5. 图标摇摆 / 卡片轻浮 ===================== */
.fab svg { animation: moWobble 3.4s ease-in-out infinite; transform-origin: 50% 58%; }
@keyframes moWobble {
  0%, 100% { transform: rotate(-7deg) scale(1); }
  50%      { transform: rotate(7deg)  scale(1.06); }
}

/* 03 首屏二维码卡（hover 用的是内部 img 的 transform，不冲突） */
.hero-side .qr-card { animation: moFloat 5.6s ease-in-out infinite; }
@keyframes moFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

/* ===================== 6. 背景光斑漂移 / 顶部彩条流动 ===================== */
/* 01 首屏光晕 */
html.mo-js .hero-glow { animation: moDrift 17s ease-in-out infinite; }
/* 03 首屏两团光晕 */
html.mo-js .hero-glow.g1 { animation: moDrift 19s ease-in-out infinite; }
html.mo-js .hero-glow.g2 { animation: moDriftAlt 23s ease-in-out infinite; }
/* 02 顶部七色渐变条 */
html.mo-js body::before { background-size: 220% 100%; animation: moFlow 7s linear infinite; }

@keyframes moDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(0, -16px, 0) scale(1.05); }
}
@keyframes moDriftAlt {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.04); }
  50%      { transform: translate3d(14px, 12px, 0) scale(1); }
}
@keyframes moFlow {
  from { background-position: 0 0; }
  to   { background-position: -220% 0; }
}

/* ===================== 7. 03 薄暮回声版专属 ===================== */
/* 卡片顶部细条：缓慢流光（特异性要高过 .card:nth-child(n)::before） */
html.mo-js .cards > .card::before {
  background-size: 220% 100%;
  animation: moFlow 5.4s linear infinite;
}

/* 工作台：进入视口后斜向扫一道蓝光 */
html.mo-js .bench.mo-sweep { position: relative; overflow: hidden; }
html.mo-js .bench.mo-sweep::after {
  content: "";
  position: absolute;
  top: -12%;
  bottom: -12%;
  left: 0;
  width: 24%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg, rgba(120, 158, 210, 0), rgba(120, 158, 210, .34), rgba(120, 158, 210, 0));
  transform: translateX(-190%) skewX(-16deg);
}
html.mo-js .bench.mo-sweep-go::after {
  animation: moSweep 1.4s cubic-bezier(.3, .6, .3, 1) .12s 1 both;
}
@keyframes moSweep {
  0%   { transform: translateX(-190%) skewX(-16deg); opacity: 0; }
  12%  { opacity: .95; }
  100% { transform: translateX(520%) skewX(-16deg); opacity: 0; }
}

/* 工作台内的选中会话行 / 未读红点：轻微呼吸，像真的在跳
   ⚠️ 2026-09 起工作台图改成 OSS 外链的**位图**（页面里没有内联 SVG 了），
   图内元素无法用 CSS 选中，这两条目前不生效 —— 留着是为了万一哪天换回内联 SVG。 */
html.mo-js .wb-svg rect[fill="#15ac70"] { animation: moSel 2.8s ease-in-out infinite; }
html.mo-js .wb-svg rect[fill="#f5222d"],
html.mo-js .wb-svg circle[fill="#f5222d"] { animation: moBlink 2.1s ease-in-out infinite; }

@keyframes moSel {
  0%, 100% { fill-opacity: 1; }
  50%      { fill-opacity: .7; }
}
@keyframes moBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* ===================== 8. 数字滚动时等宽，避免宽度跳动 ===================== */
html.mo-js [data-mo-num] { font-variant-numeric: tabular-nums; }

/* ===================== 9. 尊重系统「减少动态效果」 ===================== */
@media (prefers-reduced-motion: reduce) {
  html.mo-js [data-mo],
  html.mo-js [data-mo].mo-in { opacity: 1 !important; translate: none !important; transition: none !important; }
  .hero-badge, .hero-title, .hero-sub, .hero-actions, .hero-note,
  .hero-tags, .hero-desc, .hero-stats, .hero-side,
  .eyebrow, .hero-copy h1, .hero-copy p, .hero-cta, .hero-divider,
  .stats, .stats > *, .hero-stats > *,
  .mo-sheen::after, .mo-halo::before, .fab svg, .hero-side .qr-card,
  html.mo-js .hero-glow, html.mo-js .hero-glow.g1, html.mo-js .hero-glow.g2,
  html.mo-js body::before, html.mo-js .cards > .card::before,
  html.mo-js .bench.mo-sweep::after,
  html.mo-js .wb-svg rect[fill="#15ac70"],
  html.mo-js .wb-svg rect[fill="#f5222d"],
  html.mo-js .wb-svg circle[fill="#f5222d"] {
    animation: none !important;
  }
}