/* ==========================================================================
   fx-glow.css — 通用卡片鼠标光影特效（v11 配色版本）

   独立可复用：news-list.html / component_solutions.html 等任意模板都可 enqueue。
   不绑定具体卡片类名 —— 只要给任意容器加 .fx-glow 类，就自动获得以下三层：
     1. 鼠标移动时卡片内出现跟随的蓝色 radial spotlight
     2. 边框蓝光叠加（mask 切到 border 环）
     3. halo 柔光层（卡片边缘的 blur 软光，JS 注入 .fx-glow-halo）
   可选：在图片容器上加 .fx-glow-media 类，图片区也会跟随 cursor 出现蓝色 tint。

   数据属性（可选，覆盖默认值）：
     data-base="208"     hue，与 head-base.css 的 --brand (#137FEC) 一致
     data-spread="30"    鼠标 X 方向位移带来的 hue 偏移幅度（30 收紧在蓝族内；
                         默认 120 在视口右端会偏移到粉红，已收紧）
     data-size="180"     spotlight 直径
     data-border="1"     边框厚度（与卡片原 1px 边对齐，叠加而非替代）

   强度旋钮（默认值已搬入 :root，方便整站统一调亮 / 调暗）：
     --fx-glow-bg        卡片内部蓝色 tint
     --fx-glow-border    边框蓝色描边
     --fx-glow-light     内白光落点亮度
     --fx-glow-halo      外圈柔光强度
     --fx-glow-img       图片区蓝色 tint
   ========================================================================== */

:root {
  /* v11 中位偏深：saturation 88%, lightness 62%, alpha 各值比 v10 抬 25% */
  --fx-glow-bg:        0.09;
  --fx-glow-border:    0.50;
  --fx-glow-light:     0.35;
  --fx-glow-halo:      0.25;
  --fx-glow-img:       0.13;
}

.fx-glow {
  position: relative;
  background-image: radial-gradient(
    var(--spotlight-size, 180px) var(--spotlight-size, 180px) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(calc(var(--base, 208) + (var(--xp, 0) * var(--spread, 0))) 88% 62% / var(--fx-glow-bg, 0.09)),
    transparent
  );
  background-size: calc(100% + (2 * var(--border-size, 1px))) calc(100% + (2 * var(--border-size, 1px)));
  background-position: 50% 50%;
  background-attachment: scroll;
  touch-action: none;
}

/* 边框蓝光：蓝色描边叠加在卡片原灰边之上，mask 限制只渲染在 border 区
   88% saturation + 56% lightness 让蓝光像光雾不是染料 */
.fx-glow::before {
  content: "";
  position: absolute;
  inset: calc(var(--border-size, 1px) * -1);
  border: var(--border-size, 1px) solid transparent;
  border-radius: inherit;
  pointer-events: none;
  background-image: radial-gradient(
    calc(var(--spotlight-size, 180px) * 0.75) calc(var(--spotlight-size, 180px) * 0.75) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(calc(var(--base, 208) + (var(--xp, 0) * var(--spread, 0))) 88% 56% / var(--fx-glow-border, 0.50)),
    transparent 100%
  );
  background-attachment: scroll;
  background-size: calc(100% + (2 * var(--border-size, 1px))) calc(100% + (2 * var(--border-size, 1px)));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
          mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
          mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  filter: brightness(1.3);
  z-index: 0;
}

/* 内白光落点：cursor 落点跟随的白光峰值 */
.fx-glow::after {
  content: "";
  position: absolute;
  inset: calc(var(--border-size, 1px) * -1);
  border: var(--border-size, 1px) solid transparent;
  border-radius: inherit;
  pointer-events: none;
  background-image: radial-gradient(
    calc(var(--spotlight-size, 180px) * 0.5) calc(var(--spotlight-size, 180px) * 0.5) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(0 100% 100% / var(--fx-glow-light, 0.35)),
    transparent 100%
  );
  background-attachment: scroll;
  background-size: calc(100% + (2 * var(--border-size, 1px))) calc(100% + (2 * var(--border-size, 1px)));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
          mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
          mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  z-index: 0;
}

/* 外圈柔光 halo：作为 .fx-glow 首个子元素（JS 注入），filter:blur 让卡片边缘自带软光。
   父级 overflow:hidden → halo 视觉范围被裁到卡片内部，呈现"卡片自带柔光边缘" */
.fx-glow > .fx-glow-halo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--fx-glow-halo, 0.25);
  filter: blur(8px);
  background-image: radial-gradient(
    var(--spotlight-size, 180px) var(--spotlight-size, 180px) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(calc(var(--base, 208) + (var(--xp, 0) * var(--spread, 0))) 88% 62% / var(--fx-glow-halo, 0.25)),
    transparent
  );
  background-attachment: scroll;
  background-size: 100% 100%;
  background-position: 50% 50%;
}

/* halo 之后的兄弟也压上来（防 ::before/::after 抢层遮挡文字/图片） */
.fx-glow > .fx-glow-halo ~ * { position: relative; z-index: 1; }

/* 图片区也吃光：在 .fx-glow-media 上叠一层蓝色 tint，跟随 cursor。
   z-index:1 压在 SVG 兜底图之上但在 <a> 内仍可点击；与卡片本体共用同一套
   --x/--y/--base/--spread，所以 cursor 同位置同色相，视觉上是一束光
   从 cursor 落点同时照亮文字区和图片区，而不是两个独立光斑。
   注意：.fx-glow-media 容器本身必须 position: relative（图片 hover 等常见布局已经
   自带；用 Tailwind 时记得加 `relative`） */
.fx-glow .fx-glow-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    var(--spotlight-size, 180px) var(--spotlight-size, 180px) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(calc(var(--base, 208) + (var(--xp, 0) * var(--spread, 0))) 88% 62% / var(--fx-glow-img, 0.13)),
    transparent
  );
  background-size: calc(100% + (2 * var(--border-size, 1px))) calc(100% + (2 * var(--border-size, 1px)));
  background-position: 50% 50%;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   (v13 移除：hover 玻璃光感白光 sheen 旋转 —— 用户不要"白色动态线条"特效。
   保留鼠标 spotlight + 边框蓝光 + halo 柔光 + 图片区蓝光四层。)
   -------------------------------------------------------------------------- */