/* ==========================================================================
   enhancements.css · 视觉增强层（设计文档 v1.0 · 第一阶段）
   --------------------------------------------------------------------------
   独立覆盖层：只做增量覆盖，不改原有工具逻辑与基础样式，删掉引用即可还原。

   与文档原文的三处偏差，均为适配当前仓库现状、避免视觉/交互回退：
     1. 工具卡片光晕排除 .card--spot
        .card--spot 已在 components.css 用 ::after 实现跟随高光（坐标由 main.js 写入），
        若再叠加 .fx-glow 会出现双层光晕。对应文档 §5.1「个别卡片禁用光晕」的退路。
     2. #toolkit .card 的 transition 追加 background-color
        原 .card 会过渡背景色，只写 transform/box-shadow/border-color 会让
        .card--interactive:hover 的背景色变化瞬间跳变。
     3. .hero__actions .btn--primary 与 .nav__link 的 transition 保留原有属性
        否则会覆盖 .btn--primary 的 background-position 渐变位移、
        .nav__link 的 background-color 过渡。
   ========================================================================== */

/* ---------- 顶栏滚动后的玻璃效果 ----------
   22px 的模糊半径在滚动时开销偏高，收到 16px 并去掉 saturate 的二次色彩运算，
   观感差别很小。 */
.site-header.is-stuck {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ---------- Hero 渐变标题柔和光晕 ---------- */
.hero__title .text-gradient {
  filter: drop-shadow(0 0 25px rgba(109, 94, 252, 0.28));
}

/* ---------- Hero 主按钮过渡 ---------- */
.hero__actions .btn--primary {
  box-shadow: 0 8px 28px rgba(109, 94, 252, 0.22);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background-position var(--dur-slow) var(--ease-out);
}

/* ---------- 工具卡片过渡 ---------- */
#toolkit .card {
  position: relative;
  isolation: isolate;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}

/* 鼠标位置局部光晕；坐标 --mx / --my 由 enhancements.js 写入 */
#toolkit .card:not(.card--spot).fx-glow {
  background-image: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 50%),
    rgba(109, 94, 252, 0.1),
    transparent 65%
  );
}

.nav__link {
  transition:
    color 0.2s ease,
    transform 0.2s ease,
    background-color 0.2s ease;
}

/* ---------- 避免触屏误触发 hover 动画 ---------- */
@media (hover: hover) {
  .hero__actions .btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 38px rgba(109, 94, 252, 0.4);
  }

  #toolkit .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 38px rgba(50, 45, 120, 0.15);
    border-color: rgba(109, 94, 252, 0.45);
  }

  .nav__link:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header.is-stuck {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-elev);
  }
}

/* ---------- 减少动态效果：保持静态的视觉风格 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__actions .btn--primary,
  #toolkit .card,
  .nav__link {
    transition: none;
  }

  .hero__actions .btn--primary:hover,
  #toolkit .card:hover,
  .nav__link:hover {
    transform: none;
  }

  .hero__title .text-gradient {
    filter: none;
  }
}