/* ============================================================
 *  鼠标视差纵深效果（纯新增文件，不改动 index.html / style.css 中
 *  任何已有组件的参数，例如毛玻璃 backdrop-filter 透明度、卡片底色等）
 *
 *  原理：
 *   - 背景照片(.bg-photo)    随鼠标「反向 + 较大」位移 → 看起来在「退后」
 *   - 前景内容(.profile/.dashboard) 随鼠标「同向 + 极小」位移 → 制造纵深
 *   - 位移量由 JS 写入的 CSS 变量驱动，本文件只负责「读变量 + 做变换」
 * ============================================================ */

/* 背景照片：放大 1.08 仅为视差平移预留余量（避免平移时露出边缘），
   不改动原有的 position / inset / background 等任何属性；位移用变量驱动 */
.bg-photo {
  transform: translate3d(var(--px-bg, 0px), var(--py-bg, 0px), 0) scale(1.08);
  will-change: transform;
}

/* 前景内容（左侧个人简介 + 右侧仪表盘）：与背景反向的细微位移，
   营造「前景不动、背景退后」的纵深错觉。仅新增 transform，不影响卡片本身 */
.profile,
.dashboard {
  transform: translate3d(var(--px-fg, 0px), var(--py-fg, 0px), 0);
  will-change: transform;
}

/* 尊重系统「减少动态效果」偏好：彻底关闭视差，回到原始静态布局 */
@media (prefers-reduced-motion: reduce) {
  .bg-photo,
  .profile,
  .dashboard {
    transform: none !important;
  }
}