.home-page main {
  position: relative;
}

.home-page .hero {
  isolation: isolate;
  --home-parallax-x: 0px;
  --home-parallax-y: 0px;
}

.home-page .hero-art {
  transform: translate3d(var(--home-parallax-x), var(--home-parallax-y), 0);
  transition: transform 900ms var(--ease-ink);
  will-change: transform;
}

.home-page .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 0 8%, color-mix(in srgb, var(--ink) 20%, transparent) 18%, transparent 46%),
    url("./assets/hutao-ink/PaperTexture.webp") center / 680px auto repeat;
  mix-blend-mode: multiply;
  transform: translate3d(-18%, 0, 0) scaleX(0.7);
}

.home-page.motion-home-opening .hero::before {
  animation: homeInkOpening var(--home-open-duration, 2200ms) var(--ease-ink) both;
}

.home-page.motion-home-opening .hero-copy > *,
.home-page.motion-home-opening .hero-actions {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

.home-page.motion-home-ready .hero-copy > *,
.home-page.motion-home-ready .hero-actions {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-slow) var(--ease-ink), transform var(--motion-slow) var(--ease-ink);
}

.jianghu-route {
  position: absolute;
  z-index: 1;
  top: calc(100vh + 40px);
  bottom: 280px;
  left: clamp(18px, 4vw, 72px);
  width: 44px;
  pointer-events: none;
}

.jianghu-route svg {
  position: sticky;
  top: 18vh;
  display: block;
  width: 44px;
  height: 64vh;
  overflow: visible;
}

.jianghu-route path {
  fill: none;
  stroke: color-mix(in srgb, var(--cinnabar) 66%, var(--ink));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--route-progress, 0));
  opacity: 0.76;
}

.jianghu-route span {
  position: absolute;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cinnabar) 72%, var(--ink));
  background: var(--paper);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cinnabar) 10%, transparent);
  transform: translate(-50%, -50%) scale(0.76);
  opacity: 0.42;
  transition: opacity var(--motion-normal) var(--ease-ink), transform var(--motion-normal) var(--ease-ink);
}

