/* ============ Wojusensei · Liquid Glass Design System ============ */
/* 背景：用户提供的星空摄影图；玻璃：厚壁液态玻璃（真折射，无模糊） */
/*
 * 瘦身说明：本文件只保留「液态皮肤相对毛玻璃分支（global.css）的差异」。
 * 与 global.css 逐字相同的规则已删除，由 global.css 统一提供（改布局只需动一份）。
 * 留下的规则分两类，删任何一条都会改变液态外观或手机端布局：
 *   1. 皮肤差异 —— 玻璃材质、颜色令牌、折射、背景图等刻意的不同；
 *   2. 级联承重 —— html 前缀提权规则，用于压过 global 的同名/媒体查询规则。
 */

html:root {
  color-scheme: dark;
  --text: rgba(255, 255, 255, 0.96);
  --text-2: rgba(255, 255, 255, 0.74);
  --text-3: rgba(255, 255, 255, 0.52);
  --accent: #8fb0ff;
  --accent-2: #c4a8ff;
  --link: #dce7ff;

  /* 亮色档 = 明亮的白玻璃 */
  --glass-bg: rgba(255, 255, 255, 0.16);
  --glass-bg-strong: rgba(255, 255, 255, 0.23);
  --glass-border: rgba(255, 255, 255, 0.42);
  --glass-rim-top: rgba(255, 255, 255, 0.9);
  --glass-rim-bottom: rgba(255, 255, 255, 0.32);
  --glass-shadow: 0 14px 44px rgba(2, 6, 18, 0.4), 0 2px 8px rgba(2, 6, 18, 0.25);
  --header-tint: rgba(255, 255, 255, 0.11);
  --veil: rgba(8, 12, 26, 0.18);
  --code-bg: rgba(8, 12, 26, 0.4);
  --radius: 24px;
  --nav-h: 68px;
  --wrap: 1080px;
  --font: ui-sans-serif, system-ui, -apple-system, 'SF Pro Display', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;
}

html[data-theme='dark'] {
  /* 暗色档 = 烟熏黑玻璃 */
  --glass-bg: rgba(10, 14, 28, 0.45);
  --glass-bg-strong: rgba(10, 14, 28, 0.56);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-rim-top: rgba(255, 255, 255, 0.42);
  --glass-rim-bottom: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 14px 44px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --header-tint: rgba(10, 14, 28, 0.36);
  --veil: rgba(3, 5, 12, 0.34);
  --code-bg: rgba(4, 7, 16, 0.55);
}

html[data-theme='light'] {
  /* 亮色档可读性：白玻璃上的文字转深色（黑字），链接用深蓝保证对比度 */
  color-scheme: light;
  --text: rgba(22, 24, 38, 0.96);
  --text-2: rgba(22, 24, 38, 0.78);
  --text-3: rgba(22, 24, 38, 0.58);
  --link: #3d56c4;
}
html[data-theme='light'] a:hover { color: #6a7ce0; }
/* 大标题渐变字起点跟随主题：亮色下从近墨起步，避免白起始段在亮背景里消失 */
html[data-theme='light'] .hero-name {
  background-image: linear-gradient(120deg, #1c1e30 30%, #4c5fd0 70%, #7a5fd0);
}

/* ---------- 背景 ---------- */
/* 液态用未模糊的星空原图（毛玻璃用预模糊插画 bg-frosted.webp），并保留鼠标/陀螺仪视差 */
html body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url('/images/bg.webp') center / cover no-repeat;
  transform: translate3d(var(--bg-px, 0px), var(--bg-py, 0px), 0) scale(1.04);
  will-change: transform;
}

/* ---------- 液态玻璃卡片（厚壁，无模糊，靠折射） ---------- */
html .g-card {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 2px 2px var(--glass-rim-top),
    inset 0 -3px 4px var(--glass-rim-bottom),
    var(--glass-shadow);
  padding: 24px;
  transition: background-color 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease;
  will-change: transform;
  /* 视口外的卡片跳过渲染（含 backdrop 折射），同屏只有几张卡时省一大半合成开销 */
  content-visibility: auto;
  contain-intrinsic-size: auto 150px;
}

/* ---------- 导航（悬浮胶囊条，与毛玻璃的通栏条不同） ---------- */
html .site-header {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 50;
  height: calc(var(--nav-h) - 24px);
}
html .site-header .bar {
  position: relative;
  isolation: isolate;
  max-width: var(--wrap);
  margin: 0 auto;
  height: 100%;
  border-radius: 999px;
  background: var(--header-tint);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 2px 2px var(--glass-rim-top),
    inset 0 -3px 4px var(--glass-rim-bottom),
    0 8px 28px rgba(2, 6, 18, 0.35);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 18px;
  transition: background-color 0.6s ease, border-color 0.6s ease;
}
/* 级联承重：压过 global 760px 媒体查询对 .site-header 的通栏化，保住液态胶囊条的左右留白 */
html .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.06rem;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-right: auto;
  white-space: nowrap;
}

