/* ============================================================
   glass-theme.css — Liquid Glass 覆盖层（仿 yysuni 风格）
   仅替换视觉层：覆盖 styles.css 的 token 与关键表面，
   不动任何布局逻辑与 script.js 依赖的 DOM 钩子。
   在 styles.css 之后加载，利用层叠顺序生效。
   ============================================================ */

/* ── 1. 设计令牌覆盖（暗色）── */
:root{
  --gap: 22px;
  --accent: #8b6cff;
  --accent-2: #ff7eb6;
  --accent-glow: rgba(139,108,255,.20);
  --bg-card: rgba(255,255,255,.07);
  --bg-secondary: rgba(255,255,255,.05);
  --surface: rgba(255,255,255,.04);
  --surface-strong: rgba(255,255,255,.075);
  --surface-hover: rgba(255,255,255,.11);
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.16);
  --glass-blur: 22px;
  --glass-shadow: rgba(10,6,30,.55);
  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 28px;
  /* 玻璃皮肤专用 */
  --glass-stroke: rgba(255,255,255,.22);
  --glass-stroke-bright: rgba(255,255,255,.42);
  --glass-glow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 60px -22px rgba(139,108,255,.55);
  --ease-out: cubic-bezier(.22,.61,.36,1);
  /* 极光配色（梦幻柔和） */
  --aur-1: #7c5cff;
  --aur-2: #ff7eb6;
  --aur-3: #5fd0ff;
  --aur-4: #9d7bff;
}

/* ── 2. 设计令牌覆盖（亮色）── */
:root.light{
  --accent: #7c5cff;
  --accent-2: #ff5ea8;
  --accent-glow: rgba(124,92,255,.18);
  --bg-card: rgba(255,255,255,.55);
  --bg-secondary: rgba(255,255,255,.4);
  --surface: rgba(255,255,255,.4);
  --surface-strong: rgba(255,255,255,.62);
  --surface-hover: rgba(255,255,255,.78);
  --line: rgba(120,90,200,.14);
  --line-strong: rgba(120,90,200,.22);
  --glass-blur: 20px;
  --glass-shadow: rgba(80,60,160,.30);
  --glass-stroke: rgba(255,255,255,.85);
  --glass-stroke-bright: rgba(124,92,255,.35);
  --glass-glow: 0 0 0 1px rgba(255,255,255,.5), 0 24px 60px -24px rgba(150,120,255,.55);
}

/* ── 3. 背景基底 + 极光 ── */
body{ background: #0b0816; }
:root.light body{ background: #eef0ff; }

.video-bg{ opacity:.22 !important; }
:root.light .video-bg{ opacity:.12 !important; }

/* 极光 blob — 分别朝不同方向漂移，形成交错视觉 */
.page-aurora span{
  filter: blur(80px) !important;
  opacity:.6 !important;
  animation-duration: 26s !important;
  animation-timing-function: var(--ease-out) !important;
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
  animation-fill-mode: none !important;
}
.page-aurora .a1{ background: radial-gradient(circle at 50% 50%, var(--aur-1), transparent 64%) !important; animation-name: aur-drift-1; }
.page-aurora .a2{ background: radial-gradient(circle at 50% 50%, var(--aur-2), transparent 64%) !important; animation-name: aur-drift-2; animation-delay:-6s; }
.page-aurora .a3{ background: radial-gradient(circle at 50% 50%, var(--aur-3), transparent 64%) !important; animation-name: aur-drift-3; animation-delay:-12s; }
.page-aurora .a4{ background: radial-gradient(circle at 50% 50%, var(--aur-4), transparent 64%) !important; animation-name: aur-drift-4; animation-delay:-18s; }
:root.light .page-aurora span{ opacity:.5 !important; mix-blend-mode:multiply; }
@keyframes aur-drift-1{ 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(5vw,8vh) scale(1.16)} }
@keyframes aur-drift-2{ 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-6vw,-4vh) scale(1.12)} }
@keyframes aur-drift-3{ 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-3vw,10vh) scale(1.20)} }
@keyframes aur-drift-4{ 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(4vw,-6vh) scale(1.08)} }

