/* 首页沉浸影片舞台（r6《落地》· 2026-10-17，基于 2026-10-15 v1.1）
 * 所有视口一套几何：舞台 = 首个可用视口（视口高 − 页眉实测高 − 底部安全区），影片按自身比例 contain 居中。
 *   横屏视口放 16:9 电脑版，竖屏视口放 9:16 手机版（独立机位，不是裁切）；比例不合时，留边由舞台底色承接，
 *   绝不 cover 裁切，字幕与 Logo 始终完整。播放中旋转不换源，舞台按已加载的源（data-orient）保持比例。
 * 留边色调（data-tone）：开场暗色段与开场封面 → 墨色 #1F1C18；转亮之后、落版封面 → 页面底色 var(--ink)。
 * 控件：画内右下角一枚克制的胶囊（播放 / 声音 / 手机全屏 / 跳过·继续），避开两版字幕带
 *   （电脑字幕约在画面高 82–90%、居中；手机字幕约在 72–82%）。窄画面自动收紧。
 * 章节栏与阅读进度：舞台仍在视口内时收起（html[data-hero-stage="in"]，index 静态初值），状态只由 upgrade.js 写。
 * 选择器统一以 #top.hero-cinema 开头，压过 site / upgrade / immersive / paper / hero-focus 里历次 .hero 规则。 */

:root { --hero-header-h: 82px; }
@media (max-width: 900px) { :root { --hero-header-h: calc(104px + env(safe-area-inset-top, 0px)); } }
/* 以上是无脚本时的保底值；hero-cinema.js 会写入静止页眉的实测高度 */

#top.hero-cinema {
  display: block;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: var(--hero-header-h) 0 0;
  overflow: visible;
  background: var(--ink);
  color: var(--text);
  text-align: left;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
#top.hero-cinema::before, #top.hero-cinema::after { display: none; content: none; }
#top.hero-cinema > * { min-width: 0; }

/* ---------- 舞台与影片 ---------- */
#top.hero-cinema .hero-cinema__stage {
  --film-r: 1.7778; /* 宽 ÷ 高 */
  --stage-h: calc(100vh - var(--hero-header-h) - env(safe-area-inset-bottom, 0px));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--stage-h);
  min-height: 240px;
  background: #1F1C18;
  transition: background-color 1.2s ease;
}
@supports (height: 100svh) {
  #top.hero-cinema .hero-cinema__stage { --stage-h: calc(100svh - var(--hero-header-h) - env(safe-area-inset-bottom, 0px)); }
}
@media (orientation: portrait) { #top.hero-cinema .hero-cinema__stage { --film-r: .5625; } }
#top.hero-cinema .hero-cinema__stage[data-orient="landscape"] { --film-r: 1.7778; }
#top.hero-cinema .hero-cinema__stage[data-orient="portrait"] { --film-r: .5625; }
#top.hero-cinema .hero-cinema__stage[data-tone="paper"] { background: var(--ink); }

#top.hero-cinema .hero-cinema__film {
  position: relative;
  width: min(100%, calc(max(var(--stage-h), 240px) * var(--film-r)));
  aspect-ratio: var(--film-r);
  max-height: 100%;
  container-type: inline-size;
  isolation: isolate;
}
#top.hero-cinema .hero-cinema__film video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  filter: none;
  transform: none;
}
#top.hero-cinema .hero-cinema__poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease, visibility 0s linear 0s;
}
#top.hero-cinema .hero-cinema__poster img { display: block; width: 100%; height: 100%; object-fit: contain; }
#top.hero-cinema .hero-cinema__poster[data-cover="off"] { opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }

/* ---------- 控件：画内右下角胶囊，触控 ≥ 44 ---------- */
#top.hero-cinema .hero-cinema__controls {
  position: absolute;
  z-index: 2;
  right: clamp(8px, 1.6vw, 24px);
  bottom: clamp(8px, 1.6vw, 24px);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  color: #F2EDE4;
  background: rgba(31, 28, 24, .74);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
