/* ============================================================
   glass-theme.css — 全站共享「沉浸壁纸 + 毛玻璃」主题
   参考 leleo-home-page 的设计语言：
   全屏插画壁纸 · 半透明毛玻璃浮层 · 胶囊元素 · 斜体展示标题
   用法：在页面原有样式之后引入本文件，
   各页可将自身面板变量映射到 --glass-* 变量。
   ============================================================ */

:root{
  /* 玻璃材质 */
  --glass-bg: rgba(18, 26, 44, .38);
  --glass-bg-strong: rgba(14, 20, 36, .55);
  --glass-bg-soft: rgba(255, 255, 255, .07);
  --glass-line: rgba(255, 255, 255, .18);
  --glass-line-soft: rgba(255, 255, 255, .10);
  --glass-blur: 16px;
  --glass-radius: 18px;
  --glass-shadow: 0 18px 44px -20px rgba(2, 8, 24, .65);

  /* 文字（深色壁纸上） */
  --g-ink: #f2f6fb;
  --g-muted: rgba(226, 236, 248, .68);
  --g-faint: rgba(226, 236, 248, .45);

  /* 点缀色（在壁纸上保持可读） */
  --g-gold: #f0d194;
  --g-teal: #8fe8e0;
  --g-rose: #f2a7bc;
  --g-violet: #c2b3f2;
  --g-green: #9fe0a9;
  --g-red: #f0968b;
  --g-blue: #9cc4f0;

  /* 壁纸资源（可被页面覆盖） */
  --wallpaper-pc: url("assets/wallpaper-xula.jpg");
  --wallpaper-mobile: url("assets/wallpaper-xula-mobile.jpg");
}

/* ---------- 全屏壁纸层 ---------- */
body{
  color: var(--g-ink);
  background-color: #0a1020;
}
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(8, 12, 26, .45), rgba(8, 12, 26, .55) 78%, rgba(6, 10, 22, .75)),
    var(--wallpaper-pc) center / cover no-repeat;
  transform: translateZ(0);
  animation: bgmove 48s ease-in-out infinite alternate;
}
body::after{
  /* 轻微暗角，让边缘内容更聚焦 */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(4, 8, 18, .38));
}
@media (max-width: 720px){
  body::before{
    background:
      linear-gradient(180deg, rgba(8, 12, 26, .45), rgba(8, 12, 26, .58) 80%, rgba(6, 10, 22, .78)),
      var(--wallpaper-mobile) center / cover no-repeat;
  }
}
@keyframes bgmove{
  from { transform: translateZ(0) scale(1); }
  to { transform: translateZ(0) scale(1.08); }
}
#live-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ---------- 文字与选择区 ---------- */
::selection{ background: rgba(240, 209, 148, .32); color: #fff; }
a{ color: var(--g-teal); text-decoration: none; }
a:hover{ color: #c9f5f0; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{ width: 9px; height: 9px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: rgba(255, 255, 255, .16);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover{ background: rgba(255, 255, 255, .30); background-clip: content-box; border: 2px solid transparent; }

/* ---------- 玻璃工具类 ---------- */
.glass{
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  border: 1px solid var(--glass-line);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
}
.glass-strong{
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(1.3);
  backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(1.3);
  border: 1px solid var(--glass-line);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
}
.glass-soft{
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 4px));
  backdrop-filter: blur(calc(var(--glass-blur) - 4px));
  border: 1px solid var(--glass-line-soft);
  border-radius: calc(var(--glass-radius) - 4px);
}

/* 胶囊标签 / 按钮 */
.capsule{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-line-soft);
  font-size: 13px;
  color: var(--g-ink);
}

/* 斜体展示大标题（leleo 签名式标题） */
.display-title{
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, "Songti SC", "STSong", serif;
  font-style: italic;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(4, 10, 26, .75), 0 1px 3px rgba(4, 10, 26, .6);
}

/* 表单控件统一为深色玻璃底（页内可直接叠加使用） */
input, select, textarea{
  color-scheme: dark;
}