/* ── 4. 通用玻璃表面 ── */
.home-hero,
.feature-band article,
.about-profile,
.stack-grid a,
.photowall-card,
.photowall-header,
.guestbook-hero,
.guestbook-form,
.guestbook-item,
.guestbook-loading,
.empty-state,
.error-state,
.blog-hero,
.blog-card,
.blog-loading,
.article-container,
.article-header,
.article-body,
.article-nav,
.page-head,
.home-side,
.nav-music-player,
.studio-card{
  background: var(--bg-card) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(150%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%) !important;
  border: 1px solid var(--glass-stroke) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.18) !important;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease-out), background .4s var(--ease-out) !important;
}

/* 可交互卡片的悬浮反馈 */
.feature-band article:hover,
.stack-grid a:hover,
.guestbook-item:hover,
.blog-card:hover,
.photowall-card:hover,
.home-social-btn:hover,
.home-quick-links a:hover{
  transform: translateY(-8px) scale(1.015) !important;
  border-color: var(--glass-stroke-bright) !important;
  box-shadow: var(--glass-glow), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* ── 5. 导航 / 页脚 / 底部 Tab / 移动导航 ── */
.nav-dock{
  background: rgba(255,255,255,.05) !important;
  border-bottom: 1px solid var(--glass-stroke) !important;
}
/* backdrop-filter 移到内层 .topbar，避免 WebKit 对 fixed 元素 backdrop-filter 的已知 bug */
.topbar{
  backdrop-filter: blur(var(--glass-blur)) saturate(150%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%) !important;
}
:root.light .nav-dock{ background: rgba(255,255,255,.5) !important; }

.footer{
  background: var(--bg-card) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-stroke) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--glass-shadow) !important;
}

.bottom-tab{
  background: var(--bg-card) !important;
  border: 1px solid var(--glass-stroke) !important;
  border-radius: 22px !important;
  box-shadow: var(--glass-shadow) !important;
}
.bottom-tab-item{ transition: transform .35s var(--ease-out), color .3s, background .3s !important; }
.bottom-tab-item:hover, .bottom-tab-item.active{ transform: translateY(-4px) !important; }

.mobile-nav{
  background: var(--bg-card) !important;
  border: 1px solid var(--glass-stroke) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--glass-shadow) !important;
}
.mobile-nav-overlay{ background: rgba(8,5,20,.5) !important; backdrop-filter: blur(8px) !important; }
:root.light .mobile-nav-overlay{ background: rgba(20,10,40,.35) !important; }

/* 语言/主题按钮玻璃化 */
.lang-switch button,
.theme-toggle{
  background: var(--surface-strong) !important;
  border: 1px solid var(--glass-stroke) !important;
  color: var(--text) !important;
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s !important;
}
.lang-switch button:hover,
.theme-toggle:hover{ transform: translateY(-2px) !important; box-shadow: var(--glass-glow) !important; border-color: var(--glass-stroke-bright) !important; }
.nav-clock{ background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 999px !important; }

/* ── 6. 首页 bento 错落布局 ── */
body[data-page="home"] .site-main{
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: var(--gap) !important;
  align-items: start;
}
body[data-page="home"] .home-hero{ grid-column: span 8 !important; min-height: 380px; }
body[data-page="home"] .home-side{ grid-column: span 4 !important; }
body[data-page="home"] .feature-band{
  grid-column: span 12 !important;
  display: grid !important;
  gap: var(--gap) !important;
}
body[data-page="home"] .home-about{ grid-column: span 12 !important; }

/* 首页侧栏卡片 */
.home-side{
  display: flex !important;
  flex-direction: column;
  gap: var(--gap);
  justify-content: center;
  padding: var(--gap) !important;
}
.home-side-avatar{
  width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center; font-size: 40px; align-self: center;
  background: conic-gradient(from 140deg, var(--aur-1), var(--aur-2), var(--aur-3), var(--aur-1));
  box-shadow: 0 0 40px -6px var(--aur-2);
}
.home-side .home-social{ justify-content: center; }
.home-side .home-quick-links{ display: flex; flex-direction: column; gap: 10px; }
.home-side .home-quick-links a{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 16px;
  background: var(--surface-strong) !important;
  border: 1px solid var(--glass-stroke) !important;
  color: var(--text) !important; text-decoration: none;
  transition: transform .35s var(--ease-out), box-shadow .35s, border-color .35s !important;
}
.home-side .home-quick-links a:hover{ transform: translateY(-3px) !important; box-shadow: var(--glass-glow) !important; }
.home-side .home-quick-links strong{ min-width: 0; }