#top.hero-cinema .hero-cinema__controls[hidden] { display: none !important; }
#top.hero-cinema .hero-cinema__controls :is(button, a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .02em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
#top.hero-cinema .hero-cinema__controls :is(button, a):hover { background: rgba(242, 237, 228, .14); }
#top.hero-cinema .hero-cinema__controls :is(button, a):focus-visible { outline: 2px solid #F2EDE4; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(31, 28, 24, .85); }
/* 片尾停在落版：“继续”成为主动作 */
#top.hero-cinema .hero-cinema__stage[data-state="ended"] [data-film-skip] { color: #1F1C18; background: #F2EDE4; }
#top.hero-cinema .hero-cinema__stage[data-state="ended"] [data-film-skip]:hover { background: #fff; }
/* 策略静音后的轻提示：声音键前一个朱点，不弹错误条 */
#top.hero-cinema .hero-cinema__controls [data-film-sound][data-hint="policy"]::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: #E58A73;
}
/* 电脑舞台已占满首屏，不提供“全屏”；手机与竖屏保留 */
@media (min-width: 901px) and (min-aspect-ratio: 4/3) {
  #top.hero-cinema .hero-cinema__controls [data-film-fullscreen] { display: none; }
}
/* 窄画面（如 320 宽竖屏）：收紧间距，保证四个控件不出画 */
@container (max-width: 360px) {
  #top.hero-cinema .hero-cinema__controls { right: 6px; bottom: 6px; gap: 0; padding: 2px; }
  #top.hero-cinema .hero-cinema__controls :is(button, a) { padding-inline: 8px; font-size: 12px; letter-spacing: 0; }
}
/* 横版画面宽 < 1400（平板横放、横屏手机、1280 / 1366 / 1536 笔记本）：横版字幕带约在画面高 83–90%、宽 20–80%，
   右下角胶囊只有在画面宽 ≥ 1400 时才同时满足“左缘 ≥ 82% 宽、上缘 ≥ 90.5% 高”，
   更窄时改到右上角（那里只有天空段的装饰小字）；宽 < 720 时再收紧 */
@container (max-width: 1399px) {
  #top.hero-cinema .hero-cinema__stage[data-orient="landscape"] .hero-cinema__controls { top: clamp(6px, 1.4cqi, 16px); right: clamp(6px, 1.4cqi, 16px); bottom: auto; }
  #top.hero-cinema .hero-cinema__stage[data-orient="landscape"] .hero-cinema__status { top: auto; bottom: clamp(6px, 1.4cqi, 16px); left: clamp(6px, 1.4cqi, 16px); }
}
@container (max-width: 719px) {
  #top.hero-cinema .hero-cinema__stage[data-orient="landscape"] .hero-cinema__controls { gap: 0; padding: 2px; }
  #top.hero-cinema .hero-cinema__stage[data-orient="landscape"] .hero-cinema__controls :is(button, a) { padding-inline: 8px; font-size: 12px; letter-spacing: 0; }
}

#top.hero-cinema .hero-cinema__status {
  position: absolute;
  z-index: 2;
  top: clamp(8px, 1.6vw, 24px);
  left: clamp(8px, 1.6vw, 24px);
  max-width: min(46ch, calc(100% - 2 * clamp(8px, 1.6vw, 24px)));
  margin: 0;
  padding: 9px 15px;
  border-radius: 18px;
  color: #F2EDE4;
  background: rgba(31, 28, 24, .8);
  font-size: 13px;
  line-height: 1.6;
}
#top.hero-cinema .hero-cinema__status:empty { display: none; }
#top.hero-cinema .hero-cinema__status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
#top.hero-cinema .hero-cinema__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 署名：画外一行小字，可达、不抢画面 ---------- */
#top.hero-cinema .hero-cinema__credit {
  width: min(1200px, calc(100% - 2 * clamp(16px, 3vw, 48px)));
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
  text-align: right;
}
#top.hero-cinema .hero-cinema__credit a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
#top.hero-cinema .hero-cinema__credit a:is(:hover, :focus-visible) { color: var(--text); text-decoration-color: currentColor; }
#top.hero-cinema .hero-cinema__credit [data-film-file] { display: inline-flex; align-items: center; min-height: 44px; }
#top.hero-cinema .hero-cinema__noscript { width: min(1200px, calc(100% - 32px)); margin: 8px auto 0; color: var(--muted); font-size: 13px; }
@media (max-width: 900px) {
  #top.hero-cinema .hero-cinema__credit { width: auto; margin: 2px clamp(12px, 4vw, 16px) 0; text-align: left; }
}

