/* ============================================================
   主题 L10 · 蛋白石流光体 (Opal Luster)
   深紫蓝底配蛋白石多彩渐变流光，DM Serif Display 厚重衬线与多彩变幻光斑，如蛋白石虹彩
   字体: DM Serif Display(400) + Inter(400;600;700)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;600;700&display=swap');
:root{
  --c-bg:#0a0a1e;
  --c-bg-grad:radial-gradient(circle at 18% 16%,rgba(0,212,170,.20),transparent 45%),
              radial-gradient(circle at 52% 22%,rgba(255,0,110,.14),transparent 45%),
              radial-gradient(circle at 82% 18%,rgba(124,77,255,.16),transparent 45%),
              radial-gradient(circle at 50% 95%,rgba(0,212,170,.12),transparent 50%),
              linear-gradient(165deg,#0a0a1e,#14142a);
  --c-surface:rgba(22,22,48,.72);
  --c-surface-2:rgba(32,30,64,.60);
  --c-text:#f5f3ff;
  --c-muted:#9b96c4;
  --c-accent:#00d4aa;
  --c-accent-2:#7c4dff;
  --c-on-accent:#0a0a1e;
  --c-border:rgba(124,77,255,.18);
  --font-display:'DM Serif Display',serif;
  --font-body:'Inter',sans-serif;
  --hero-grad:linear-gradient(115deg,#00d4aa,#ff006e 50%,#7c4dff);
  --nav-bg:rgba(10,10,30,.60);
  --nav-blur:blur(18px);
  --shadow:0 22px 55px rgba(124,77,255,.30);
  --radius:18px;
}
/* 多彩光斑层 —— 蛋白石三色光斑游移变幻，如虹彩流转 */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 32% at 20% 18%,rgba(0,212,170,.22),transparent 70%),
    radial-gradient(38% 30% at 48% 12%,rgba(255,0,110,.16),transparent 70%),
    radial-gradient(40% 32% at 76% 22%,rgba(124,77,255,.20),transparent 70%),
    radial-gradient(35% 28% at 38% 88%,rgba(0,212,170,.14),transparent 70%);
  filter:blur(11px);
  animation:opalShift 12s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
@keyframes opalShift{
  0%{transform:translate3d(-2%,0,0) scale(1.02) hue-rotate(0deg);opacity:.55}
  33%{transform:translate3d(1%,-2%,0) scale(1.07) hue-rotate(40deg);opacity:.72}
  66%{transform:translate3d(3%,-1%,0) scale(1.1) hue-rotate(80deg);opacity:.62}
  100%{transform:translate3d(0,-2%,0) scale(1.12) hue-rotate(120deg);opacity:.68}
}
/* 标题：DM Serif Display 厚重衬线 + 蛋白石多彩流光 */
.hero h1{font-weight:400;letter-spacing:-.5px;font-family:var(--font-display)}
.hero h1 .grad{
  background:linear-gradient(115deg,#00d4aa,#ff006e 33%,#7c4dff 66%,#00d4aa);
  background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:400;letter-spacing:0;animation:opalShimmer 10s linear infinite;
}
@keyframes opalShimmer{
  0%{background-position:0% center;filter:hue-rotate(0deg)}
  50%{background-position:150% center;filter:hue-rotate(30deg)}
  100%{background-position:300% center;filter:hue-rotate(0deg)}
}
/* 玻璃质感卡片 */
.album-card{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(124,77,255,.22)}
.album-card:hover{box-shadow:0 0 0 1px rgba(0,212,170,.40),0 34px 70px rgba(124,77,255,.42);border-color:rgba(0,212,170,.50);transform:translateY(-6px)}
.album-info{background:rgba(20,18,42,.50)}
.album-info h3{font-weight:400;font-family:var(--font-display)}
.album-badge{background:linear-gradient(115deg,#00d4aa,#ff006e,#7c4dff);color:#0a0a1e;border:none}
.album-meta{border-top-color:rgba(124,77,255,.14)}
.album-meta .view{color:#00d4aa}
.section-head .kicker{background:linear-gradient(115deg,#00d4aa,#ff006e,#7c4dff);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:5px;font-family:var(--font-display)}
.about-visual{background:linear-gradient(135deg,#006653,#00d4aa 35%,#ff006e 65%,#7c4dff);background-size:300% auto;animation:opalShimmer 12s linear infinite;box-shadow:0 0 60px rgba(124,77,255,.42)}
.eyebrow{background:linear-gradient(115deg,#00d4aa,#7c4dff) !important;color:#0a0a1e !important;letter-spacing:3px}
.btn.primary{background:linear-gradient(115deg,#00d4aa,#7c4dff);color:#0a0a1e;box-shadow:0 12px 30px rgba(124,77,255,.45)}
.btn.ghost{background:rgba(255,255,255,.05);color:#f5f3ff;border-color:rgba(124,77,255,.22)}
.divider{background:linear-gradient(115deg,#00d4aa,#ff006e,#7c4dff)}
.footer{background:#050510;border-top:1px solid rgba(124,77,255,.10)}
.logo-mark{box-shadow:0 6px 24px rgba(0,212,170,.50)}
.nav-menu a:hover{color:#00d4aa;background:rgba(124,77,255,.10)}
.ts-swatch.ts-luster-opal{background:linear-gradient(135deg,#00d4aa,#ff006e,#7c4dff)}
.shape.s1{background:#00d4aa !important;opacity:.22 !important}
.shape.s2{background:#7c4dff !important;opacity:.20 !important}