/* ============================================
 * glass.css —— 液态玻璃
 * ============================================
 *
 * 性能红线（见 docs/06 第 6.3 节）：
 *   - 一屏不超过 6 个真玻璃元素
 *   - 不要嵌套玻璃（会导致两次全屏采样，代价平方级增长）
 *   - 数量多的内容卡片用 .glass-fake（视觉近似，零性能成本）
 *   - 只在固定定位的少量元素上用 .liquid-glass
 * ============================================ */

/* ------------------------------------------------ 真玻璃 */

.liquid-glass {
  position: relative;
  overflow: hidden;

  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);

  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);

  box-shadow:
    0 8px 32px rgb(var(--primary-rgb) / 0.15),
    inset 0 1px 0 var(--glass-highlight);
}

/* 后台关掉玻璃时的降级：保留圆角与阴影，去掉采样 */
body.no-glass .liquid-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 20px rgb(var(--primary-rgb) / 0.12);
}

body.theme-dark.no-glass .liquid-glass {
  background: rgba(30, 30, 50, 0.94);
}

/* ------------------------------------------------ 静态玻璃
 *
 * 视觉上几乎与真玻璃无异（尤其在渐变/图片背景上），
 * 但完全不触发 backdrop-filter 的全屏采样。
 * 内容卡片一律用这个。
 */

.glass-fake {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.35) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgb(var(--primary-rgb) / 0.12);
}

body.theme-dark .glass-fake {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
  border-color: rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------ 光标追踪高光
 *
 * 由 main.js 写入 --mx / --my。只在 hover 时可见。
 * 移动端不会触发（没有 hover）。
 */

.liquid-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    300px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.25),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 300ms var(--ease-smooth);
  pointer-events: none;   /* 关键：否则会挡住玻璃内所有可点击元素 */
}

.liquid-glass:hover::after {
  opacity: 1;
}

/* 后台关了光标追踪，或用户要求减少动效时，彻底不启用 */
body.no-tracking .liquid-glass::after {
  display: none;
}

/* ------------------------------------------------ 移动端降级 */

@media (max-width: 768px) {
  /* 移动端 GPU 较弱，backdrop-filter 会明显掉帧。
     改为高不透明度纯色，视觉损失远小于性能收益。 */
  .liquid-glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.92);
  }

  body.theme-dark .liquid-glass {
    background: rgba(30, 30, 50, 0.94);
  }

  .liquid-glass::after {
    display: none;
  }
}

/* ------------------------------------------------ 折射扭曲（可选）
 *
 * ⚠️ SVG feTurbulence 是逐像素计算，是全站最贵的效果。
 *    建议只在首页 Hero 标题面板上开一处，其余全部关闭。
 *    见 docs/06 第 6.6 节。
 *
 * 使用前提：页面里存在 <svg><filter id="glass-refraction">...</filter></svg>
 */

.glass-refraction {
  filter: url(#glass-refraction);
}