/* ============================================================
   液态玻璃 + 沉浸光感 v2（2026-10-29）
   v2 变化：珠光棱镜描边（随鼠标变角度）、冷白/紫调暗色、光斑淡紫、
            hover 饱和度激活、3D 倾斜过渡类、补齐页脚/文章导航/分页/归档/手机底栏/播放器
   ============================================================ */

/* ---------- 变量 ---------- */
:root {
  --glass-bg: rgba(252, 253, 255, 0.55);
  --glass-bg-navy: rgba(250, 252, 255, 0.66);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-border-dim: rgba(255, 255, 255, 0.32);
  --glass-blur: 16px;
  --glass-saturate: 165%;
  --glass-sat-hover: 190%;
  --glass-shadow: 0 8px 32px rgba(30, 38, 80, 0.10), 0 2px 8px rgba(30, 38, 80, 0.06);
  --glass-shadow-hover: 0 16px 48px rgba(30, 38, 80, 0.18), 0 4px 14px rgba(30, 38, 80, 0.08);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(255, 255, 255, 0.12);
  --glass-light: rgba(255, 255, 255, 0.42);
  --glass-top-glow: rgba(255, 255, 255, 0.24);
  /* 珠光棱镜描边：角度随鼠标变化（--angle 由 glass-light.js 写入） */
  --glass-prism: linear-gradient(
    calc(var(--angle, 135deg)),
    rgba(255, 255, 255, 0.85) 0%,
    rgba(168, 139, 250, 0.38) 18%,
    rgba(103, 232, 249, 0.24) 42%,
    rgba(244, 114, 182, 0.20) 62%,
    rgba(255, 255, 255, 0.30) 100%
  );
}
html[data-theme="dark"] {
  --glass-bg: rgba(28, 27, 40, 0.52);
  --glass-bg-navy: rgba(30, 29, 44, 0.62);
  --glass-border: rgba(255, 255, 255, 0.22);
  --glass-border-dim: rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.38), 0 2px 8px rgba(0, 0, 0, 0.25);
  --glass-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.52), 0 4px 14px rgba(0, 0, 0, 0.30);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  --glass-light: rgba(178, 158, 255, 0.18);
  --glass-top-glow: rgba(167, 139, 250, 0.07);
  --glass-prism: linear-gradient(
    calc(var(--angle, 135deg)),
    rgba(255, 255, 255, 0.32) 0%,
    rgba(168, 139, 250, 0.34) 20%,
    rgba(103, 232, 249, 0.18) 45%,
    rgba(244, 114, 182, 0.16) 65%,
    rgba(255, 255, 255, 0.10) 100%
  );
}

/* ---------- 玻璃卡片基底 ---------- */
body .post-wrap,
body .article-inner,
body .sidebar-wrap,
body .widget-wrap,
body .blog-comments-card {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-dim);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  transition: box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
/* 搜索弹层：保持主题的 fixed 定位，只换玻璃皮肤 */
body .popup {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-dim);
  box-shadow: var(--glass-shadow), var(--glass-inset);
}

body .post-wrap:hover,
body .article-inner:hover,
body .sidebar-wrap:hover,
body .widget-wrap:hover,
body .blog-comments-card:hover {
  box-shadow: var(--glass-shadow-hover), var(--glass-inset);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat-hover));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat-hover));
}

/* ---------- 珠光描边(::before) + 顶部反光&光斑(::after) ---------- */
body .post-wrap::before,
body .article-inner::before,
body .sidebar-wrap::before,
body .widget-wrap::before,
body .blog-comments-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-prism);
  -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;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
  transition: opacity 0.4s ease;
}
body .post-wrap:hover::before,
body .article-inner:hover::before,
body .sidebar-wrap:hover::before,
body .widget-wrap:hover::before,
body .blog-comments-card:hover::before {
  opacity: 1;
}
body .post-wrap::after,
body .article-inner::after,
body .sidebar-wrap::after,
body .widget-wrap::after,
body .blog-comments-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      280px circle at var(--gx, 50%) var(--gy, 0%),
      var(--glass-light),
      transparent 65%
    ),
    linear-gradient(180deg, var(--glass-top-glow), transparent 30%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}
body .post-wrap:hover::after,
body .article-inner:hover::after,
body .sidebar-wrap:hover::after,
body .widget-wrap:hover::after,
body .blog-comments-card:hover::after {
  opacity: 1;
}

/* ---------- 3D 倾斜（JS 施加在外层容器） ---------- */
.glass-tilt {
  /* 复位带一点弹性 overshoot（Apple 卡片手感） */
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
  transform-style: preserve-3d;
}
.glass-tilt.glass-tilting {
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/* ---------- 导航栏 ---------- */
#header-nav,
#header-nav.elaina-scrolled {
  background: var(--glass-bg-navy) !important;
  -webkit-backdrop-filter: blur(18px) saturate(var(--glass-saturate)) !important;
  backdrop-filter: blur(18px) saturate(var(--glass-saturate)) !important;
  border-bottom: 1px solid var(--glass-border-dim);
  box-shadow: var(--glass-shadow);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* 顶栏导航项 hover：浮起玻璃胶囊（Apple 官网导航手感） */
#header-nav .main-nav-link {
  position: relative;
  z-index: 1;
}
#header-nav .main-nav-link::before {
  content: ;
  position: absolute;
  inset: -5px -12px;
  border-radius: 10px;
  background: var(--glass-bg-navy);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid var(--glass-border-dim);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 10px rgba(20, 25, 60, 0.10);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: none;
  z-index: -1;
}
#header-nav .main-nav-link:hover::before {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  #header-nav .main-nav-link::before { transition: opacity 0.15s ease; transform: none; }
}

