/* ============================================================
   hover-fx.css — 鼠标悬停视觉增强（独立于 mouse-glow / tilt / GSAP）
   仅作用于 .btn / .card / .tilt 与既有 #mouse-glow，使用站点蓝/青品牌令牌，双主题自适应。
   能力：1) 磁性按钮  2) 点击涟漪  3) 卡片悬停时强化“原有光标圆 #mouse-glow”（嵌入原圆，不新增第二圆）
   ============================================================ */

/* ---------- 1) 磁性按钮：位移由 JS 写入 --mx/--my，仅在该类激活时应用 ---------- */
.btn.fx-magnetic {
  will-change: transform;
}
.btn.fx-magnetic.is-magnetic {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(1.035);
}

/* ---------- 2) 点击涟漪 ---------- */
.fx-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: var(--neon-cyan);
  opacity: .45;
  pointer-events: none;
  z-index: 2;
  animation: fx-ripple-anim .62s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes fx-ripple-anim {
  to { transform: scale(2.6); opacity: 0; }
}

/* ---------- 3) 卡片悬停：强化“原有光标圆” #mouse-glow（嵌入原圆，不新增第二圆） ----------
   悬停卡片时，让站点的原始光标圆变大、变亮并带柔光，反馈通过原圆传达，
   而不是再叠一个圆。#mouse-glow 的其余样式（位置/透明度/居中）维持原文件不变。 */
#mouse-glow {
  transition: opacity .4s ease, width .35s ease, height .35s ease,
              background .4s ease, box-shadow .35s ease;
}
#mouse-glow.glow-card {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(55,120,229,0.14) 0%, rgba(55,120,229,0.06) 45%, transparent 70%);
  box-shadow: 0 0 80px 8px rgba(55,120,229,0.12);
}

/* ---------- 可访问性：尊重 reduce-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn.fx-magnetic.is-magnetic { transform: none; }
  .fx-ripple { animation: none; display: none; }
  #mouse-glow.glow-card {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(55,120,229,0.05) 0%, transparent 70%);
    box-shadow: none;
  }
}