/* ---------- Hero 主视觉（星空直出大排版 + 右侧玻璃立牌） ---------- */
/* 级联承重：global 的 1020/760px 媒体查询会改手机端 hero 的留白与高度，
   这两条 html 前缀规则保证液态 hero 在窄屏也维持桌面排版（实测删除即回归） */
html .hero-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  min-height: calc(78dvh - var(--nav-h));
  padding: 76px 0 40px;
}
html .hero-copy {
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 30px 0;
}
/* 头像周围旋转渐变圆环的旋转动画（圆环本体样式由 global 提供） */
@keyframes hs-spin {
  to { transform: rotate(360deg); }
}

/* ---------- 博客 ---------- */
/* 级联承重：html .g-card 的 24px 厚壁内边距特异性高于 .post-item，会让封面四周留白，
   博客列表卡需要封面通栏贴边，故用 html 前缀压回 */
html .post-item { padding: 0; }

/* 代码块底色随皮肤令牌走（与 global 版本存在差异，保留） */
.prose pre {
  background: var(--code-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 18px 20px;
  overflow-x: auto;
  font-size: 0.88rem;
  line-height: 1.7;
}

/* ---------- 移动端 ---------- */
@media (max-width: 760px) {
  /* 级联承重：保住液态胶囊条在窄屏的左右留白（同上方 .site-header 说明） */
  html .site-header { left: 12px; right: 12px; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    /* 菜单可读性优先：高不透明底色，底下内容只允许极淡透出（亮色档单独指定浅色玻璃） */
    background: rgb(10 14 28 / 0.9);
    /* 毛玻璃：模糊透出的页面内容，避免底下文字干扰菜单阅读（仅移动端下拉面板） */
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    border: 1px solid var(--glass-border);
    border-radius: 22px;
    padding: 10px;
    box-shadow: var(--glass-shadow);
  }
  html[data-theme='light'] .nav-links.open { background: rgb(248 250 255 / 0.94); }
  /* 级联承重：液态的 section 纵向留白比毛玻璃窄屏档更大 */
  html .section { margin: 52px 0; }
}

/* ---------- 友链卡片 ---------- */
.friend-card { display: flex; align-items: center; gap: 16px; color: var(--text); overflow: hidden; }

/* ---------- 页面切换衔接动画（Astro View Transitions） ---------- */
/* Chromium 系（Edge/Chrome 走原生 View Transitions）：旧页快速淡出微上移，新页自下方轻轻浮入 */
@keyframes woju-page-out {
  to { opacity: 0; transform: translateY(-10px) scale(0.996); }
}
@keyframes woju-page-in {
  from { opacity: 0; transform: translateY(14px); }
}

/* ---------- 返回顶部玻璃按钮（液态版不带 backdrop blur，尺寸/动效与 global 有差异） ---------- */
.back-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s linear 0.28s, background-color 0.3s ease, border-color 0.6s ease;
}
/* 渐入动画：与 global 版本存在差异，保留液态自己的关键帧 */
@keyframes reveal-in {
  from {
    opacity: 0;
    translate: 0 16px;
    filter: blur(6px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}

/* ============ 液态皮肤对毛玻璃新增样式的回退 ============ */
/* 毛玻璃分支新增的属性在此显式还原，保证液态皮肤观感完整 */
.g-card,
html .site-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html .site-header {
  border-bottom: none;
}
html .hero-name { padding-bottom: 0.12em; } /* 保留 j 尾巴修复 */
html:root {
  /* 液态标题用无衬线字体栈（毛玻璃正文为思源宋体） */
  --font: ui-sans-serif, system-ui, -apple-system, 'SF Pro Display', 'Noto Serif SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
}

/* 首页双布局切换：液态皮肤显示旧 hero，隐藏毛玻璃首页 */
.home-frosted { display: none !important; }
.home-liquid { display: flex !important; }

.g-card { will-change: transform; }
.site-header { background: transparent; border-bottom: none; }
.hero-name { padding-bottom: 0.12em; } /* 保留 j 尾巴修复 */

/* 亮暗切换联动背景调色：星空图随主题提亮/压暗（亮色提亮幅度收敛，配合黑字） */
html[data-theme='light'] body::before { filter: brightness(1.25) saturate(0.85); }
html[data-theme='dark'] body::before { filter: none; }
body::before { transition: filter 0.6s ease; }

/* 回顶按钮位置防御（fixed right 锚定，防旧级联残留） */
html .back-top { left: auto; }