/* ==========================================================================
   css/hero.css —— 首屏：水墨太行
   说明：太行山用 SVG path（贝塞尔曲线）画成四层墨色远山，
        叠 feTurbulence 洇墨滤镜，山腰加雾；寂静里落一枚朱砂印。
        不使用 clip-path polygon。
   ========================================================================== */

#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 110px 22px 150px;
  overflow: hidden;
  isolation: isolate;
}

/* 天光：一点暖黄压在纸面上 */
.hero-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 18%, rgba(201, 162, 39, .13), transparent 42%),
    radial-gradient(circle at 78% 74%, rgba(178, 58, 43, .09), transparent 46%);
}

/* 太阳：一枚淡朱砂圆，慢慢呼吸 */
.hero-sun {
  position: absolute;
  top: 10%;
  left: 50%;
  width: min(36vw, 220px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 42% 38%,
    rgba(178, 58, 43, .30), rgba(178, 58, 43, .11) 60%, transparent 72%);
  filter: blur(1px);
  animation: hero-sun 9s ease-in-out infinite;
}

@keyframes hero-sun {
  0%, 100% { opacity: .72; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.05); }
}

/* ------------------------------------------------------------ 水墨太行 */
.mt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  pointer-events: none;
  z-index: 0;
}

.mt-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 四层远山：越远越淡、越虚 */
.mt-layer {
  will-change: transform;
  transition: transform .18s linear;
}

.mt-layer path {
  fill: currentColor;
}

.mt-layer .ridge {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
}

.mt-layer.l1 { color: rgba(31, 28, 26, .13); }
.mt-layer.l2 { color: rgba(31, 28, 26, .19); }
.mt-layer.l3 { color: rgba(31, 28, 26, .27); }
.mt-layer.l4 { color: rgba(31, 28, 26, .40); }

.mt-layer.l1 { filter: blur(2.4px) url(#inkBleed); }
.mt-layer.l2 { filter: blur(1.5px) url(#inkBleed); }
.mt-layer.l3 { filter: blur(.7px) url(#inkBleedSoft); }
.mt-layer.l4 { filter: url(#inkBleedSoft); }

/* 山腰雾带：一层一层压上去，山形就“退”远了 */
.hero-mist {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  z-index: 1;
  pointer-events: none;
  opacity: .6;
  background:
    linear-gradient(180deg, rgba(246, 240, 228, 0) 0%, rgba(246, 240, 228, .72) 46%, rgba(246, 240, 228, .96) 100%),
    linear-gradient(180deg, rgba(246, 240, 228, 0) 0%, rgba(246, 240, 228, .34) 30%, rgba(246, 240, 228, 0) 62%);
}

/* 雾里再补一缕流动的薄云 */
.hero-mist::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 34%;
  height: 26%;
  background: linear-gradient(90deg,
    transparent, rgba(255, 253, 246, .5) 30%, rgba(255, 253, 246, .62) 52%, transparent);
  filter: blur(14px);
  animation: hero-drift 26s ease-in-out infinite alternate;
}

@keyframes hero-drift {
  from { transform: translateX(-3%); }
  to   { transform: translateX(3%); }
}

/* ---------------------------------------------------------------- 正文 */
.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 900px;
  font-family: var(--font-kai);
  text-align: center;
}

.hero-eyebrow {
  font-family: var(--font-kai);
  font-size: clamp(.72rem, 2.4vw, .96rem);
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--gold);
  margin-bottom: 20px;
}

.hero-title {
  font-family: var(--font-kai);
  font-size: clamp(2.5rem, 9.4vw, 5.2rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-indent: .14em;
  line-height: 1.24;
  text-shadow: 0 2px 0 rgba(246, 240, 228, .7), 0 16px 34px rgba(31, 28, 26, .15);
}

.calligraphy-title {
  font-family: 'LXGW WenKai', var(--font-kai);
  font-weight: 400;
  letter-spacing: .1em;
  text-shadow: 0 1px 0 rgba(246, 240, 228, .75), 0 10px 24px rgba(31, 28, 26, .16);
}

.hero-title .red { color: var(--red); }

.hero-sub {
  margin-top: 20px;
  font-family: var(--font-kai);
  font-size: clamp(.98rem, 3.2vw, 1.4rem);
  letter-spacing: .1em;
  color: var(--ink-soft);
}

.hero-copy {
  max-width: 620px;
  margin: 26px auto 0;
  padding: 18px 6px;
  border-top: var(--line-gold);
  border-bottom: var(--line-gold);
  font-size: clamp(.9rem, 2.6vw, 1.02rem);
  letter-spacing: .04em;
  line-height: 2.15;
  color: var(--ink-soft);
}

.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 38px;
}

.hero-mark {
  margin-top: 30px;
  font-family: var(--font-kai);
  font-size: .82rem;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--ink-soft);
  opacity: .75;
}

/* ---------------------------------------------------------- 向下卷轴提示 */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 46px;
  z-index: 4;
  transform: translateX(-50%);
  font-family: var(--font-kai);
  font-size: .78rem;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--ink-soft);
  opacity: .72;
  animation: hero-hint 2.8s ease-in-out infinite;
}

.scroll-hint::after {
  content: "";
  display: block;
  width: 1px;
  height: 30px;
  margin: 10px auto 0;
  background: linear-gradient(180deg, rgba(31, 28, 26, .5), transparent);
}

@keyframes hero-hint {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-sun, .hero-mist::after, .scroll-hint { animation: none; }
}