/* =========================================================
   BorderGlow — 移植自 React Bits（原生 JS/CSS 变体）
   全站作用于所有 .card：跟随光标，在靠近边缘时增强辉光。
   三层结构（edge 外发光 / fill 内部柔光 / border 边缘环形
   高光）由 JS 注入 <span> 承载，避免与 .card::before 静态
   高光争用伪元素。暗色默认白光；亮色切换为柔和紫/蓝辉光，
   避免白光在浅色卡片上不可见或过曝。
   ========================================================= */
.border-glow {
  position: relative;
  isolation: isolate;
  transition: background-color 0.2s ease;
}

.border-glow .bg-fill,
.border-glow .bg-edge,
.border-glow .bg-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--edge-proximity, 0);
  transition: opacity 0.25s ease;
}

/* 内部柔光：跟随光标的径向亮斑，轻微提亮内容 */
.border-glow .bg-fill {
  background: radial-gradient(
    var(--glow-size, 150px) var(--glow-size, 150px) at var(--x, 50%) var(--y, 50%),
    rgba(255, 255, 255, 0.12),
    transparent 100%
  );
  z-index: 1;
}

/* 外发光：模糊辉光，screen 混合制造边缘光晕 */
.border-glow .bg-edge {
  background: radial-gradient(
    calc(var(--glow-size, 150px) * 0.9) calc(var(--glow-size, 150px) * 0.9) at var(--x, 50%) var(--y, 50%),
    rgba(255, 255, 255, 0.45),
    transparent 100%
  );
  filter: blur(22px);
  z-index: 0;
  mix-blend-mode: screen;
}

/* 边缘描边辉光：用 mask 掏空内部，只留跟随光标的环形高光 */
.border-glow .bg-border {
  padding: var(--border-width, 1.5px);
  background: radial-gradient(
    var(--glow-size, 150px) var(--glow-size, 150px) at var(--x, 50%) var(--y, 50%),
    rgba(255, 255, 255, 0.9),
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: 2;
}

/* =========================================================
   亮色主题适配：白光在浅色卡片上会不可见/过曝，
   改为柔和的紫(#7C5CFF)/蓝(#557CFF)辉光，并整体降低强度。
   ========================================================= */
html[data-theme="light"] .border-glow .bg-fill {
  background: radial-gradient(
    var(--glow-size, 150px) var(--glow-size, 150px) at var(--x, 50%) var(--y, 50%),
    rgba(124, 92, 255, 0.14),
    transparent 100%
  );
}

html[data-theme="light"] .border-glow .bg-edge {
  background: radial-gradient(
    calc(var(--glow-size, 150px) * 0.9) calc(var(--glow-size, 150px) * 0.9) at var(--x, 50%) var(--y, 50%),
    rgba(124, 92, 255, 0.32),
    transparent 100%
  );
  filter: blur(20px);
  mix-blend-mode: normal;
}

html[data-theme="light"] .border-glow .bg-border {
  background: radial-gradient(
    var(--glow-size, 150px) var(--glow-size, 150px) at var(--x, 50%) var(--y, 50%),
    rgba(85, 124, 255, 0.75),
    transparent 100%
  );
}

/* 尊重减少动态偏好 */
@media (prefers-reduced-motion: reduce) {
  .border-glow .bg-fill,
  .border-glow .bg-edge,
  .border-glow .bg-border {
    transition: none;
  }
}