/* =====================================================
   Xynapse · Liquid Glass Effect (v1 · 2026-09-10)
   适配官网暗/亮主题 · 移动端禁用 · prefers-reduced-motion 降级
   设计基线: Apple iOS 26 liquid glass + backdrop-filter saturate
   ===================================================== */

/* -------- 主题绑定 (覆盖 :root 与 [data-theme="light"]) -------- */
:root {
  --lg-blur: 16px;
  --lg-saturate: 180%;
  --lg-tint: rgba(255, 255, 255, 0.06);
  --lg-edge: rgba(255, 255, 255, 0.22);
  --lg-edge-hi: rgba(0, 240, 255, 0.55);
  --lg-specular: rgba(255, 255, 255, 0.32);
  --lg-displace: 2.5;          /* SVG displacement scale (0-10) */
  --lg-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --lg-inner: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
:root[data-theme="light"] {
  --lg-blur: 18px;
  --lg-saturate: 160%;
  --lg-tint: rgba(255, 255, 255, 0.42);
  --lg-edge: rgba(8, 145, 178, 0.22);
  --lg-edge-hi: rgba(8, 145, 178, 0.5);
  --lg-specular: rgba(255, 255, 255, 0.5);
  --lg-shadow: 0 6px 24px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --lg-inner: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* -------- 共享属性 (subtle 预设) -------- */
html.lg-ready .glass,
html.lg-ready .liquid-glass {
  position: relative;
  isolation: isolate;
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  box-shadow: var(--lg-shadow), var(--lg-inner);
  border-color: var(--lg-edge) !important;
  overflow: hidden;
}

/* 折射层: 用 SVG feDisplacementMap 模拟玻璃扭曲 */
html.lg-ready .glass::before,
html.lg-ready .liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--lg-tint);
  filter: url(#lg-displacement);
  pointer-events: none;
  border-radius: inherit;
}

/* 高光层: 顶部 specular sheen, 跟随 hover 微微流动 */
html.lg-ready .glass::after,
html.lg-ready .liquid-glass::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    var(--lg-specular) 0%,
    transparent 60%
  );
  opacity: 0.55;
  pointer-events: none;
  border-radius: inherit;
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* hover: 强化高光 + 边缘变 cyan */
html.lg-ready .glass:hover,
html.lg-ready .liquid-glass:hover {
  border-color: var(--lg-edge-hi) !important;
  background: transparent !important;
}
html.lg-ready .glass:hover::after,
html.lg-ready .liquid-glass:hover::after {
  opacity: 0.85;
  transform: translateY(-2px);
}

/* -------- 预设变体 -------- */
/* 默认: subtle (所有现有 .glass 自动获得此预设) */
html.lg-ready .glass {
  --lg-blur: 12px;
  --lg-saturate: 150%;
  --lg-tint: transparent;
  --lg-displace: 1.5;
}

/* vivid: 强效果 (用于 hero CTA 周边 / 重点强调卡片, 需主动加 .liquid-glass--vivid) */
html.lg-ready .liquid-glass--vivid {
  --lg-blur: 22px;
  --lg-saturate: 220%;
  --lg-displace: 4;
  --lg-specular: rgba(0, 240, 255, 0.18);
}
:root[data-theme="light"] html.lg-ready .liquid-glass--vivid {
  --lg-specular: rgba(8, 145, 178, 0.16);
}

/* -------- 降级路径 -------- */
/* 1. 浏览器不支持 backdrop-filter → 不启用液体玻璃 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.lg-ready .glass::before,
  html.lg-ready .glass::after,
  html.lg-ready .liquid-glass::before,
  html.lg-ready .liquid-glass::after { display: none; }
  html.lg-ready .glass,
  html.lg-ready .liquid-glass { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* 2. 用户偏好减少动效 → 关闭位移 + 高光过渡 */
@media (prefers-reduced-motion: reduce) {
  html.lg-ready .glass::before,
  html.lg-ready .liquid-glass::before { filter: none; }
  html.lg-ready .glass::after,
  html.lg-ready .liquid-glass::after { transition: none; }
  html.lg-ready .glass,
  html.lg-ready .liquid-glass { transition: none; }
}

/* 3. 移动端 (触控 + 性能): 关闭液体玻璃, 退到普通 .glass */
@media (max-width: 768px) {
  html.lg-ready .glass::before,
  html.lg-ready .glass::after,
  html.lg-ready .liquid-glass::before,
  html.lg-ready .liquid-glass::after { display: none !important; }
  html.lg-ready .glass,
  html.lg-ready .liquid-glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* 4. 低性能设备 hint (CPU 核心少 + 内存小): 用 prefers-reduced-data 启发 */
@media (prefers-reduced-data: reduce) {
  html.lg-ready .glass::before,
  html.lg-ready .liquid-glass::before { display: none; }
}