/* ═══════════════════════════════════════════════════════════════════════
   洪武 · 全站动效层  HW-MOTION  (V.163)
   灵感来源: MotionSites / React Bits / Uiverse / Anime.js / Aceternity UI
   设计基因: 主点睛紫 #4D7CFE · 能量青 #4DFFC4 · 危险红 #FF5C7A · 深空黑 #07070C

   性能铁律 (老板: "太卡了"):
     · 只动 transform / opacity —— 走 GPU 合成层, 不触发布局重排
     · 一次入场 (one-shot), 不搞无限循环动画
     · 每页动效元素上限由 JS 控制 (MAX_STAGGER)
     · 全部挂在 .hm-on 下 —— URL 加 ?motion=off 即整体失效

   回滚: ① index.html 删两个引用  ② 或 URL 加 ?motion=off
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. 入场: 阶梯浮起 (MotionSites stagger) ── */
@keyframes hmRise{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to  {opacity:1;transform:none}
}
.hm-on .hm-rise{
  opacity:0;
  will-change:transform,opacity;
  animation:hmRise .58s cubic-bezier(.22,1,.36,1) forwards;
}
.hm-on .hm-rise.hm-done{will-change:auto}

/* ── 2. 面板头: 扫掠光条 (Uiverse) ── */
@keyframes hmSweep{
  0%  {transform:translate3d(-120%,0,0)}
  100%{transform:translate3d(320%,0,0)}
}
.hm-on .hm-sweep{position:relative;overflow:hidden}
.hm-on .hm-sweep::after{
  content:'';position:absolute;top:0;left:0;width:32%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(77,124,254,.16),transparent);
  transform:translate3d(-120%,0,0);
  animation:hmSweep 1.15s cubic-bezier(.4,0,.2,1) .18s 1;
  pointer-events:none;
}

/* ── 3. 卡片: 鼠标聚光 (Aceternity spotlight) ── */
.hm-on .hm-spot{position:relative}
.hm-on .hm-spot::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .32s ease;
  background:radial-gradient(260px circle at var(--hm-mx,50%) var(--hm-my,50%),
    rgba(77,124,254,.13),transparent 62%);
  z-index:0;
}
.hm-on .hm-spot:hover::before{opacity:1}

/* ── 4. 交互元素: 流光边 (Uiverse conic) ── */
@property --hm-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes hmSpin{to{--hm-a:360deg}}
.hm-on .hm-glow{position:relative;isolation:isolate}
.hm-on .hm-glow::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--hm-a,0deg),transparent 0 60%,
    var(--hw-brand,#4D7CFE) 76%,var(--hw-energy,#4DFFC4) 86%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .28s ease;pointer-events:none;z-index:2;
}
.hm-on .hm-glow:hover::before{opacity:1;animation:hmSpin 2.6s linear infinite}

/* ── 5. 数字: 跳动强调 (React Bits count pulse) ── */
@keyframes hmNum{
  0%  {transform:translate3d(0,-3px,0);opacity:.55}
  100%{transform:none;opacity:1}
}
.hm-on .hm-num{animation:hmNum .42s cubic-bezier(.22,1,.36,1)}

/* ── 6. 行入场: 表格/列表逐行 (轻, 只前 N 行由 JS 加类) ── */
@keyframes hmRowIn{
  from{opacity:0;transform:translate3d(-6px,0,0)}
  to  {opacity:1;transform:none}
}
.hm-on .hm-row{animation:hmRowIn .34s cubic-bezier(.22,1,.36,1) both}

