/* ============================================================
   弦续千年 · 首页 hero（v0.4-fixed）
   颜色写死，仅作用于 #hero / .hero-* / .nav-brand，避免影响全局变量。
   ============================================================ */

/* 首页留白 + 右侧主视觉 → 可记忆的展览封面 */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  overflow: hidden;
  position: relative;
  background: #080a0a;
}

#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,10,10,.98) 0%, rgba(8,10,10,.86) 34%, rgba(8,10,10,.30) 62%, rgba(8,10,10,.70) 100%);
  z-index: 1;
}

#hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, #080a0a);
}

.hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../assets/hero-zither.webp");
  background-size: cover;
  background-position: center right;
  opacity: .86;
  transform: scale(1.04);
  filter: saturate(.9) contrast(1.04);
  transition: transform 1.8s cubic-bezier(.2,.7,.2,1), opacity 1.2s ease;
}
body.motion-ready .hero-visual { transform: scale(1.01); }

.hero-orbit {
  position: absolute;
  z-index: 2;
  width: min(70vw, 900px);
  height: min(70vw, 900px);
  right: -18vw;
  top: 8%;
  border: 1px solid rgba(216,181,109,.22);
  border-radius: 50%;
  transform: rotate(-15deg);
  box-shadow: 0 0 0 1px rgba(198,93,77,.12), 0 0 80px rgba(198,93,77,.10);
  pointer-events: none;
}
.hero-orbit::before,
.hero-orbit::after {
  content: "";
  position: absolute;
  inset: 9% -6%;
  border: 1px solid rgba(198,93,77,.18);
  border-radius: 50%;
}
.hero-orbit::after { inset: 18% 4%; border-color: rgba(95,169,158,.14); }

.hero-inner {
  position: relative;
  z-index: 3;
  margin-left: clamp(7vw, 12vw, 16vw);
  max-width: 700px;
  padding: 40px 30px 60px 0;
}

.hero-string {
  position: absolute;
  left: 0;
  top: -18%;
  bottom: -26%;
  background: linear-gradient(180deg, transparent, #c65d4d, #e0a65c, transparent);
  opacity: .9;
}

.hero-eyebrow {
  position: relative;
  display: inline-block;
  color: #e0c58a;
  letter-spacing: 8px;
  padding-left: 42px;
  margin-bottom: 28px;
}
.hero-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, #c65d4d, #e0a65c);
}

.hero-title {
  font-size: clamp(58px, 8vw, 106px);
  line-height: 1;
  letter-spacing: .18em;
  color: transparent;
  background: linear-gradient(135deg, #fff6eb 16%, #e8cfa0 48%, #c98a5a 88%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 12px 44px rgba(198,93,77,.2);
}
.hero-title::after {
  content: "";
  display: block;
  width: 140px;
  height: 4px;
  margin-top: 28px;
  background: linear-gradient(90deg, #c65d4d, #e0a65c, transparent);
}

.hero-sub { color: #e0c58a; font-size: 18px; letter-spacing: 5px; margin-top: 22px; }
.hero-question { margin: 28px 0 0; max-width: 560px; color: rgba(241,236,228,.72); line-height: 2; font-size: 16px; }
.hero-cta {
  margin-top: 36px;
  padding: 13px 30px;
  border-color: #e0a65c;
  color: #ece2cf;
  background: rgba(10,8,10,.38);
  box-shadow: inset 0 0 0 1px rgba(198,93,77,.16);
}
.hero-cta:hover { background: linear-gradient(90deg, #c65d4d, #8f3a2e); border-color: transparent; color: #fff; }
.hero-scroll-hint { margin-top: 34px; color: rgba(224,166,92,.68); letter-spacing: 4px; }

/* 导航品牌：弦续千年 + 分隔色条 */
.nav-brand { position: relative; color: #ece2cf; font-size: 17px; letter-spacing: 7px; padding-right: 72px; }
.nav-brand::after {
  content: "";
  position: absolute;
  left: calc(100% - 55px);
  top: 50%;
  width: 44px;
  height: 5px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #c65d4d 0 43%, transparent 43% 50%, #e0a65c 50% 100%);
  box-shadow: 12px 0 0 -1px #b3422f;
}

@media (max-width: 700px) {
  .nav-brand { font-size: 14px; letter-spacing: 2px; padding-right: 0; gap: 6px; }
  .nav-brand::after { display: none; }
  .nav-logo { width: 24px; height: 24px; }
  .hero-inner { margin-left: 6vw; padding-right: 20px; }
  .hero-title { font-size: clamp(46px, 16vw, 68px); letter-spacing: .08em; }
  .hero-eyebrow { letter-spacing: 4px; }
}