/* ============================================================
   主题 N11 · 深海流光 (Ocean Deep)
   深蓝夜底缀碧蓝·青水波纹流动，神秘深邃如深海影像集
   ============================================================ */
:root{
  --c-bg:#0a1922;
  --c-bg-grad:radial-gradient(circle at 18% 14%,rgba(0,119,182,.22),transparent 45%),
              radial-gradient(circle at 82% 22%,rgba(0,180,216,.16),transparent 45%),
              radial-gradient(circle at 50% 95%,rgba(0,119,182,.13),transparent 50%),
              linear-gradient(165deg,#0a1922,#0e2436);
  --c-surface:rgba(18,40,56,.72);
  --c-surface-2:rgba(26,54,72,.60);
  --c-text:#eaf6ff;
  --c-muted:#8fa8b8;
  --c-accent:#0077b6;
  --c-accent-2:#00b4d8;
  --c-on-accent:#eaf6ff;
  --c-border:rgba(0,180,216,.18);
  --font-display:'Trebuchet MS','PingFang SC',sans-serif;
  --hero-grad:linear-gradient(115deg,#0077b6,#00b4d8 50%,#90e0ef);
  --nav-bg:rgba(10,25,34,.60);
  --nav-blur:blur(18px);
  --shadow:0 22px 55px rgba(0,119,182,.30);
  --radius:18px;
}
/* 水波纹动画层 —— 青蓝光圈层层荡漾 */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 24% 30%,rgba(0,180,216,.30) 1.5px,transparent 8px),
    radial-gradient(circle at 68% 22%,rgba(144,224,239,.26) 1.5px,transparent 9px),
    radial-gradient(circle at 44% 70%,rgba(0,180,216,.24) 1.5px,transparent 10px),
    radial-gradient(circle at 82% 64%,rgba(144,224,239,.22) 1.5px,transparent 8px),
    radial-gradient(circle at 16% 78%,rgba(0,180,216,.20) 1.5px,transparent 9px);
  background-size:280px 280px,320px 320px,260px 260px,300px 300px,340px 340px;
  opacity:.5;
  animation:waveRipple 10s ease-in-out infinite alternate;
}
@keyframes waveRipple{
  0%{transform:scale(1);opacity:.4}
  50%{transform:scale(1.08);opacity:.6}
  100%{transform:scale(1.04);opacity:.5}
}
/* 标题：碧蓝渐变流光 */
.hero h1{font-weight:300;letter-spacing:-1.5px}
.hero h1 .grad{
  background:linear-gradient(115deg,#0077b6,#00b4d8 40%,#90e0ef 70%,#00b4d8);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800;animation:oceanShimmer 7s linear infinite;
}
@keyframes oceanShimmer{to{background-position:220% center}}
/* 玻璃质感卡片 */
.album-card{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(0,180,216,.20)}
.album-card:hover{box-shadow:0 0 0 1px rgba(144,224,239,.45),0 34px 70px rgba(0,119,182,.40);border-color:rgba(144,224,239,.50);transform:translateY(-6px)}
.album-info{background:rgba(14,32,46,.50)}
.album-info h3{font-weight:600}
.album-badge{background:linear-gradient(115deg,#0077b6,#00b4d8);color:#eaf6ff;border:none}
.album-meta{border-top-color:rgba(0,180,216,.14)}
.album-meta .view{color:#00b4d8}
.section-head .kicker{background:linear-gradient(115deg,#0077b6,#00b4d8);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:5px}
.about-visual{background:linear-gradient(135deg,#003a5c,#0077b6 50%,#00b4d8);background-size:200% auto;animation:oceanShimmer 9s linear infinite;box-shadow:0 0 60px rgba(0,119,182,.40)}
.eyebrow{background:linear-gradient(115deg,#0077b6,#00b4d8) !important;color:#eaf6ff !important;letter-spacing:3px}
.btn.primary{background:linear-gradient(115deg,#0077b6,#00b4d8);color:#eaf6ff;box-shadow:0 12px 30px rgba(0,119,182,.45)}
.btn.ghost{background:rgba(255,255,255,.05);color:#eaf6ff;border-color:rgba(0,180,216,.22)}
.divider{background:linear-gradient(115deg,#0077b6,#00b4d8)}
.footer{background:#05141e;border-top:1px solid rgba(0,180,216,.10)}
.logo-mark{box-shadow:0 6px 24px rgba(0,180,216,.55)}
.nav-menu a:hover{color:#00b4d8;background:rgba(0,180,216,.10)}
.ts-swatch.ts-ocean2{background:linear-gradient(135deg,#0077b6,#00b4d8)}
.shape.s1{background:#0077b6 !important;opacity:.22 !important}
.shape.s2{background:#00b4d8 !important;opacity:.20 !important}