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

/* ── 1. 设计令牌覆盖（暗色，参考 xinghuisama：slate + indigo）── */
:root{
  --gap: 24px;
  --accent: #4f46e5;          /* indigo-600 */
  --accent-2: #818cf8;        /* indigo-400 */
  --accent-glow: rgba(79,70,229,.22);
  --bg-card: rgba(30,41,59,.42);       /* slate-800/50 质感 */
  --bg-secondary: rgba(30,41,59,.32);
  --surface: rgba(255,255,255,.05);
  --surface-strong: rgba(255,255,255,.09);
  --surface-hover: rgba(255,255,255,.14);
  --line: rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.18);
  --glass-blur: 14px;          /* ~ backdrop-blur-md */
  --glass-shadow: 0 20px 25px -5px rgba(0,0,0,.40), 0 8px 10px -6px rgba(0,0,0,.28); /* shadow-xl */
  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 24px;           /* ~ rounded-3xl */
  /* 玻璃皮肤专用 */
  --glass-stroke: rgba(255,255,255,.14);
  --glass-stroke-bright: rgba(129,140,248,.55);
  --glass-glow: 0 0 0 1px rgba(129,140,248,.22), 0 24px 60px -22px rgba(79,70,229,.50);
  --ease-out: cubic-bezier(.22,.61,.36,1);
  /* 极光配色（indigo / sky / violet） */
  --aur-1: #4f46e5;
  --aur-2: #818cf8;
  --aur-3: #38bdf8;
  --aur-4: #c084fc;
}

/* ── 2. 设计令牌覆盖（亮色，slate-50 基底）── */
:root.light{
  --accent: #4f46e5;
  --accent-2: #6366f1;
  --accent-glow: rgba(79,70,229,.16);
  --bg-card: rgba(255,255,255,.62);
  --bg-secondary: rgba(255,255,255,.45);
  --surface: rgba(15,23,42,.04);
  --surface-strong: rgba(15,23,42,.07);
  --surface-hover: rgba(15,23,42,.10);
  --line: rgba(15,23,42,.10);
  --line-strong: rgba(15,23,42,.16);
  --glass-blur: 14px;
  --glass-shadow: 0 20px 25px -5px rgba(15,23,42,.18), 0 8px 10px -6px rgba(15,23,42,.12);
  --glass-stroke: rgba(255,255,255,.75);
  --glass-stroke-bright: rgba(79,70,229,.40);
  --glass-glow: 0 0 0 1px rgba(79,70,229,.14), 0 24px 60px -24px rgba(79,70,229,.40);
}

/* ── 3. 背景基底 + 极光 ── */
body{ background: #020617; }      /* slate-950 */
:root.light body{ background: #f8fafc; }   /* slate-50 */

.video-bg{ opacity:.20 !important; }
:root.light .video-bg{ opacity:.10 !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,
.status-bar,
.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 / 移动导航 ── */
/* Dynamic Island 悬浮胶囊：圆角毛玻璃 + 内高光边框 + 投影 */
.nav-dock{
  background: rgba(2,6,23,.45) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 44px -12px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}
:root.light .nav-dock{
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 44px -12px rgba(2,6,23,.20), 0 2px 10px rgba(2,6,23,.08) !important;
}
/* 内层 .topbar 不再自带玻璃，统一由 .nav-dock 胶囊提供 */
.topbar{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !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; }

/* 浅色模式文字修正：修正 hardcoded 浅色文字在 light 背景/卡片上不可见的问题 */
:root.light body[data-page="home"] .home-hero-copy h1{
  color: var(--text) !important;
}
:root.light body[data-page="home"] .home-hero-copy .lead{
  color: rgba(28,28,30,0.78) !important;
  text-shadow: none !important;
}
:root.light .portfolio-summary,
:root.light .photowall-subtitle,
:root.light .photowall-card-date,
:root.light .photowall-card-desc{
  color: rgba(28,28,30,0.78) !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. 首页：居中单列玻璃卡片流（参考 xinghuisama 垂直节奏）── */
body[data-page="home"] .site-main{
  display: flex !important;
  flex-direction: column !important;
  gap: var(--gap) !important;
  align-items: stretch;
}
body[data-page="home"] .home-hero{ min-height: 360px; }
body[data-page="home"] .feature-band{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--gap) !important;
  margin-top: 0 !important;
}

/* 首页侧栏卡片 */
.home-side{
  display: flex !important;
  flex-direction: column;
  gap: var(--gap);
  justify-content: flex-start;
  padding: var(--gap) !important;
}
.home-side-avatar{
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center; font-size: 32px; 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 内部 ── */
/* 作为玻璃卡：内边距 + 圆角裁剪，避免子元素刺破 */
.home-hero{ overflow: hidden; padding: clamp(1.5rem, 4vw, 2.5rem) !important; }
/* 修正内层媒体卡圆角与外层 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. 响应式：单列卡片流在窄屏折叠 ── */
@media (max-width: 900px){
  body[data-page="home"] .feature-band{ grid-template-columns: 1fr !important; }
}
@media (max-width: 768px){
  body[data-page="home"] .site-main{ gap: 18px !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; }
}