/* ── 7. 首页 hero 内部 ── */
/* 防止子元素刺破 hero 玻璃卡圆角 */
.home-hero{ overflow: visible; }
/* 修正内层媒体卡圆角与外层 hero 匹配 */
.home-hero-media{ border-radius: var(--radius-lg) !important; }
/* 首页 hero 标题渐变 */
.home-hero-copy h1{
  background: linear-gradient(110deg, var(--aur-2), var(--aur-3), var(--aur-1));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── 8. 照片墙 ── */
.photowall-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: var(--gap) !important;
}
.photowall-card{ overflow: hidden !important; }
.photowall-cover{
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  border-radius: var(--radius-sm); margin: -1px;
  background: var(--surface-strong) !important;
}
.photowall-cover img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.photowall-card:hover .photowall-cover img{ transform: scale(1.06); }
.photowall-cover-overlay{
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, transparent 40%, rgba(10,6,30,.7));
  opacity: 0; transition: opacity .4s var(--ease-out);
}
.photowall-card:hover .photowall-cover-overlay{ opacity: 1; }
.photowall-cover-text{ color:#fff; font-weight:600; font-size: 14px; letter-spacing: 1px; }
.photowall-info{ padding: 16px; }
.photowall-card-title{ font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.photowall-card-date{ font-size: 12px; color: var(--text-secondary); }
.photowall-card-desc{ font-size: 13px; color: var(--text-secondary); margin: 6px 0 0; }
.photowall-card-count{ display:inline-block; margin-top: 8px; font-size: 12px; color: var(--accent-2); }
.photowall-empty{ text-align: center; padding: 40px 0; color: var(--text-secondary); }
.photowall-loading-spinner, .blog-loading::before{
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--line-strong); border-top-color: var(--accent);
  display: inline-block; animation: glass-spin .8s linear infinite;
}
@keyframes glass-spin{ to{ transform: rotate(360deg); } }

/* ── 9. 留言本 ── */
.guestbook-form{ display: flex; flex-direction: column; gap: 14px; padding: var(--gap) !important; }
.guestbook-input, .guestbook-textarea{
  width: 100%; padding: 13px 15px; border-radius: 14px;
  background: var(--surface-strong) !important;
  border: 1px solid var(--glass-stroke) !important; color: var(--text);
  font-size: 15px; outline: none; transition: border-color .25s, box-shadow .25s;
}
.guestbook-input:focus, .guestbook-textarea:focus{
  border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-glow) !important;
}
.guestbook-submit, .btn-secondary, .photowall-refresh, .btn-back{
  align-self: flex-start; padding: 12px 22px; border-radius: 999px;
  background: linear-gradient(110deg, var(--aur-1), var(--aur-2)) !important;
  border: none !important; color: #fff !important; font-weight: 600; cursor: pointer;
  transition: transform .3s var(--ease-out), filter .3s, box-shadow .3s !important;
}
.guestbook-submit:hover, .btn-secondary:hover, .photowall-refresh:hover, .btn-back:hover{
  transform: translateY(-3px) !important; box-shadow: var(--glass-glow) !important; filter: brightness(1.06);
}
.form-status.success{ color: var(--success); }
.form-status.error{ color: var(--danger); }
.guestbook-item{ padding: 18px !important; }
.gb-avatar{ width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-glow) !important; border: 1px solid var(--glass-stroke) !important; color: var(--accent-2); font-weight: 700; }
.gb-name{ font-weight: 700; }
.gb-time{ color: var(--text-secondary); font-size: 12px; }
.gb-message{ margin-top: 8px; line-height: 1.6; }

/* ── 10. 博客 / 文章 ── */
.blog-list{ display: grid; gap: var(--gap); }
.blog-card{ padding: 22px !important; }
.blog-card h2 a{ color: var(--text); text-decoration: none; }
.blog-card h2 a:hover{ color: var(--accent); }
.blog-summary{ color: var(--text-secondary); margin: 10px 0; }
.blog-tags{ display: flex; gap: 8px; flex-wrap: wrap; }
.tag{ padding: 4px 12px; border-radius: 999px; font-size: 12px;
  background: var(--surface-strong) !important; border: 1px solid var(--glass-stroke) !important; color: var(--text-secondary); }
.article-container{ padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; }
.article-header{ padding: 28px !important; }
.article-body{ padding: 0 28px 28px !important; line-height: 1.8; }
.article-body img{ max-width: 100%; border-radius: var(--radius-sm); }
.article-cover{ width: 100%; border-radius: var(--radius); margin: 18px 0; }
.article-nav{ padding: 0 0 10px !important; background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; }

