/* ============================================================
 * Longlight - 长光雨滴小站 | 公共控件 — 全站点击信号脉冲
 * components/click-fx.css
 * 职责：鼠标点击处绽放的「数码信号爆点」点缀层——方框信号环（45° 离散翻转）+
 *       HUD 四角定位标 + hex 字符迸散 + 数据方点 + 数据核闪；由 shared/clickFx.js
 *       在点击处注入一次性节点，动画结束后整层移除，不承载任何信息
 * 用法：<link rel="stylesheet" href="assets/css/components/click-fx.css">
 *      （由页面入口 main.js 统一注册行为，页面无需接线）
 * 视觉：极客数码风——全部走「方形 / 离散 steps / 字符」语言（与 home/pixel、
 *       overload 的方框信号环与 hex 字符同源），拒绝圆形涟漪的传统质感；
 *       空气投影（纯光投影）——半透明自发光线框 + 低对比度光晕 + 背景穿透，
 *       无实体厚度、无阴影投影；整体低透明度，只作点缀不抓眼
 * 分层：固定层置于 z-index:9（高于 home 点火层 8 与悬浮播放器 7，短暂盖顶即散）
 * 依赖：tokens.css（颜色一律引用令牌）；减少动态偏好下由 JS 不注入（见 clickFx.js）
 * ============================================================ */

.click-fx {
  position: fixed;
  z-index: 9;
  width: 0;
  height: 0;
  pointer-events: none;
  font-family: var(--font-mono);
}

/* --- 数据核：中心亮块一闪即灭（steps 离散闪烁，读作信号触点） --- */
.click-fx-core {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  background: var(--focus);
  opacity: 0;
  animation: click-fx-core 220ms steps(2, end) forwards;
}

/* --- 方框信号环：方形线框扩散，同时以 8 级离散步进翻转 45°（数码取景框） --- */
.click-fx-frame {
  position: absolute;
  left: -32px;
  top: -32px;
  width: 64px;
  height: 64px;
  border: 1px solid color-mix(in srgb, var(--focus) 48%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--focus) 14%, transparent),
              inset 0 0 8px color-mix(in srgb, var(--focus) 8%, transparent);
  opacity: 0;
  animation: click-fx-frame 660ms steps(8, end) forwards;
}

/* --- HUD 四角定位标：四段 L 形角标向四角撑开一档即散 --- */
.click-fx-corner {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 0 solid color-mix(in srgb, var(--focus) 62%, transparent);
  opacity: 0;
  animation: click-fx-corner 560ms var(--ease-out, cubic-bezier(.2, .8, .2, 1)) forwards;
}

.click-fx-corner--tl { left: -9px;  top: -9px;  border-left-width: 1px; border-top-width: 1px;    --fx-dx: -12px; --fx-dy: -12px; }
.click-fx-corner--tr { left: 1px;   top: -9px;  border-right-width: 1px; border-top-width: 1px;   --fx-dx: 12px;  --fx-dy: -12px; }
.click-fx-corner--bl { left: -9px;  top: 1px;   border-left-width: 1px; border-bottom-width: 1px; --fx-dx: -12px; --fx-dy: 12px; }
.click-fx-corner--br { left: 1px;   top: 1px;   border-right-width: 1px; border-bottom-width: 1px;--fx-dx: 12px;  --fx-dy: 12px; }

/* --- hex 字符迸散：随机字符向随机方向漂散（位移由 JS 按点注入 CSS 变量） --- */
.click-fx-glyph {
  position: absolute;
  left: -5px;
  top: -8px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  color: color-mix(in srgb, var(--green-500) 78%, var(--text-primary));
  opacity: 0;
  animation: click-fx-glyph 640ms var(--ease-out, cubic-bezier(.2, .8, .2, 1)) forwards;
}

/* --- 数据方点：随机方向的 3px 方点溅射（弱粒子噪点，低透明度） --- */
.click-fx-bit {
  position: absolute;
  left: -1.5px;
  top: -1.5px;
  width: 3px;
  height: 3px;
  background: color-mix(in srgb, var(--green-500) 62%, transparent);
  opacity: 0;
  animation: click-fx-bit 520ms var(--ease-out, cubic-bezier(.2, .8, .2, 1)) forwards;
}

/* --- 动画帧：离散 steps 承载数字质感，字符与方点平滑漂散 --- */
@keyframes click-fx-core {
  0%   { opacity: .9;  transform: scale(1); }
  100% { opacity: 0;   transform: scale(2.2); }
}

@keyframes click-fx-frame {
  0%   { opacity: .55; transform: scale(.14) rotate(0deg); }
  100% { opacity: 0;   transform: scale(1) rotate(45deg); }
}

@keyframes click-fx-corner {
  0%   { opacity: .65; transform: translate(0, 0); }
  100% { opacity: 0;   transform: translate(var(--fx-dx), var(--fx-dy)); }
}

@keyframes click-fx-glyph {
  0%   { opacity: 0;   transform: translate(0, 0) scale(.7); }
  10%  { opacity: .8; }
  45%  { opacity: .5; }
  100% { opacity: 0;   transform: translate(var(--fx-dx), var(--fx-dy)) scale(1); }
}

@keyframes click-fx-bit {
  0%   { opacity: .5;  transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0;   transform: translate(var(--fx-dx), var(--fx-dy)) rotate(45deg); }
}

/* 亮色主题：光晕再压一档，保持「不抓眼」的点缀定位（同 holo 噪点的亮色策略） */
[data-theme="light"] .click-fx-frame {
  box-shadow: 0 0 10px color-mix(in srgb, var(--focus) 10%, transparent),
              inset 0 0 6px color-mix(in srgb, var(--focus) 6%, transparent);
}