.jianghu-route span.is-lit {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.jianghu-route span:nth-of-type(1) { top: 8%; }
.jianghu-route span:nth-of-type(2) { top: 22%; }
.jianghu-route span:nth-of-type(3) { top: 36%; }
.jianghu-route span:nth-of-type(4) { top: 50%; }
.jianghu-route span:nth-of-type(5) { top: 64%; }
.jianghu-route span:nth-of-type(6) { top: 78%; }
.jianghu-route span:nth-of-type(7) { top: 92%; }

@keyframes homeInkOpening {
  0% { opacity: 0; transform: translate3d(-28%, 0, 0) scaleX(0.25); }
  16% { opacity: 0.55; }
  54% { opacity: 0.35; transform: translate3d(15%, 0, 0) scaleX(1.18); }
  100% { opacity: 0; transform: translate3d(56%, 0, 0) scaleX(1.55); }
}

@media (max-width: 900px) {
  .jianghu-route {
    left: 10px;
    width: 22px;
    opacity: 0.42;
  }

  .jianghu-route svg {
    width: 22px;
    height: 54vh;
  }

  .jianghu-route span {
    width: 8px;
    height: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .hero-art {
    transform: none;
    transition: none;
  }

  .home-page.motion-home-opening .hero::before {
    animation: none;
  }

  .home-page.motion-home-opening .hero-copy > *,
  .home-page.motion-home-opening .hero-actions,
  .home-page.motion-home-ready .hero-copy > *,
  .home-page.motion-home-ready .hero-actions {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* 修复首页视频播放键出现双圆环的问题 */
.home-page .home-video-visual > .media-play-button .media-play-button__icon {
  position: static !important;
  display: block !important;
  flex: 0 0 auto;
  width: 0 !important;
  height: 0 !important;
  margin: 0 0 0 4px !important;
  border: 0 !important;
  border-top: 9px solid transparent !important;
  border-bottom: 9px solid transparent !important;
  border-left: 14px solid #f6ecdc !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.home-page .home-video-visual > .media-play-button::before,
.home-page .home-video-visual > .media-play-button .media-play-button__icon::before {
  content: none !important;
}
/* ===== Homepage readability and spacing repair v2 ===== */
@media (min-width: 901px) {
  .home-page .about-section {
    min-height: auto !important;
    padding-top: clamp(76px, 7vw, 108px) !important;
    padding-bottom: clamp(82px, 7.5vw, 116px) !important;
  }
}

@media (max-width: 840px) {
  .home-page .section {
    width: min(100% - 28px, 1180px) !important;
    padding: 56px 0 !important;
  }

  .home-page .section-heading {
    gap: 10px !important;
    margin-bottom: 28px !important;
  }

  .home-page .section-heading h2 {
    font-size: clamp(42px, 13vw, 62px) !important;
    line-height: 1.08;
  }

  .home-page .section-heading > p {
    font-size: 14px;
    line-height: 1.75;
  }

  .home-page .article-card h3,
  .home-page .home-video-card h3,
  .home-page .card-content p,
  .home-page .home-video-card p {
    display: block !important;
    overflow: visible !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  .home-page .article-card,
  .home-page .home-video-card {
    min-height: 0 !important;
  }

  .home-page .card-visual,
  .home-page .home-video-visual {
    min-height: 170px !important;
  }

  .home-page .card-content,
  .home-page .home-video-card > div:last-child {
    min-width: 0;
    padding: 20px !important;
  }

  .home-page .hero {
    min-height: max(640px, 92svh) !important;
  }

  .home-page .hero-copy {
    width: calc(100% - 28px) !important;
    left: 14px !important;
    bottom: 24px !important;
    padding: 18px !important;
  }

  .home-page .hero h1 {
    font-size: clamp(52px, 17vw, 78px) !important;
  }

  .home-page .hero-verse {
    margin-top: 16px !important;
    font-size: 18px !important;
    line-height: 1.65;
  }

  .home-page .hero-actions {
    margin-top: 16px !important;
    gap: 10px !important;
  }

  .home-page .about-section {
    width: 100% !important;
    gap: 24px !important;
    min-height: 0 !important;
    padding: 64px 16px !important;
  }

  .home-page .about-copy {
    padding: 24px 20px !important;
  }

  .home-page .about-copy::before {
    display: none !important;
  }

  .home-page .about-copy blockquote {
    font-size: clamp(21px, 7vw, 28px) !important;
  }

  .home-page .kurumi-portal {
    min-height: 440px !important;
    padding-block: 64px !important;
  }

  .home-page .message-section {
    min-height: 0 !important;
    padding: 64px 14px !important;
  }

  .home-page .message-inner {
    width: 100% !important;
    padding: 26px 18px !important;
  }

  .home-page .message-inner h2 {
    white-space: normal !important;
    font-size: clamp(38px, 11vw, 54px) !important;
    line-height: 1.2;
  }

  .home-page .links-collapsible {
    max-height: none !important;
    overflow: visible !important;
  }

  .home-page .links-collapsible::after,
  .home-page .links-toggle {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .home-page .section {
    width: min(100% - 20px, 1180px) !important;
  }
}

/* ===== V4_LAYOUT_FONT_PERFORMANCE: homepage layout ===== */
@media (min-width: 901px) {
  .home-page .about-section {
    grid-template-columns: minmax(250px, 330px) minmax(460px, 560px) !important;
    justify-content: center;
    gap: clamp(44px, 5vw, 82px) !important;
    min-height: 0 !important;
    padding:
      clamp(48px, 5vw, 72px)
      max(30px, calc((100vw - 1040px) / 2))
      clamp(54px, 5.5vw, 78px) !important;
  }

  .home-page .portrait-panel {
    width: min(310px, 100%) !important;
    margin-top: 0 !important;
    justify-self: end;
  }

  .home-page .about-copy {
    width: min(540px, 100%) !important;
    max-width: 540px !important;
    justify-self: start;
  }

  .home-page .about-copy::before {
    top: clamp(62px, 5vw, 74px) !important;
    left: clamp(24px, 2.6vw, 38px) !important;
    max-width: none !important;
    font-size: clamp(38px, 3.3vw, 52px) !important;
    line-height: 1.08 !important;
    letter-spacing: 0.015em !important;
    white-space: nowrap;
  }

  .home-page .section-heading h2 {
    font-size: clamp(38px, 3.8vw, 56px) !important;
    line-height: 1.08;
    white-space: nowrap;
  }

  .home-page .message-inner h2 {
    font-size: clamp(40px, 4vw, 58px) !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .home-page .about-section {
    grid-template-columns: minmax(230px, 290px) minmax(420px, 500px) !important;
    gap: clamp(34px, 4vw, 58px) !important;
  }

  .home-page .about-copy::before {
    font-size: clamp(34px, 3.8vw, 44px) !important;
  }

  .home-page .section-heading h2,
  .home-page .message-inner h2 {
    font-size: clamp(36px, 4.5vw, 50px) !important;
  }
}

@media (max-width: 840px) {
  .home-page .section-heading h2,
  .home-page .message-inner h2 {
    white-space: normal !important;
  }
}