/* ============================================================
   主题 28 · 赛博流光 (Cyber Stream)
   青色赛博透明效果，网格线条动画如未来都市夜景摄影集
   ============================================================ */
:root{
  --c-bg:#001018;
  --c-bg-grad:radial-gradient(circle at 18% 14%,rgba(0,255,170,.20),transparent 45%),
              radial-gradient(circle at 82% 22%,rgba(0,170,255,.16),transparent 45%),
              radial-gradient(circle at 50% 95%,rgba(34,211,238,.13),transparent 50%),
              linear-gradient(165deg,#001018,#001a2e);
  --c-surface:rgba(0,28,42,.72);
  --c-surface-2:rgba(0,40,58,.60);
  --c-text:#e0fbff;
  --c-muted:#7ac4d8;
  --c-accent:#00ffaa;
  --c-accent-2:#00aaff;
  --c-on-accent:#001018;
  --c-border:rgba(0,255,170,.18);
  --font-display:'Trebuchet MS','PingFang SC',sans-serif;
  --hero-grad:linear-gradient(115deg,#00ffaa,#00aaff 45%,#22d3ee);
  --nav-bg:rgba(0,16,24,.60);
  --nav-blur:blur(18px);
  --shadow:0 22px 55px rgba(0,255,170,.30);
  --radius:18px;
}
/* 网格流光层 —— 赛博网格透视滚动 */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,255,170,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,170,255,.10) 1px,transparent 1px),
    radial-gradient(55% 45% at 50% 8%,rgba(0,255,170,.14),transparent 70%),
    radial-gradient(50% 38% at 80% 30%,rgba(0,170,255,.12),transparent 70%);
  background-size:48px 48px,48px 48px,100% 100%,100% 100%;
  filter:blur(1px);
  animation:cyberGrid 16s linear infinite;
}
@keyframes cyberGrid{
  0%{background-position:0 0,0 0,0 0,0 0}
  100%{background-position:0 48px,48px 0,0 0,0 0}
}
/* 标题：纤细字重 + 渐变流光闪烁 */
.hero h1{font-weight:300;letter-spacing:-1.5px}
.hero h1 .grad{
  background:linear-gradient(115deg,#00ffaa,#00aaff 40%,#22d3ee 70%,#00ffaa);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800;animation:cyberShimmer 7s linear infinite;
}
@keyframes cyberShimmer{to{background-position:220% center}}
/* 玻璃质感卡片 */
.album-card{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(0,255,170,.22)}
.album-card:hover{box-shadow:0 0 0 1px rgba(0,170,255,.50),0 34px 70px rgba(0,255,170,.40);border-color:rgba(0,170,255,.55)}
.album-info{background:rgba(0,24,36,.55)}
.album-info h3{font-weight:600}
.album-badge{background:linear-gradient(115deg,#00ffaa,#00aaff);color:#001018;border:none}
.album-meta{border-top-color:rgba(0,255,170,.16)}
.album-meta .view{color:#00ffaa}
.section-head .kicker{background:linear-gradient(115deg,#00ffaa,#00aaff);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:5px}
.about-visual{background:linear-gradient(135deg,#003a3a,#00ffaa 45%,#00aaff);background-size:200% auto;animation:cyberShimmer 9s linear infinite;box-shadow:0 0 60px rgba(0,255,170,.40)}
.eyebrow{background:linear-gradient(115deg,#00ffaa,#00aaff,#22d3ee) !important;color:#001018 !important;letter-spacing:3px}
.btn.primary{background:linear-gradient(115deg,#00ffaa,#00aaff);color:#001018;box-shadow:0 12px 30px rgba(0,255,170,.45)}
.btn.ghost{background:rgba(255,255,255,.05);color:#e0fbff;border-color:rgba(0,255,170,.25)}
.divider{background:linear-gradient(115deg,#00ffaa,#00aaff)}
.footer{background:#000810;border-top:1px solid rgba(0,255,170,.12)}
.logo-mark{box-shadow:0 6px 24px rgba(0,255,170,.55)}
.nav-menu a:hover{color:#00ffaa;background:rgba(0,255,170,.10)}
.ts-swatch.ts-cyber{background:linear-gradient(135deg,#00ffaa,#22d3ee,#00aaff)}
.shape.s1{background:#00ffaa !important;opacity:.22 !important}
.shape.s2{background:#00aaff !important;opacity:.20 !important}