/* ==========================================================
   BorderGlow —— 光边跟随（配合 data/borderglow.js）
   各页 <link rel="stylesheet" href="data/borderglow.css"> 引入。
   样式全部挂在这两个类上，不改按钮本身的 HTML 结构：
     .bg-host  —— 让元素成为光边的「画布」（position + 独立层）
     .bg-on    —— 由 JS 在指针进入时加上，触发淡入
   ========================================================== */

/* ---------- 画布 ---------- */
/* 用 :where() 把特异性压到最低（0,0,0），这样页面上任何 .btn / .card 的
   既有规则都能正常覆盖它 —— 否则这个共享样式表会意外压掉各页自己的样式。 */
:where(.btn, .card, .stack-item, .hstat) {
  position: relative;
  isolation: isolate;          /* 让内部混合模式和光晕不串到外面 */
}

/* ---------- 光晕层 ---------- */
:where(.btn, .card, .stack-item, .hstat)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;                  /* 待在内容下面 */

  /* 径向渐变跟着光标跑。两层叠加：一层大而淡（氛围），一层小而亮（焦点） */
  background:
    radial-gradient(
      160px circle at var(--bg-x, 50%) var(--bg-y, 50%),
      rgba(var(--rgb-1), calc(.30 * var(--bg-edge, 0))),
      transparent 70%
    ),
    radial-gradient(
      60px circle at var(--bg-x, 50%) var(--bg-y, 50%),
      rgba(255, 255, 255, calc(.10 * var(--bg-edge, 0))),
      transparent 70%
    );

  opacity: 0;
  transition: opacity .3s ease;
}

/* ---------- 边框高光 ----------
   用 mask 的「异或」把中间掏空，只留 1px 边框那一圈，
   于是渐变只出现在描边上 —— 这就是「光边」而不是「光块」。 */
:where(.btn, .card, .stack-item, .hstat)::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;

  background: radial-gradient(
    120px circle at var(--bg-x, 50%) var(--bg-y, 50%),
    rgba(255, 255, 255, calc(.55 * var(--bg-edge, 0))),
    rgba(var(--rgb-2), calc(.35 * var(--bg-edge, 0))) 45%,
    transparent 75%
  );

  /* 只保留边框那一圈：整体填充减去内容区 */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;

  opacity: 0;
  transition: opacity .3s ease;
}

.bg-on::after { opacity: 1; }
.bg-on::before { opacity: 1; }

/* ---------- 和站点既有样式的对齐 ---------- */
/* ⚠️ .card 本来就有自己的 ::after（悬停光斑扫过）。
   两者不能同时占 ::after —— 上面这张表用的是「后定义者胜」，
   但各页的 .card::after 是在页面自己的 <style> 里，
   加载顺序上也会覆盖本文件，导致**光边整条失效**。
   处理办法：卡片类只给 ::before（内发光），::after 让给页面原有效果。 */
:where(.card, .stack-item)::after {
  content: none;
  mask: none;
  -webkit-mask: none;
}

/* ---------- 大件（卡片）单独调档 ----------
   卡片面积是按钮的十几倍，如果沿用按钮那套 120px 小亮斑，
   在卡上只会出现一小撮白点，像「脏了一块」而不是「边在发光」。
   所以这里做三件事：
     1. 光斑半径放大到 260px / 90px（覆盖到角落，边才有连续的亮弧）
     2. 卡片不该有「内发光块」——那是按钮的体积感语言，
        卡片的语言是「边线亮起来」，所以 ::before 的背景关掉，
        改成 box-shadow 描边 + 一层跟随的柔光。
     3. 描边用 ring 而不是 inset 单层：inset 只在内侧，
        而卡片本身有 1px 边框，内侧亮起来会被边框挡掉一半。 */
:where(.card, .stack-item)::before {
  background: radial-gradient(
    260px circle at var(--bg-x, 50%) var(--bg-y, 50%),
    rgba(var(--rgb-1), calc(.22 * var(--bg-edge, 0))),
    transparent 72%
  );
}

:where(.card, .stack-item).bg-on::before {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, calc(.34 * var(--bg-edge, 0))),
    0 0 34px -6px rgba(var(--rgb-2), calc(.50 * var(--bg-edge, 0)));
}

/* ---------- 键盘焦点：给一个不看指针也能看见的态 ---------- */
:where(.btn, .card, .stack-item, .hstat):focus-visible {
  outline: 2px solid rgba(var(--rgb-2), .8);
  outline-offset: 2px;
}

/* ---------- 降级 ---------- */
/* JS 没跑 / 触屏 / 关掉了动效：光晕层完全不参与渲染，按钮回到原样 */
@media (hover: none), (prefers-reduced-motion: reduce) {
  :where(.btn, .card, .stack-item, .hstat)::before,
  :where(.btn, .card, .stack-item, .hstat)::after {
    display: none;
  }
}