/* ===========================================================
 * Liquid Glass — iOS 26 风格液态玻璃设计系统
 * 与 assets/js/liquid-glass.js 配合使用。
 * 真正的液态玻璃 = 通透玻璃(轻微模糊+低饱和提亮)
 *                 + 边缘折射层(.lg-surface, backdrop-filter:url 位移)
 *                 + 边缘高光 rim(镜面反射厚度感)
 *                 + 指针光晕(lg-active)
 * =========================================================== */

/* 玻璃基元:任何 .glass / .liquid-glass 都会具备通透玻璃质感 */
.glass,
.liquid-glass,
.glass-refract {
  position: relative;
  background: var(--glass-fill, rgba(255, 255, 255, 0.10));
  border-radius: var(--glass-radius, 22px);
  /* 轻微穿透模糊 + 低饱和提亮,模拟玻璃而非毛玻璃 */
  backdrop-filter: blur(14px) saturate(150%) brightness(1.06);
  -webkit-backdrop-filter: blur(14px) saturate(150%) brightness(1.06);
  border: 0.5px solid var(--glass-border, rgba(255, 255, 255, 0.28));
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  isolation: isolate;
}

/* ---- 边缘折射层:承载 SVG 位移贴图的 backdrop-filter ---- */
.lg-surface {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  /* 关键:用 SVG 位移贴图让背景在边缘发生折射弯曲 */
  backdrop-filter: var(--lg-url) saturate(160%) brightness(1.05);
  -webkit-backdrop-filter: var(--lg-url) saturate(160%) brightness(1.05);
  /* 极淡的提亮层,避免 screen 混合把背景颜色放大成五颜六色 */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.01)
  );
  mix-blend-mode: normal;
  opacity: 0.7;
  transition: opacity 0.4s ease;
}

/* ---- 边缘高光 rim:模拟玻璃镜面反射的厚度 ---- */
.glass::after,
.liquid-glass::after,
.glass-refract::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.0) 28%,
    rgba(255, 255, 255, 0.0) 72%,
    rgba(255, 255, 255, 0.35) 100%
  );
  /* 用 mask 只显示 1px 边缘 */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.7;
  transition: opacity 0.35s ease;
}

/* 顶部再补一道镜面高光(玻璃上沿反射) */
.glass::before,
.liquid-glass::before,
.glass-refract::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 1px;
  height: 38%;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0.0)
  );
  opacity: 0.55;
  filter: blur(2px);
  z-index: 0;
}

/* ---- 指针光晕:鼠标移动时玻璃内部的反光 ---- */
.glass .lg-light,
.liquid-glass .lg-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    160px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.30),
    rgba(255, 255, 255, 0.0) 60%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.glass.lg-active .lg-light,
.liquid-glass.lg-active .lg-light {
  opacity: 1;
}

/* 激活时增强折射层与 rim 亮度 */
.glass.lg-active .lg-surface,
.liquid-glass.lg-active .lg-surface {
  opacity: 1;
}
.glass.lg-active::after,
.liquid-glass.lg-active::after {
  opacity: 1;
}

/* ---- 按钮级玻璃(更小、更锐利) ---- */
.btn.glass,
button.glass,
a.glass {
  border-radius: 14px;
  overflow: hidden;
}
.btn.glass::after,
button.glass::after {
  opacity: 0.6;
}

/* ---- 卡片级玻璃 ---- */
.card.glass,
.card.liquid-glass {
  --glass-radius: 20px;
}

/* ---- 头部导航玻璃:静态(不跟随指针),但保留边缘折射 ---- */
.site-header.glass-refract {
  --glass-radius: 0 0 24px 24px;
  background: var(--glass-fill, rgba(255, 255, 255, 0.08));
  /* 覆盖 style.css 中 .site-header 的旧背景与模糊,改由 .lg-surface 折射承载 */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.22);
}

/* 暗色背景下强化通透感 */
body.dark .glass,
body.dark .liquid-glass,
body.dark .glass-refract {
  --glass-fill: rgba(20, 22, 30, 0.35);
  --glass-border: rgba(255, 255, 255, 0.16);
}

/* 尊重用户的减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .lg-surface { opacity: 0.7 !important; }
  .glass .lg-light { display: none; }
}