/* ---------- 影片之后：FDE 定位自然承接（原文案与入口不变；“跳过 / 继续”落在这里） ---------- */
#top.hero-cinema .hero-cinema__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: 24px 64px;
  align-items: end;
  width: min(1200px, calc(100% - 2 * clamp(16px, 3vw, 48px)));
  margin: clamp(36px, 5vw, 64px) auto 0;
  padding: 0 0 clamp(36px, 5vw, 64px);
  scroll-margin-top: calc(var(--hero-header-h) + 24px);
  opacity: 1 !important;
  transform: none !important;
}
#top.hero-cinema .hero-cinema__position { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.8; letter-spacing: .03em; }
#top.hero-cinema .hero-cinema__title {
  max-width: none;
  margin: 0;
  color: var(--text);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: var(--serif);
  font-size: clamp(34px, 3.5vw, 54px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.015em;
  text-shadow: none;
}
#top.hero-cinema .hero-cinema__title span { display: block; color: inherit; }
#top.hero-cinema .hero-cinema__lead { max-width: 29em; margin: 0 0 15px; color: var(--muted); font-size: 15px; line-height: 1.9; }
#top.hero-cinema .hero-cinema__links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; padding: 0; }
#top.hero-cinema .hero-cinema__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); font-size: 14px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 6px; }
#top.hero-cinema .hero-cinema__links a:is(:hover, :focus-visible) { color: var(--zhu); text-decoration-color: currentColor; }
#top.hero-cinema :is(.hero-cinema__links, .hero-cinema__credit) a:focus-visible { outline: 2px solid var(--zhu); outline-offset: 3px; }
@media (max-width: 900px) {
  #top.hero-cinema .hero-cinema__copy { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 28px; }
  #top.hero-cinema .hero-cinema__title { font-size: clamp(30px, 6.5vw, 46px); }
  #top.hero-cinema .hero-cinema__lead { max-width: 36em; }
}
@media (max-width: 600px) {
  #top.hero-cinema .hero-cinema__copy { width: auto; margin: 24px 16px 0; padding-bottom: 32px; }
}

/* ---------- 页面级：舞台在视口内时收起章节栏与阅读进度（初值来自 index 静态 html[data-hero-stage="in"] 与 nav[inert]） ---------- */
/* width 过渡沿用 immersive.css 1280–1849 档的悬停展开 */
.section-rail { transition: width .28s var(--ease, ease), opacity .28s ease, visibility 0s linear 0s; }
html[data-hero-stage="in"] body .section-rail { opacity: 0; visibility: hidden; pointer-events: none; transition: width .28s var(--ease, ease), opacity .18s ease, visibility 0s linear .18s; }
/* 1280–1849 档章节栏是右距 12 px 的 54 px 竖条：内容右缘至少让出 82 px（栏宽 + 右距 + 16 px 间隙），
   否则 1280–1660 宽度下市场工作台、作品图、模板卡、路径面板、页脚会压到栏下。只改 main 与页脚，页眉不动。 */
@media (min-width: 1280px) and (max-width: 1849px) {
  main, .site-footer { --gutter: max(82px, 4.4vw); }
}
.reading-progress { transition: opacity .25s ease; }
html[data-hero-stage="in"] body .reading-progress { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  #top.hero-cinema *, #top.hero-cinema *::before, #top.hero-cinema *::after { animation: none !important; transition: none !important; }
  .section-rail, .reading-progress, #top.hero-cinema .hero-cinema__stage { transition: none !important; }
}
body.motion-off #top.hero-cinema *, body.motion-off #top.hero-cinema .hero-cinema__stage { animation: none !important; transition: none !important; }