/* 电影化样片：片名、古卷入口、真实位置聚焦与光缝。镜头投影与收藏保持原实现。 */

/* 正式字体：Source Han Serif CN 2.003R 子集，按 SIL OFL 1.1 改名分发。
   来源、字集和许可见 assets/fonts/README.md 与 LICENSE-SourceHanSerif.txt。 */
@font-face {
  font-family: "Xunguang Serif SC";
  src: url("../assets/fonts/XunguangSerifSC-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Xunguang Serif SC";
  src: url("../assets/fonts/XunguangSerifSC-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

#voyage { --v-cinema-serif: "Xunguang Serif SC", "Source Han Serif CN", "Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", serif; }

/* 宋体承载品牌、古卷与章节标题、星句和原文；说明、出处和按钮保持无衬线。 */
#voyage .v-brand > span { font-family: var(--v-cinema-serif); font-weight: 500; letter-spacing: .18em; }
#voyage .v-scroll-spine > span,
#voyage .v-scroll-copy h1,
#voyage .v-sky-heading h2,
#voyage .v-scroll-footnote,
#voyage .v-fragment,
#voyage .v-scroll-imprint { font-family: var(--v-cinema-serif); }
#voyage .v-scroll-spine > span,
#voyage .v-scroll-copy h1,
#voyage .v-sky-heading h2 { font-weight: 500; }
#voyage .v-story-heading h2 { font-size: clamp(27px, 3.4vw, 46px); }
#voyage .v-story-page-text,
#voyage .v-story-colophon > span,
#voyage .v-story-heading h2,
#voyage .v-source-note blockquote { font-family: var(--v-cinema-serif); }
#voyage .v-story-hint { font-family: var(--font-body); }
#voyage .v-star-text { font-family: var(--v-cinema-serif); font-weight: 500; }

/* 片名先定住，观众决定何时展卷。纸面与暖光为同一条入场线索。 */
.v-opening { position: absolute; inset: 0; z-index: 14; isolation: isolate; display: grid; place-items: center; padding: 108px 24px 70px; overflow: clip; background: radial-gradient(ellipse at 50% 42%, rgb(40 58 56 / .3), transparent 64%); }
.v-opening-copy { position: relative; z-index: 2; width: 100%; max-width: 900px; text-align: center; }
.v-opening-kicker { margin: 0; color: #a7ac96; font-size: 11px; letter-spacing: .36em; }
#voyage .v-opening-title { display: flex; justify-content: center; gap: .16em; margin: 25px 0 28px; color: #e7dec9; font: 500 clamp(64px, 8.8vw, 112px)/1.3 var(--v-cinema-serif); }
.v-opening-title > span { display: block; }
.v-opening-subtitle { margin: 0; color: #c1bca6; font-size: 14px; line-height: 1.9; letter-spacing: .25em; }
.v-opening-note { margin: 21px 0 0; color: #84978d; font-size: 12px; line-height: 1.9; letter-spacing: .15em; }
.v-opening-tonight { margin-top: 28px; }
.v-tonight-kicker { margin: 0; color: #c9ae77; font-size: 10px; letter-spacing: .32em; }
.v-tonight-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 840px; margin: 10px auto 0; }
.v-tonight-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 7px 8px; border: 1px solid rgb(201 174 119 / .18); background: rgb(12 23 27 / .38); color: #c7c2ab; cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; }
.v-tonight-item:hover, .v-tonight-item:focus-visible { color: #ead9af; border-color: rgb(201 174 119 / .62); background: rgb(201 174 119 / .06); }
.v-tonight-item:focus-visible { outline: 2px solid #c9ae77; outline-offset: 2px; }
.v-tonight-title { font-size: 12.5px; letter-spacing: .06em; white-space: nowrap; }
.v-tonight-item small { color: #84978d; font-size: 9.5px; letter-spacing: .08em; }
.v-opening-actions { display: flex; align-items: center; justify-content: center; gap: 34px; margin-top: 34px; }
#voyage .v-opening-actions button { min-height: 48px; font-size: 13px !important; }
.v-opening-actions .v-ink-button { min-width: 206px; border-color: rgb(201 174 119 / .44); background: rgb(201 174 119 / .025); }
.v-opening-actions .v-ink-button:hover { background: rgb(201 174 119 / .1); }
.v-opening-colophon { position: absolute; bottom: 31px; left: 20px; right: 20px; margin: 0; text-align: center; color: #60746d; font-size: 10px; letter-spacing: .28em; }
.v-opening-paper { position: absolute; z-index: -1; top: 57%; left: 9%; width: 82%; height: 33%; transform: perspective(900px) rotateX(66deg) rotateZ(-5deg); border-top: 1px solid rgb(203 180 132 / .32); background: repeating-linear-gradient(0deg, transparent 0 22px, rgb(201 174 119 / .11) 23px, transparent 24px), linear-gradient(110deg, transparent 8%, rgb(201 174 119 / .09) 48%, transparent 86%); mask-image: linear-gradient(90deg, transparent, #000 25% 75%, transparent); pointer-events: none; }
.v-opening-light { position: absolute; z-index: 1; left: 12%; top: 47%; width: 76%; height: 1px; background: linear-gradient(90deg, transparent, rgb(216 192 143 / .15) 15%, rgb(236 218 171 / .62) 50%, transparent 85%); transform-origin: left center; pointer-events: none; }
.v-cinematic .v-scroll { animation: none; transition: none; }
.v-cinematic .v-board-glyphs { display: none; }
.v-cinematic[data-stage="boarding"] .v-scroll { transform: none; opacity: 1; }
.v-cinematic[data-stage="boarding"] .v-sky { animation: none; }
.v-cinematic[data-stage="boarding"] .v-star-field { opacity: 1; }
.v-intro-thread { position: absolute; z-index: 28; height: 1px; background: linear-gradient(90deg, transparent, #d8bf8b 15% 85%, transparent); transform-origin: center; pointer-events: none; }
.v-intro-constellation { position: absolute; inset: 0; z-index: 28; pointer-events: none; }
.v-intro-constellation > i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #e6d19f; box-shadow: 0 0 12px rgb(217 190 131 / .5); }
#voyage .v-skip-transition { position: absolute; z-index: 35; right: clamp(24px, 4vw, 72px); bottom: 28px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--v-line); background: #0c171b; font-size: 12px !important; }
.v-cinematic[data-stage="title"] .v-chapters,
.v-cinematic[data-stage="unsealing"] .v-chapters { visibility: hidden; }

.v-motion { flex-shrink: 0; border: 0; border-bottom: 1px solid rgb(201 174 119 / .3); padding: 9px 0; background: none; color: #b7b59b; font-size: 11px !important; letter-spacing: .06em; }
.v-motion:hover { color: #ead9af; border-color: #c9ae77; }
.v-cinematic .v-portal-scrim { animation: none; background: radial-gradient(ellipse at 50% 43%, #152329 0%, #0b151c 42%, #050b11 83%); }
.v-cinematic[data-stage="focus"] .v-portal-scrim { animation: v-cinema-shade .65s both; }
.v-cinematic .v-portal-wall { display: none; }
.v-cinematic .v-reading-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100px 24px 80px; }
.v-cinematic .v-reading-center::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: min(78vw, 940px); height: 54%; top: 17%; background: radial-gradient(ellipse, rgb(166 157 117 / .08), transparent 68%); }
.v-cinematic .v-reading-center::after { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 17% 7% 27%; opacity: .32; background: radial-gradient(circle at 8% 62%, #cfbd89 0 1px, transparent 2px), radial-gradient(circle at 94% 30%, #a6bdbe 0 1px, transparent 2px), radial-gradient(circle at 76% 83%, #a6bdbe 0 .7px, transparent 1.7px); }
.v-cinematic .v-reading-center > .v-eyebrow { opacity: 1; animation: none; color: #a4b0ad; font-size: 12px; letter-spacing: .26em; }
.v-cinematic .v-portal-verse { flex: 0 0 auto; margin: 32px 0 30px; gap: .10em; max-width: 94%; font: 500 clamp(58px, 8.7vw, 126px)/1.36 var(--v-cinema-serif); color: #e0d4b9; letter-spacing: .07em; }
.v-cinematic .v-portal-verse.is-long { max-width: 1040px; font-size: clamp(30px, 5.7vw, 76px); }
.v-cinematic .v-portal-character { transition: color .25s ease, text-shadow .25s ease; }
.v-cinematic .v-portal-character.is-read { color: #f0e2bd; text-shadow: 0 0 35px rgb(235 204 142 / .10); }
.v-cinematic .v-portal-character.is-speaking { color: #fff1cf; text-shadow: 0 0 26px rgb(235 204 142 / .25); }
.v-cinematic .v-reading-rule { width: 148px; margin: 0 0 24px; background: #354241; }
.v-cinematic .v-reading-rule span { background: #cdb47e; }
.v-cinematic .v-reading-caption { font-size: 13px; line-height: 1.8; color: #b0b9ad; letter-spacing: .12em; }
.v-cinematic .v-reading-actions { margin-top: 32px; gap: 38px; opacity: 1; }
.v-cinematic .v-reading-actions:focus-within { opacity: 1 !important; transform: none !important; }
.v-cinematic .v-reading-actions button { font-size: 13px !important; min-height: 44px; }
.v-cinematic .v-portal-header > span { font-size: 12px; color: #a0afa5; }
.v-cinematic [data-phase="morph"] .v-portal-character { animation: none; }
.v-cinematic [data-phase="morph"] .v-reading-center > :not(.v-portal-verse) { animation: none; transition: none; }
.v-cinematic .v-story { animation: none; }
.v-cinematic .v-story-heading h2 { font-family: var(--v-cinema-serif); font-weight: 500; letter-spacing: .12em; }
.v-cinematic .v-source-note blockquote { font-family: var(--v-cinema-serif); }
.v-portal.is-bridging .v-story { position: absolute; top: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; opacity: 0; pointer-events: none; }
.v-portal.is-bridging .v-scene-hole { transform: scale(1); transition: none; }
.v-cinema-ray { position: absolute; z-index: 6; width: 3px; border-radius: 2px; background: #f2d99e; box-shadow: 0 0 12px 2px rgb(242 213 158 / .8), 0 0 52px 11px rgb(214 173 96 / .3), 0 0 130px 30px rgb(178 137 68 / .12); transform-origin: center top; pointer-events: none; will-change: transform, opacity; }
/* 归舱副本只负责视觉接力；真实星句、镜头与可读原文始终留在原处。 */
.v-return-phrase { position: absolute; z-index: 45; display: inline-block; margin: 0; padding: 0; white-space: nowrap; pointer-events: none; color: #eedbb0; text-shadow: 0 0 26px rgb(232 199 129 / .22); will-change: transform, opacity; }
.v-cinematic .v-star.is-returning { animation: v-cinema-return-star 1.6s ease both; }
.v-cinematic[data-motion="reduced"] .v-star.is-returning { animation: none; }
@keyframes v-cinema-return-star { from { filter: drop-shadow(0 0 16px rgb(226 189 117 / .55)); } to { filter: none; } }
@keyframes v-cinema-shade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) {
  .v-opening { padding: 104px 22px 74px; }
  #voyage .v-opening-title { font-size: clamp(44px, 13.7vw, 60px); gap: .12em; margin: 28px 0 24px; }
  .v-opening-kicker { font-size: 10px; letter-spacing: .26em; }
  .v-opening-subtitle { max-width: 22em; margin-inline: auto; font-size: 12px; letter-spacing: .12em; }
  .v-opening-note { max-width: 21em; margin: 19px auto 0; font-size: 12px; letter-spacing: .08em; }
  .v-opening-tonight { margin-top: 20px; }
  .v-tonight-kicker { font-size: 9px; letter-spacing: .24em; }
  .v-tonight-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
  .v-tonight-item { min-height: 50px; padding: 6px 4px; }
  .v-tonight-title { font-size: 11.5px; letter-spacing: 0; }
  .v-tonight-item small { font-size: 9px; }
  .v-opening-actions { flex-direction: column; gap: 13px; margin-top: 26px; }
  .v-opening-actions .v-ink-button { width: 220px; }
  .v-opening-paper { left: -10%; width: 120%; top: 60%; height: 24%; }
  .v-opening-colophon { bottom: 24px; font-size: 9px; }
  #voyage .v-skip-transition { right: 18px; bottom: 18px; }
  #voyage .v-brand > span { letter-spacing: .14em; }
  #voyage .v-story-heading h2 { font-size: 34px; }
  .v-cinematic .v-header { padding-left: 16px; padding-right: 16px; gap: 8px; }
  .v-cinematic .v-header-actions { gap: 10px; }
  .v-cinematic .v-header .v-data-count { display: none; }
  .v-cinematic .v-motion { font-size: 10px !important; }
  .v-cinematic .v-reading-center { padding: 88px 18px 70px; }
  .v-cinematic .v-portal-verse { margin: 30px 0 27px; gap: .06em; font-size: clamp(44px, 12.5vw, 72px); letter-spacing: .02em; }
  .v-cinematic .v-portal-verse.is-long { font-size: clamp(28px, 7vw, 44px); max-width: 96%; }
  .v-cinematic .v-reading-center > .v-eyebrow { font-size: 11px; letter-spacing: .15em; }
  .v-cinematic .v-reading-caption { font-size: 12px; letter-spacing: .06em; }
  .v-cinematic .v-reading-actions { gap: 28px; }
}
@media (max-height: 660px) {
  /* 短屏首屏改为本阶段内的纵向滚动，让第五张卡与两个主入口都能到达。 */
  .v-opening {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    justify-content: safe center;
    height: 100dvh;
    bottom: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-top: 108px;
    padding-bottom: 48px;
  }
  .v-opening-actions { margin-top: 24px; gap: 10px; }
  #voyage .v-opening-title { margin-top: 17px; margin-bottom: 17px; }
  .v-opening-note { margin-top: 12px; }
  .v-opening-tonight { margin-top: 12px; }
  .v-tonight-list { margin-top: 2px; }
  .v-opening-actions { margin-top: 16px; }
  .v-opening-colophon { bottom: 12px; }
}
@media (max-height: 660px) {
  /* 诵读阶段只滚动本阶段，页面头部和返回按钮留在原位；故事阶段不受影响。 */
  #voyage[data-stage="focus"] .v-portal,
  #voyage[data-stage="reading"] .v-portal,
  #voyage[data-stage="morph"] .v-portal {
    bottom: auto;
    height: 100dvh;
  }
  #voyage[data-stage="focus"] .v-cinematic .v-reading-center,
  #voyage[data-stage="reading"] .v-cinematic .v-reading-center,
  #voyage[data-stage="morph"] .v-cinematic .v-reading-center {
    justify-content: flex-start;
    justify-content: safe center;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #voyage:not([data-motion="full"]) .v-portal-scrim { animation: none; }
}