/* ============================================================
 * soundwave.css — 听，是疗愈的环境 · 声波可视化
 * 沉浸式深色画布 + 五音色辉光；主题色由 JS 经 --sw-tone / --sw-accent 注入。
 * ============================================================ */

.swave {
  position: relative;
  width: 100%;
  /* 填满视口（减去导航实高）；dvh 渐进回退 */
  min-height: calc(100vh - var(--nav-real-h, 60px));
  min-height: calc(100dvh - var(--nav-real-h, 60px));
  overflow: hidden;
  background-color: #070b0a;                                   /* 兜底实色：color-mix 不支持时仍不透明 */
  background-image:
    radial-gradient(120% 92% at 50% 40%,
      color-mix(in srgb, var(--sw-tone, #9aa5a1) 24%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, #070b0a 0%, #0a1211 54%, #050908 100%);
  color: #eef3f1;
  isolation: isolate;
}

.swave-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

.swave-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, transparent 26%, transparent 60%, rgba(0,0,0,.58) 100%);
}

.swave-top {
  position: absolute; top: max(20px, 6vh); left: 0; right: 0; z-index: 2;
  text-align: center; padding: 0 24px; pointer-events: none;
}
.swave-kick {
  font-size: 12px; letter-spacing: .55em; padding-left: .55em;
  color: color-mix(in srgb, var(--sw-accent, #cfe) 82%, #fff);
  opacity: .85;
}
.swave-title {
  margin: 10px 0 0; font-weight: 600;
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  font-size: clamp(26px, 6vw, 50px); letter-spacing: .18em; line-height: 1.25;
  color: #f4f8f6; text-shadow: 0 2px 26px rgba(0,0,0,.55); padding-left: .18em;
}
.swave-sub {
  margin: 14px auto 0; max-width: 720px;
  font-size: clamp(12px, 2.4vw, 15px); letter-spacing: .14em; line-height: 2.1;
  color: rgba(238,243,241,.76);
}

.swave-now {
  position: absolute; left: 0; right: 0; bottom: 170px; z-index: 2;
  text-align: center; pointer-events: none;
}
.swave-tone {
  display: inline-block; min-width: 2.2em; padding: .12em .55em; margin-right: .6em;
  border-radius: 999px; font-size: 18px; font-weight: 700; color: #0a0e0d;
  background: var(--sw-accent, #cfe);
  box-shadow: 0 0 26px color-mix(in srgb, var(--sw-accent, #cfe) 60%, transparent);
}
.swave-track { font-size: 14px; letter-spacing: .1em; color: rgba(238,243,241,.85); }

.swave-ctrl {
  position: absolute; left: 0; right: 0; bottom: 30px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.swave-tones {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 0 16px;
}
.swave-tone-btn {
  pointer-events: auto; cursor: pointer;
  min-width: 48px; min-height: 48px; padding: 0 15px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sw-tone, #9aa5a1) 50%, transparent);
  background: rgba(255,255,255,.04); color: #eef3f1;
  font-size: 17px; letter-spacing: .1em;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.swave-tone-btn:hover { border-color: var(--sw-accent, #cfe); }
.swave-tone-btn.on {
  background: color-mix(in srgb, var(--sw-tone, #9aa5a1) 32%, transparent);
  border-color: var(--sw-accent, #cfe);
  box-shadow: 0 0 20px color-mix(in srgb, var(--sw-accent, #cfe) 48%, transparent);
}
.swave-play {
  pointer-events: auto; cursor: pointer;
  min-height: 50px; padding: 0 32px; border-radius: 999px;
  border: 1px solid var(--sw-accent, #cfe);
  background: color-mix(in srgb, var(--sw-accent, #cfe) 16%, transparent);
  color: #f4f8f6; font-size: 15px; letter-spacing: .2em;
  box-shadow: 0 0 28px color-mix(in srgb, var(--sw-accent, #cfe) 30%, transparent);
  transition: background .25s ease, box-shadow .25s ease;
}
.swave-play:hover { background: color-mix(in srgb, var(--sw-accent, #cfe) 30%, transparent); }

/* 移动端：热区 ≥48px（胶囊已 ≥48，此处仅兜底加高） */
@media (pointer: coarse) {
  .swave-tone-btn { min-width: 52px; min-height: 52px; }
  .swave-play { min-height: 54px; }
  .swave-sub { line-height: 2; }
}

/* 降级：calm / 减弱动效 —— 仅保留柔和呼吸，去掉粒子/涟漪的视觉冲击 */
@media (prefers-reduced-motion: reduce), html.calm {
  .swave-veil { background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, transparent 30%, transparent 64%, rgba(0,0,0,.58) 100%); }
  .swave-title { transition: none; }
}
/* infinite 动画白名单纪律：calm / 触屏 / 减弱动效 下一律停用 */
@media (pointer: coarse), (prefers-reduced-motion: reduce), html.calm {
  .swave-hint-sound { animation: none; }
}

/* 五音疗愈页头部的入口 CTA（点按进入声波可视化） */
.sh-wave-cta {
  pointer-events: auto; cursor: pointer; display: inline-block; margin-bottom: 10px;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--teal, #6cb3a8) 60%, transparent);
  background: rgba(255,255,255,.05); color: #eef3f1;
  font-size: 13px; letter-spacing: .14em; transition: all .25s ease;
}
.sh-wave-cta:hover { border-color: var(--teal, #6cb3a8); background: rgba(108,179,168,.16); }
@media (pointer: coarse) { .sh-wave-cta { min-height: 44px; } }

/* 自动播放被拦截时的「轻触启用声音」提示 */
.swave-hint-sound {
  position: absolute; left: 50%; bottom: 224px; transform: translateX(-50%);
  z-index: 6; pointer-events: auto; cursor: pointer;
  padding: 12px 22px; border-radius: 999px;
  border: 1px solid rgba(207,230,225,.5);
  background: rgba(20,28,26,.72); color: #eaf3f0;
  font-size: 13px; letter-spacing: .12em; backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
  animation: swave-hint-pulse 2.2s ease-in-out infinite;
}
.swave-hint-sound[hidden] { display: none; }
@keyframes swave-hint-pulse { 0%,100% { opacity: .8; } 50% { opacity: 1; } }
@media (pointer: coarse) { .swave-hint-sound { min-height: 48px; } }