/* ============================================================================
   glass.css — V2.0 Glass Design System
   ----------------------------------------------------------------------------
   一个玻璃物体由 4 层组成（全部由 js/core/glass.js 自动注入，无需手写 DOM）：

     .glass              玻璃本体：半透明底 + backdrop-blur + 细边缘 + 投影
       .glass__sheen     内部动态光：随鼠标位置变化的冰蓝渐变（在内容之下）
       .glass__ring      局部边缘光：鼠标靠近哪一侧，哪一侧被照亮
       .glass__ripple    按压能量波：从点击位置向外扩散

   空间层级通过 data-glass="1|2|3" 切换令牌（01 导航/主按钮，02 卡片/面板，03 标签/提示）。
   所有几何变化只写 CSS 变量（--gx/--gy 鼠标局部坐标、--grx/--gry 倾斜、
   --gty/--gs 位移与缩放），由 CSS 过渡完成，JS 不逐帧改 transform。
   ========================================================================= */

/* ---------------------------------------------------------------------------
   注册可插值的自定义属性 —— 让「光照位置 / 倾斜 / 浮起」这些几何变化
   由 CSS 自己平滑，JS 只在鼠标移动时写一次目标值，不逐帧改 transform。
   --gx/--gy 需要被 .glass 的子层（sheen / ring）继承，因此 inherits: true。
   ------------------------------------------------------------------------- */
@property --gx {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}

@property --gy {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}

@property --grx {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --gry {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --gty {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --gs {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

.glass {
  position: relative;
  isolation: isolate;
  border-radius: var(--glass-radius);
  /* 双层背景：底色暗调（保证亮部素材上文字可读）+ 表面高光渐变
     真实磨砂玻璃压在明亮场景上也会整体压暗一点，这正是它看起来「有厚度」的原因 */
  background-color: var(--glass-tint, rgba(6, 14, 26, 0.3));
  background-image: var(--glass-bg, var(--glass3-bg));
  border: 1px solid var(--glass-border, var(--glass3-border));
  box-shadow: var(--glass-shadow, var(--glass3-shadow));
  -webkit-backdrop-filter: blur(var(--glass-blur, var(--glass3-blur)))
    saturate(1.4);
  backdrop-filter: blur(var(--glass-blur, var(--glass3-blur))) saturate(1.4);
  transform: translate3d(0, var(--gty, 0px), 0) perspective(900px)
    rotateX(var(--grx, 0deg)) rotateY(var(--gry, 0deg)) scale(var(--gs, 1));
  transition: --gx 0.3s var(--e-out), --gy 0.3s var(--e-out),
    --grx 0.42s var(--e-out), --gry 0.42s var(--e-out),
    --gty 0.62s var(--e-out), --gs 0.62s var(--e-out),
    box-shadow 0.5s var(--e-out), border-color 0.5s var(--e-out),
    background-color 0.5s var(--e-out);
}

/* 玻璃内部 —— 只作为光，不遮挡内容 */
.glass__sheen,
.glass__ring,
.glass__ripple {
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.glass__sheen {
  inset: 0;
  z-index: -1;
  opacity: 0;
  transform-origin: 50% 50%;
  transition: opacity 0.5s var(--e-out), transform 0.22s var(--e-out);
  background: radial-gradient(
    58% 62% at calc(var(--gx, 0.5) * 100%) calc(var(--gy, 0.5) * 100%),
    rgb(var(--glass-blue) / 0.24) 0%,
    rgb(var(--glass-blue-deep) / 0.085) 42%,
    transparent 74%
  );
}

.glass__ring {
  inset: 0;
  padding: 1px;
  opacity: 0;
  transition: opacity 0.45s var(--e-out);
  background: radial-gradient(
    190px 190px at calc(var(--gx, 0.5) * 100%) calc(var(--gy, 0.5) * 100%),
    var(--glass-highlight, var(--glass3-highlight)),
    rgb(var(--glass-blue-deep) / 0.48) 40%,
    transparent 74%
  );
  -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;
}

.glass__ripple {
  left: 0;
  top: 0;
  z-index: -1;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  opacity: 0;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.85) 0%,
    rgb(var(--glass-blue) / 0.5) 34%,
    rgb(var(--glass-blue-deep) / 0.16) 58%,
    transparent 72%
  );
}

.glass__ripple.is-run {
  animation: glassRipple 640ms var(--e-out) forwards;
}

@keyframes glassRipple {
  0% {
    opacity: 1;
    transform: translate3d(var(--rx0, 0px), var(--ry0, 0px), 0) scale(0.2);
  }
  62% {
    opacity: 0.52;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--rx0, 0px), var(--ry0, 0px), 0) scale(11);
  }
}

/* ------------------------------------------------------------ 三个层级 */
[data-glass="1"] {
  --glass-bg: var(--glass1-bg);
  --glass-border: var(--glass1-border);
  --glass-blur: var(--glass1-blur);
  --glass-shadow: var(--glass1-shadow);
  --glass-highlight: var(--glass1-highlight);
  --glass-tint: rgba(6, 14, 26, 0.34);
  --glass-press: 0.972;
  --glass-radius: var(--glass-radius-lg);
}

[data-glass="2"] {
  --glass-bg: var(--glass2-bg);
  --glass-border: var(--glass2-border);
  --glass-blur: var(--glass2-blur);
  --glass-shadow: var(--glass2-shadow);
  --glass-highlight: var(--glass2-highlight);
  --glass-tint: rgba(6, 14, 26, 0.3);
  --glass-press: 0.99;
}

[data-glass="3"] {
  --glass-tint: rgba(6, 14, 26, 0.24);
  --glass-press: 0.993;
}

/* -------------------------------------------------- 悬停 / 按压 交互态 */
/* 悬停时缩短过渡时间 —— 倾斜跟随更即时，仍有阻尼感 */
.glass.is-lit {
  transition-duration: 0.14s, 0.14s, 0.24s, 0.24s, 0.42s, 0.42s, 0.5s, 0.5s,
    0.5s;
}

.glass.is-lit .glass__sheen {
  opacity: calc(1 * var(--glass-lit, 1));
}

.glass.is-lit .glass__ring {
  opacity: calc(0.95 * var(--glass-lit, 1));
}

.glass.is-lit {
  border-color: rgb(var(--glass-blue) / 0.3);
}

/* 邻近感应：鼠标还没碰到玻璃，边缘已经先被照亮一点点 */
.glass.is-near:not(.is-lit) .glass__ring {
  opacity: 0.34;
}

.glass.is-near:not(.is-lit) .glass__sheen {
  opacity: 0.42;
}

.glass.is-near:not(.is-lit) {
  border-color: rgb(var(--glass-blue) / 0.16);
}

/* 按压：玻璃被压缩，内部光收缩，能量被压进去 */
.glass.is-pressed {
  --gs: var(--glass-press, 0.98);
  --gty: 2px;
  transition-duration: 0.1s, 0.1s, 0.12s, 0.12s, 0.14s, 0.14s, 0.3s, 0.3s,
    0.3s;
}

.glass.is-pressed .glass__sheen {
  opacity: 1;
  transform: scale(0.9);
}

.glass.is-pressed .glass__ring {
  opacity: 1;
}

/* 纯展示型玻璃（不需要倾斜，例如跟随鼠标浮动的预览卡） */
[data-glass-tilt="0"] {
  -webkit-transform: none;
  transform: none;
}

/* ------------------------------------------------------------- 鼠标光源 */
/* 一个移动的空间光源：范围大、透明度低，不产生明显圆形光斑 */
.mouse-glow {
  position: fixed;
  left: 0;
  top: 0;
  width: 720px;
  height: 720px;
  margin: -360px 0 0 -360px;
  z-index: 55;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s var(--e-out);
  will-change: transform;
  background: radial-gradient(
      circle at 50% 50%,
      rgb(var(--glass-blue) / 0.062) 0%,
      rgb(var(--glass-blue) / 0.04) 26%,
      rgb(var(--glass-blue-deep) / 0.022) 46%,
      transparent 68%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgb(var(--glass-blue-violet) / 0.026) 0%,
      transparent 58%
    );
}

.mouse-glow.is-on {
  opacity: 1;
}

.mouse-glow.is-away {
  opacity: 0;
}

/* ------------------------------------------------------- 玻璃按钮基型 */
.glass-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 13px 20px;
  border-radius: var(--glass-radius-pill);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--t-1);
  white-space: nowrap;
}

