/* ==========================================================================
   css/mousefx.css — 鼠标动态 UI 样式（创意策划定稿 §8.2，全部装饰性）
   自定义光标 / 卡片聚光灯 / 磁吸按钮 / 轻 tilt 视差。
   仅在 pointer:fine 设备生效（JS 侧同样只在 pointer:fine 初始化，双保险）；
   prefers-reduced-motion: reduce 下整组关闭。
   配色只用现有 ink 炭黑与警示黄 #ffc500，无渐变、无蓝色、无新增色板；
   保留系统原生光标，全程不隐藏指针。
   ========================================================================== */

/* ---------- 自定义光标：小圆点即时跟随 + lerp 缓动跟随环 ---------- */
@media (pointer: fine) {
  .xjfx-cursor-dot,
  .xjfx-cursor-ring {
    position: fixed; left: 0; top: 0; z-index: 9999;
    pointer-events: none; border-radius: 50%;
    opacity: 0; transition: opacity .2s ease, border-radius .2s ease;
    will-change: transform;
  }
  .xjfx-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--ink, #24231f); }
  .xjfx-cursor-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid var(--ink, #24231f); }
  body[data-fx-cursor] .xjfx-cursor-dot { opacity: .9; }
  body[data-fx-cursor] .xjfx-cursor-ring { opacity: .45; }
  /* hover 可点元素时环放大变形（scale 由 JS 写入 transform） */
  .xjfx-cursor-ring.is-hot { border-radius: 28%; opacity: .8; }
  .xjfx-cursor-dot.is-hidden,
  .xjfx-cursor-ring.is-hidden { opacity: 0; }
}

/* ---------- 卡片聚光灯：box-shadow 模糊光斑（警示黄低透明度），伪元素 transform 移动 ---------- */
[data-fx-spotlight] { position: relative; overflow: hidden; }
[data-fx-spotlight]::before {
  content: ''; position: absolute; left: 0; top: 0; z-index: 1;
  width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%;
  box-shadow: 0 0 70px 34px rgba(255, 197, 0, .13);
  transform: translate(var(--xjfx-x, 50vw), var(--xjfx-y, -240px));
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
@media (pointer: fine) {
  [data-fx-spotlight]:hover::before { opacity: 1; }
}
/* overflow:hidden 会裁掉外侧焦点框，聚焦时改画内侧，保住键盘可见焦点 */
[data-fx-spotlight]:focus-visible { outline: 3px solid var(--ink, #24231f); outline-offset: -3px; }

/* ---------- 磁吸按钮 / 轻 tilt 视差：位移由 JS 写 transform，这里只给回弹过渡 ---------- */
@media (pointer: fine) {
  [data-fx-magnet] { transition: transform .18s ease-out; will-change: transform; }
  [data-fx-tilt] { transition: transform .2s ease-out; will-change: transform; transform-style: preserve-3d; }
}

/* ---------- 减少动态：整组关闭（JS 侧同判，双保险） ---------- */
@media (prefers-reduced-motion: reduce) {
  .xjfx-cursor-dot,
  .xjfx-cursor-ring { display: none !important; }
  [data-fx-spotlight]::before { display: none !important; }
  [data-fx-magnet],
  [data-fx-tilt] { transition: none !important; }
}