/* YUEIN FOREST AUDIO — 2026-10-19 全站细化
 * 1. 左上角品牌组合：文字放大到与 Logo 等高，中文对齐 Logo 框体中心，英文对齐 YUEINSOUND.COM 横条
 * 2. 首页「悦音森林」主标题略收小
 * 3. 声音开关、声音提示与站内跳转的淡出
 * 加载顺序：放在 brand-20261019.css 之后。 */

/* ---------- 1. 品牌组合 ---------- */
.lockup { --lk: 50px; gap: calc(var(--lk) * .3); }
.top .lockup { --lk: 52px; }
.nav.is-scrolled .lockup { --lk: 42px; }
img.lockup-logo, .top img.lockup-logo, .nav.is-scrolled img.lockup-logo { height: var(--lk); transition: height .5s var(--ease), filter .6s var(--ease); }
.lockup-name {
  display: grid; grid-template-rows: 82fr 18fr; align-items: center; justify-items: center;
  height: var(--lk); gap: 0; padding: 0 0 0 calc(var(--lk) * .3);
  border-left: 1px solid rgb(var(--gold) / .34);
  transition: height .5s var(--ease), padding .5s var(--ease);
}
.lockup-name .zh {
  font: 300 calc(var(--lk) * .4)/1 var(--serif);
  letter-spacing: .3em; margin-right: -.3em;
  color: rgb(var(--fg) / .96);
  transition: font-size .5s var(--ease);
}
.lockup-name .en {
  font: 500 calc(var(--lk) * .18)/1 var(--sans);
  letter-spacing: .7em; margin-right: -.7em;
  color: rgb(var(--gold) / .82);
  transition: font-size .5s var(--ease);
}
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 5/6) { .top .lockup { --lk: 44px; } }
@media (min-width: 761px) and (max-width: 1100px) and (max-aspect-ratio: 5/6) { .top .lockup { --lk: 54px; } }
@media (max-width: 960px) {
  .nav .lockup { --lk: 42px; }
  .nav.is-scrolled .lockup { --lk: 38px; }
  .nav .lockup-name .zh { letter-spacing: .26em; margin-right: -.26em; }
  .nav .lockup-name .en { letter-spacing: .6em; margin-right: -.6em; }
}
@media (max-width: 480px) {
  .nav .lockup { gap: 10px; }
  .nav .lockup-name { padding-left: 10px; }
  .nav .lockup-name .zh { font-size: 14px; letter-spacing: .2em; margin-right: -.2em; }
  .nav .lockup-name .en { font-size: 6.6px; letter-spacing: .42em; margin-right: -.42em; }
}
@media (max-width: 380px) { .nav .lockup-name .en { display: block; } .nav .lockup-name .zh { font-size: 13px; } }
@media (max-width: 340px) { .nav .lockup-name { display: none; } }

/* ---------- 2. 首页主标题 ---------- */
.title-main { font-size: clamp(46px, min(7.4vw, 12.3vh), 124px); letter-spacing: .05em; }
.title-sub { margin-top: clamp(16px, 2.4vh, 26px); }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 5/6) {
  .title-main { font-size: clamp(44px, 13.6vw, 72px); }
}
@media (min-width: 761px) and (max-width: 1100px) and (max-aspect-ratio: 5/6) {
  .title-main { font-size: clamp(76px, 12.2vw, 126px); }
}

/* ---------- 3. 声音 ---------- */
/* 首页：等待访客第一次触碰时的提示（浏览器规定首次触碰前不能发声） */
.sound-hint {
  display: inline-flex; align-items: center; gap: 10px; margin-right: 6px;
  font: 400 11.5px/1 var(--sans); letter-spacing: .24em; color: rgb(var(--fg) / .62);
  opacity: 0; transform: translateX(6px); pointer-events: none;
  transition: opacity .6s var(--ease), transform .8s var(--ease);
}
.sound-hint i { position: relative; width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--gold)); }
.sound-hint i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgb(var(--gold) / .6); animation: hintRing 2.2s ease-out infinite; }
@keyframes hintRing { 0% { transform: scale(.3); opacity: 1; } 80%, 100% { transform: scale(1.8); opacity: 0; } }
.is-ready .is-sound-locked .sound-hint { opacity: 1; transform: none; transition-delay: 1.6s; }
.is-sound-locked .sound-toggle { animation: soundWait 2.4s var(--ease-io) infinite; }
@keyframes soundWait { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--gold) / 0); } 40% { box-shadow: 0 0 0 6px rgb(var(--gold) / .12); } }
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 5/6) {
  .sound-hint { display: none; }
}

/* 内页：导航栏里的声音开关 */
.nav-links { margin-left: auto; }
.nav-sound {
  display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 13px 0 12px; flex: none;
  border: 1px solid rgb(var(--fg) / .14); border-radius: 999px;
  font: 500 9px/1 var(--sans); letter-spacing: .26em; color: rgb(var(--fg) / .55);
  transition: border-color .4s, color .4s, background-color .4s;
}
.nav-sound:hover { border-color: rgb(var(--fg) / .4); color: rgb(var(--fg)); }
.nav-sound .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.nav-sound .eq i { display: block; width: 2px; height: 10px; border-radius: 1px; background: currentColor; transform: scaleY(.25); transform-origin: bottom; }
.nav-sound-state::before { content: "OFF"; }
[data-sound="on"] .nav-sound, [data-sound="locked"] .nav-sound { border-color: rgb(var(--gold) / .5); color: rgb(var(--fg) / .85); }
[data-sound="on"] .nav-sound-state::before, [data-sound="locked"] .nav-sound-state::before { content: "ON"; color: rgb(var(--gold)); }
[data-sound="on"] .nav-sound .eq i { background: rgb(var(--gold)); animation: eq 1s var(--ease-io) infinite alternate; }
[data-sound="on"] .nav-sound .eq i:nth-child(2) { animation-duration: .74s; animation-delay: -.2s; }
[data-sound="on"] .nav-sound .eq i:nth-child(3) { animation-duration: 1.18s; animation-delay: -.5s; }
[data-sound="on"] .nav-sound .eq i:nth-child(4) { animation-duration: .86s; animation-delay: -.1s; }
[data-sound="locked"] .nav-sound { animation: soundWait 2.4s var(--ease-io) infinite; }
@keyframes eq { from { transform: scaleY(.18); } to { transform: scaleY(1); } }
@media (max-width: 960px) {
  .nav-sound { margin-left: auto; width: 42px; height: 42px; padding: 0; justify-content: center; }
  .nav-sound-label, .nav-sound-state { display: none; }
  .nav { gap: 12px; }
}

/* 站内跳转：与声音同步的轻微淡出 */
body { transition: opacity .22s var(--ease-io); }
.is-leaving-page body { opacity: 0; }