.glass-btn svg {
  width: 12px;
  height: 12px;
  stroke: rgb(var(--glass-blue));
  transition: transform 0.4s var(--e-out);
}

.glass-btn:hover svg {
  transform: translate3d(4px, 0, 0);
}

/* 玻璃胶囊标签 */
.glass-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 7px 14px;
  border-radius: var(--glass-radius-pill);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--t-2);
}

.glass-tag i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(var(--glass-blue));
  box-shadow: 0 0 8px 1px rgb(var(--glass-blue) / 0.7);
}

/* 玻璃分区面板 */
.glass-panel {
  border-radius: var(--glass-radius-lg);
  padding: clamp(20px, 2.4vw, 34px);
}

/* ------------------------------------------------------- 兼容与降级 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  /* 不支持背景模糊时提高底不透明度，避免文字压不住背景 */
  [data-glass="1"] {
    --glass-bg: linear-gradient(
      148deg,
      rgba(14, 24, 38, 0.86),
      rgba(8, 16, 28, 0.78)
    );
  }

  [data-glass="2"] {
    --glass-bg: linear-gradient(
      148deg,
      rgba(12, 22, 36, 0.82),
      rgba(8, 15, 26, 0.74)
    );
  }

  [data-glass="3"] {
    --glass-bg: linear-gradient(
      148deg,
      rgba(12, 22, 36, 0.76),
      rgba(8, 15, 26, 0.68)
    );
  }
}

/* 减少透明度偏好（无障碍） */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(9, 17, 29, 0.92);
  }

  .mouse-glow {
    display: none;
  }
}

/* 移动端 / 触摸设备：关闭倾斜与鼠标光，降低模糊半径，保证流畅 */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .glass {
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    backdrop-filter: blur(10px) saturate(1.3);
  }

  [data-glass="1"] {
    --glass-blur: 12px;
  }

  .glass__ring {
    display: none;
  }

  .mouse-glow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass {
    transform: none;
    transition: none;
  }

  .glass__sheen,
  .glass__ring,
  .glass__ripple,
  .mouse-glow {
    display: none;
  }
}