/* ============================================================
   主题 18 · 磁场流光 (Magnetic Field)
   紫蓝电磁波纹，科技感透明效果如电子显微镜影像集
   ============================================================ */
:root{
  --c-bg:#0a0a1e;
  --c-bg-grad:radial-gradient(circle at 18% 14%,rgba(91,33,182,.20),transparent 45%),
              radial-gradient(circle at 82% 22%,rgba(59,130,246,.16),transparent 45%),
              radial-gradient(circle at 50% 95%,rgba(139,92,246,.13),transparent 50%),
              linear-gradient(165deg,#0a0a1e,#14142e);
  --c-surface:rgba(22,22,48,.72);
  --c-surface-2:rgba(32,32,64,.60);
  --c-text:#eeeaff;
  --c-muted:#9492c8;
  --c-accent:#5b21b6;
  --c-accent-2:#3b82f6;
  --c-on-accent:#ffffff;
  --c-border:rgba(139,92,246,.16);
  --font-display:'Trebuchet MS','PingFang SC',sans-serif;
  --hero-grad:linear-gradient(115deg,#8b5cf6,#3b82f6 45%,#60a5fa);
  --nav-bg:rgba(10,10,30,.60);
  --nav-blur:blur(18px);
  --shadow:0 22px 55px rgba(91,33,182,.30);
  --radius:18px;
}
/* 电磁波纹层 —— 同心扩散的电磁涟漪 */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 30% 50%,rgba(91,33,182,.22),transparent 30%),
    radial-gradient(circle at 30% 50%,rgba(59,130,246,.18),transparent 45%),
    radial-gradient(circle at 30% 50%,rgba(139,92,246,.14),transparent 60%),
    radial-gradient(circle at 72% 38%,rgba(59,130,246,.16),transparent 55%);
  filter:blur(6px);
  animation:magRipple 12s ease-in-out infinite;
}
@keyframes magRipple{
  0%,100%{background-position:0 0,0 0,0 0,0 0;opacity:.8}
  50%{background-position:-40px 0,40px 0,80px 0,0 0;opacity:1}
}
/* 标题：纤细字重 + 渐变流光闪烁 */
.hero h1{font-weight:300;letter-spacing:-1.5px}
.hero h1 .grad{
  background:linear-gradient(115deg,#8b5cf6,#3b82f6 40%,#60a5fa 70%,#8b5cf6);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800;animation:magShimmer 7s linear infinite;
}
@keyframes magShimmer{to{background-position:220% center}}
/* 玻璃质感卡片 */
.album-card{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(139,92,246,.18)}
.album-card:hover{box-shadow:0 0 0 1px rgba(59,130,246,.45),0 34px 70px rgba(91,33,182,.40);border-color:rgba(59,130,246,.50)}
.album-info{background:rgba(20,20,46,.50)}
.album-info h3{font-weight:600}
.album-badge{background:linear-gradient(115deg,#5b21b6,#3b82f6);color:#ffffff;border:none}
.album-meta{border-top-color:rgba(139,92,246,.14)}
.album-meta .view{color:#60a5fa}
.section-head .kicker{background:linear-gradient(115deg,#8b5cf6,#3b82f6);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:5px}
.about-visual{background:linear-gradient(135deg,#3a1c7e,#5b21b6 50%,#3b82f6);background-size:200% auto;animation:magShimmer 9s linear infinite;box-shadow:0 0 60px rgba(91,33,182,.40)}
.eyebrow{background:linear-gradient(115deg,#8b5cf6,#3b82f6,#60a5fa) !important;color:#ffffff !important;letter-spacing:3px}
.btn.primary{background:linear-gradient(115deg,#5b21b6,#3b82f6);color:#ffffff;box-shadow:0 12px 30px rgba(91,33,182,.45)}
.btn.ghost{background:rgba(255,255,255,.05);color:#eeeaff;border-color:rgba(139,92,246,.22)}
.divider{background:linear-gradient(115deg,#8b5cf6,#3b82f6)}
.footer{background:#050514;border-top:1px solid rgba(139,92,246,.10)}
.logo-mark{box-shadow:0 6px 24px rgba(139,92,246,.55)}
.nav-menu a:hover{color:#8b5cf6;background:rgba(139,92,246,.10)}
.ts-swatch.ts-magnetic{background:linear-gradient(135deg,#5b21b6,#8b5cf6,#3b82f6)}
.shape.s1{background:#8b5cf6 !important;opacity:.22 !important}
.shape.s2{background:#3b82f6 !important;opacity:.20 !important}