/* ── 11. 社交页 ── */
.social-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: var(--gap); }
.social-grid > *{
  padding: 20px !important; border-radius: var(--radius-lg) !important;
  background: var(--bg-card) !important; border: 1px solid var(--glass-stroke) !important;
  backdrop-filter: blur(var(--glass-blur)) !important; box-shadow: var(--glass-shadow);
  transition: transform .4s var(--ease-out), box-shadow .4s !important;
}
.social-grid > *:hover{ transform: translateY(-6px) !important; box-shadow: var(--glass-glow) !important; }

/* ── 12. 音乐播放器（导航内）── */
.nav-music-player{ border: 1px solid var(--glass-stroke) !important; border-radius: 18px !important; }
.nav-music-ctrls button{ transition: transform .3s var(--ease-out), box-shadow .3s !important; }
.nav-music-ctrls button:hover{ transform: translateY(-2px) !important; box-shadow: var(--glass-glow) !important; }

/* ── 13. 照片墙灯箱 ── */
.photo-lightbox{
  position: fixed !important; inset: 0 !important; z-index: 9998 !important;
  display: grid !important; place-items: center;
  background: rgba(8,5,20,.62) !important; backdrop-filter: blur(12px) !important;
}
.lightbox-inner{
  position: relative; padding: 18px; max-width: min(92vw, 1000px);
  background: var(--bg-card) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(150%) !important;
  border: 1px solid var(--glass-stroke) !important; border-radius: var(--radius-lg) !important;
  box-shadow: var(--glass-shadow) !important;
}
.lightbox-img{ max-width: 100%; max-height: 80vh; border-radius: var(--radius-sm); display: block; }
.lightbox-close, .lightbox-btn, .lightbox-zoom-btn{
  background: var(--surface-strong) !important; border: 1px solid var(--glass-stroke) !important;
  color: var(--text) !important; border-radius: 50% !important; cursor: pointer;
  transition: transform .3s var(--ease-out), box-shadow .3s !important;
}
.lightbox-close:hover, .lightbox-btn:hover, .lightbox-zoom-btn:hover{ transform: translateY(-2px) scale(1.06) !important; box-shadow: var(--glass-glow) !important; }
.lightbox-zoom-bar{
  display: flex; align-items: center; gap: 10px; justify-content: center;
  margin-top: 12px; padding: 8px 14px; border-radius: 999px;
  background: var(--surface) !important; border: 1px solid var(--line) !important; width: fit-content; margin-inline: auto;
}
.lightbox-dots{ display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.lightbox-dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); border: none; cursor: pointer; }
.lightbox-dot.active{ background: var(--accent); }

/* ── 14. 飘落粒子 ── */
.particles-container{ position: fixed !important; inset: 0 !important; pointer-events: none !important; z-index: 1 !important; overflow: hidden; }
.particle{ position: absolute; top: -24px; will-change: transform; font-size: 18px; opacity: .8; }

/* ── 15. 通用按钮（studio 等已用变量，自动跟随；此处补强访客站按钮）── */
.home-social-btn{
  background: var(--surface-strong) !important;
  border: 1px solid var(--glass-stroke) !important;
  color: var(--text) !important;
  transition: transform .35s var(--ease-out), box-shadow .35s, border-color .35s !important;
}
.home-social-btn:hover{ transform: translateY(-4px) scale(1.08) !important; box-shadow: var(--glass-glow) !important; border-color: var(--glass-stroke-bright) !important; }
.home-social-tooltip{
  background: var(--bg-secondary) !important; border: 1px solid var(--glass-stroke) !important;
  backdrop-filter: blur(10px) !important; color: var(--text) !important;
}
.home-quick-links a span{ color: var(--accent); font-weight: 700; }

/* ── 16. 响应式：bento 在窄屏折叠 ── */
@media (max-width: 900px){
  body[data-page="home"] .site-main{ grid-template-columns: 1fr !important; }
  body[data-page="home"] .home-hero,
  body[data-page="home"] .home-side,
  body[data-page="home"] .feature-band,
  body[data-page="home"] .home-about{ grid-column: auto !important; }
}
@media (prefers-reduced-motion: reduce){
  .page-aurora span, .photowall-card:hover .photowall-cover img,
  .feature-band article:hover, .guestbook-item:hover, .blog-card:hover, .photowall-card:hover{ animation: none !important; transform: none !important; }
}