/* ── 7. 脉冲点 / 呼吸灯 (Uiverse) ── */
@keyframes hmBreath{
  0%,100%{opacity:.42;transform:scale(.72)}
  50%    {opacity:1;transform:scale(1)}
}
.hm-on .hm-pulse{
  animation:hmBreath 2.1s ease-in-out infinite;
  box-shadow:0 0 10px var(--hw-up,#4DFFC4);
}

/* ── 8. 页头标题: 模糊聚焦 (React Bits blur text) ── */
@keyframes hmFocus{
  from{opacity:0;filter:blur(7px);transform:translate3d(0,5px,0)}
  to  {opacity:1;filter:blur(0);transform:none}
}
.hm-on .hm-focus{animation:hmFocus .62s cubic-bezier(.22,1,.36,1) both}

/* ── 9. 主内容区：切换页时的整体淡入 (Aceternity) ── */
@keyframes hmPageIn{
  from{opacity:0;transform:translate3d(0,8px,0)}
  to  {opacity:1;transform:none}
}
.hm-on .tab-page.active.hm-page{animation:hmPageIn .34s cubic-bezier(.22,1,.36,1)}

/* ── 10. 终端墙: 专用加持 ── */
.hm-on #hwWall .wl-kpi{transition:transform .22s cubic-bezier(.22,1,.36,1),
  border-color .22s ease, box-shadow .22s ease}
.hm-on #hwWall .wl-kpi:hover{
  transform:translate3d(0,-2px,0);
  border-color:rgba(77,124,254,.34);
  box-shadow:0 6px 22px -12px rgba(77,124,254,.5)}
.hm-on #hwWall .strat-cell{transition:transform .2s cubic-bezier(.22,1,.36,1),
  border-color .2s ease, background .2s ease}
.hm-on #hwWall .strat-cell:hover{
  transform:translate3d(2px,0,0);
  border-color:rgba(77,124,254,.3);
  background:rgba(77,124,254,.05)}

/* ── 11. 全站通用卡片/面板悬浮 (轻, 只抬 1px) ── */
.hm-on .panel,
.hm-on .hw-kpi,
.hm-on .kpi,
.hm-on .strat-card{
  transition:transform .22s cubic-bezier(.22,1,.36,1),
    border-color .22s ease, box-shadow .22s ease;
}
.hm-on .panel:hover,
.hm-on .hw-kpi:hover,
.hm-on .kpi:hover,
.hm-on .strat-card:hover{
  transform:translate3d(0,-1px,0);
  border-color:rgba(77,124,254,.26);
  box-shadow:0 8px 26px -16px rgba(77,124,254,.55), 0 0 0 1px rgba(77,124,254,.06)}

/* ── 12. 按钮: 流光边 + 微抬 (Uiverse) ── */
.hm-on .toolbar button,
.hm-on .btn-ctl,
.hm-on .tab-btn,
.hm-on .sb-toggle{
  transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease,
    border-color .18s ease, background .18s ease;
}
.hm-on .toolbar button:hover,
.hm-on .btn-ctl:hover,
.hm-on .tab-btn:hover,
.hm-on .sb-toggle:hover{transform:translate3d(0,-1px,0)}

/* ── 13. 无障碍 / 省电: 尊重系统偏好 (保留静态, 不丢内容) ── */
@media (prefers-reduced-motion: reduce){
  .hm-on .hm-rise,
  .hm-on .hm-focus,
  .hm-on .hm-row,
  .hm-on .hm-num,
  .hm-on .hm-sweep::after,
  .hm-on .tab-page.active.hm-page{animation:none!important;opacity:1!important;
    transform:none!important;filter:none!important}
  .hm-on .hm-pulse{animation:none!important}
}

/* ── 15. 探测点: 供 JS 读真实 reduced-motion 偏好 (不受 hw-app-37 的 JS 补丁影响) ── */
@keyframes hmProbe{from{opacity:0}to{opacity:1}}
.hm-probe{animation:hmProbe 1ms linear;position:absolute;left:-9999px;width:1px;height:1px;pointer-events:none}
@media (prefers-reduced-motion: reduce){ .hm-probe{animation:none} }

/* ── 16. 窄屏: 收敛动效, 避免与触控抢资源 ── */
@media (max-width:900px){
  .hm-on .hm-spot::before{display:none}
  .hm-on .panel:hover,
  .hm-on .hw-kpi:hover,
  .hm-on .kpi:hover,
  .hm-on .strat-card:hover{transform:none}
}