/* 顶栏光斑跟随（--gx/--gy 由 glass-light.js 写入）+ 底部珠光线 */
#header-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), var(--glass-light), transparent 72%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
#header-nav:hover::after { opacity: 1; }
#header-nav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--glass-prism);
  opacity: 0.9;
  pointer-events: none;
}
html:not([data-theme="dark"]) #header-nav .main-nav-link,
html:not([data-theme="dark"]) #sub-nav .nav-icon {
  color: #232838 !important;
  text-shadow: none !important;
}
html[data-theme="dark"] #header-nav .main-nav-link,
html[data-theme="dark"] #sub-nav .nav-icon {
  color: #f3f4f8 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5) !important;
}

/* ---------- 页脚（原来透明压壁纸，补玻璃保证可读） ---------- */
#footer {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-top: 1px solid var(--glass-border-dim);
  box-shadow: var(--glass-inset);
}

/* ---------- 文章底部 上一篇/下一篇 ---------- */
#article-nav {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-dim);
  border-radius: 12px;
  box-shadow: var(--glass-shadow), var(--glass-inset);
  overflow: hidden;
}

/* ---------- 分页 / 归档页卡 ---------- */
#page-nav {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-saturate));
  backdrop-filter: blur(12px) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-dim);
  border-radius: 12px;
  box-shadow: var(--glass-shadow), var(--glass-inset);
}
body .archives-outer-wrap {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-dim);
  box-shadow: var(--glass-shadow), var(--glass-inset);
}

/* ---------- 手机底部 tab 栏统一玻璃 ---------- */
#mobile-tab-bar {
  background: var(--glass-bg-navy) !important;
  -webkit-backdrop-filter: blur(14px) saturate(var(--glass-saturate));
  backdrop-filter: blur(14px) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-dim);
  box-shadow: var(--glass-shadow), var(--glass-inset);
}

/* ---------- 音乐播放器面板 ---------- */
#sp-panel {
  background: var(--glass-bg-navy) !important;
  -webkit-backdrop-filter: blur(18px) saturate(var(--glass-saturate));
  backdrop-filter: blur(18px) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-dim) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
}

/* ---------- 工具箱卡片（覆盖内联样式） ---------- */
.toolbox-grid .tool-card {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border-dim) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  position: relative;
}
.toolbox-grid .tool-card:hover {
  border-color: var(--glass-border) !important;
  box-shadow: var(--glass-shadow-hover), var(--glass-inset) !important;
}
html[data-theme="dark"] .tool-card .tag {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #d8d9e4 !important;
}

/* ---------- 评论区输入框 ---------- */
body .blog-comments-card input.comment-input,
body .blog-comments-card textarea.comment-input {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-dim);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---------- 手机端降级（低 blur、关光斑、关倾斜） ---------- */
@media (max-width: 768px) {
  :root {
    --glass-blur: 10px;
    --glass-bg: rgba(252, 253, 255, 0.62);
    --glass-bg-navy: rgba(250, 252, 255, 0.72);
  }
  html[data-theme="dark"] {
    --glass-bg: rgba(28, 27, 40, 0.60);
    --glass-bg-navy: rgba(30, 29, 44, 0.70);
  }
  body .post-wrap::after,
  body .article-inner::after,
  body .sidebar-wrap::after,
  body .widget-wrap::after,
  body .blog-comments-card::after {
    display: none;
  }
  .glass-tilt,
  .glass-tilt.glass-tilting {
    transition: none;
    transform: none !important;
  }
}

/* ---------- 减弱动效：全部动态效果关闭 ---------- */
@media (prefers-reduced-motion: reduce) {
  body .post-wrap::after,
  body .article-inner::after,
  body .sidebar-wrap::after,
  body .widget-wrap::after,
  body .blog-comments-card::after {
    display: none;
  }
  body .post-wrap,
  body .article-inner,
  body .sidebar-wrap,
  body .widget-wrap,
  body .blog-comments-card,
  #header-nav {
    transition: none;
  }
  .glass-tilt,
  .glass-tilt.glass-tilting {
    transition: none;
    transform: none !important;
  }
}

/* ---------- 不支持 backdrop-filter 时退回半透明实色 ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-bg: rgba(255, 255, 255, 0.92);
    --glass-bg-navy: rgba(255, 255, 255, 0.95);
  }
  html[data-theme="dark"] {
    --glass-bg: rgba(30, 32, 40, 0.94);
    --glass-bg-navy: rgba(30, 32, 42, 0.96);
  }
}