/* ARCO film.css — 影片区、舞台、保护区、色域层、章节轨、正文区、弹窗、页首页脚。 */

/* ── 页首 ── */
.site-nav {
  position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: var(--nav-h);
  display: flex; align-items: center; gap: 28px; padding: 0 28px;
  border-bottom: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 1px 0 rgba(15,17,21,.05), 0 10px 30px -20px rgba(90,60,20,.25);
}
.site-nav > * { position: relative; z-index: 1; }
.site-nav .brand { display: flex; align-items: center; gap: 14px; flex: none; }
.site-nav .brand .cms { height: 22px; width: auto; }
.site-nav .brand .sep { width: 1px; height: 22px; background: rgba(15,17,21,.18); }
.site-nav .brand .lockup { height: 28px; width: auto; object-fit: contain; }
.site-nav nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.site-nav nav > a, .site-nav .dd > button {
  position: relative; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: 18px;
  font: 500 15px/1 var(--f-cn); color: var(--ink-2); background: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s;
}
.site-nav nav > a:hover, .site-nav .dd > button:hover { background: rgba(255,255,255,.6); color: var(--ink); }
.site-nav nav > a.is-active, .site-nav .dd.is-active > button { color: var(--ink); font-weight: 600; }
.site-nav nav > a.is-active::after, .site-nav .dd.is-active > button::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--c-med);
}
.site-nav .dd { position: relative; }
.site-nav .dd-menu {
  position: absolute; top: 44px; left: 0; min-width: 170px; padding: 8px; border-radius: 16px; display: grid; gap: 2px;
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .18s, transform .18s;
}
.site-nav .dd:hover .dd-menu, .site-nav .dd:focus-within .dd-menu { opacity: 1; transform: none; pointer-events: auto; }
.site-nav .dd-menu a { padding: 10px 12px; border-radius: 10px; font: 500 15px/1.2 var(--f-cn); color: var(--ink-2); }
.site-nav .dd-menu a:hover { background: var(--c-med-soft); color: var(--ink); }
@media (max-width: 1180px) { .site-nav nav > a, .site-nav .dd > button { padding: 0 8px; font-size: 14px; } .site-nav { gap: 14px; padding: 0 16px; } }

/* ── 影片区 ── */
.film { position: relative; }
.stage {
  position: relative; width: 100%; height: 100vh; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--bg-0), var(--bg-1));
  contain: layout paint;
}
.stage > * { position: absolute; }
.field { inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.field .blob {
  position: absolute; left: 0; top: 0; width: 100vw; height: 100vw; margin: -50vw 0 0 -50vw; border-radius: 50%;
  background: radial-gradient(closest-side, var(--bc) 0%, color-mix(in oklch, var(--bc) 82%, transparent) 30%, color-mix(in oklch, var(--bc) 40%, transparent) 62%, transparent 100%);
}
.world { left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; z-index: 2; }
.world > svg, .world > .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.world > .overlay { pointer-events: none; }
.world > .overlay > * { position: absolute; left: 0; top: 0; }
.world > .overlay .is-live { pointer-events: auto; }
.screen { inset: 0; z-index: 4; pointer-events: none; }
.screen > * { position: absolute; }
.screen svg { overflow: visible; }

/* 尾帧的同一组字母从四周汇入；透明点击区不添加玻璃盒或描边。 */
.tail-word { position: absolute; z-index: 7; border-radius: 999px; color: #704716; font-family: var(--f-en); font-weight: 800; line-height: 1; }
.tail-word span { position: absolute; left: 50%; top: 50%; pointer-events: none; }

/* 文字保护区面板 */
.tz { z-index: 6; pointer-events: none; color: var(--ink); opacity: 0; }
.tz .kicker { display: inline-block; font: 700 15px/1 var(--f-cn); letter-spacing: .14em; color: var(--c-med-ink); margin-bottom: 14px; }
.tz h2 { font-size: var(--fs-title); line-height: 1.12; letter-spacing: -.02em; }
.tz h2.s { font-size: var(--fs-title-s); }
.tz p.desc { margin-top: 14px; font-size: var(--fs-desc); line-height: 1.6; color: var(--ink-2); }
.tz ul.scenes { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.tz ul.scenes li { position: relative; padding-left: 18px; font-size: var(--fs-scene); line-height: 1.5; color: var(--ink-2); }
.tz ul.scenes li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--c-manual); }
.tz a, .tz .is-live { pointer-events: auto; }

/* 章节轨 */
.rail { position: fixed; z-index: 70; right: 18px; top: 50%; transform: translateY(-50%); display: grid; gap: 14px; }
.rail button {
  position: relative; width: 14px; height: 14px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center;
}
.rail button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(15,17,21,.28); transition: transform .3s var(--ease-out), background .3s; }
.rail button.is-on::before { background: var(--c-med); transform: scale(1.5); }
.rail button span {
  position: absolute; right: 22px; top: 50%; transform: translate(6px, -50%); white-space: nowrap; opacity: 0; pointer-events: none;
  padding: 6px 12px; border-radius: 12px; font: 500 14px/1.2 var(--f-cn); color: var(--ink);
  background: rgba(255,255,255,.92); box-shadow: var(--sh-1); transition: opacity .2s, transform .2s;
}
.rail button:hover span, .rail button:focus-visible span { opacity: 1; transform: translate(0, -50%); }
.rail.is-hidden { opacity: 0; pointer-events: none; transition: opacity .3s; }

/* reduced motion：影片区改为逐帧纵向排列 */
.film.is-rm .stage { position: relative; }
.film.is-rm .rm-frame { position: relative; height: 100vh; overflow: hidden; }

/* ── 正文区 ── */
.body-sec { position: relative; z-index: 1; padding: 120px 6vw 96px; max-width: min(1560px, 94vw); margin: 0 auto; content-visibility: auto; contain-intrinsic-size: auto 720px; }
.body-sec > header { max-width: 900px; margin-bottom: 48px; }
.body-sec > header .kicker { font: 700 15px/1 var(--f-cn); letter-spacing: .14em; color: var(--c-med-ink); }
.body-sec > header h2 { margin-top: 16px; font-size: var(--fs-title-s); line-height: 1.15; }
.body-sec > header p { margin-top: 16px; font-size: var(--fs-desc); color: var(--ink-2); }

/* ── 页脚 ── */
.site-foot { position: relative; z-index: 1; padding: 48px 6vw 56px; border-top: 1px solid var(--line-soft); background: rgba(255,255,255,.5); }
.site-foot .row { max-width: min(1560px, 94vw); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.site-foot .brand { display: flex; align-items: center; gap: 14px; }
.site-foot .brand img { height: 24px; width: auto; }
.site-foot .brand .lockup { height: 26px; width: auto; object-fit: contain; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font: 500 15px/1.6 var(--f-cn); color: var(--ink-3); }
.site-foot nav a:hover { color: var(--ink); }
.site-foot .note { flex-basis: 100%; font-size: 14px; color: var(--ink-3); }

/* ── 弹窗 ── */
.modal-back { position: fixed; inset: 0; z-index: 100; background: rgba(40,30,20,.18); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease-out); }
.modal-back.is-on { opacity: 1; pointer-events: auto; }
.modal {
  position: fixed; z-index: 101; left: 10vw; top: 7vh; width: 80vw; height: 86vh; border-radius: 32px; overflow: hidden;
  display: flex; flex-direction: column; color: var(--ink-2); visibility: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 40px 100px -30px rgba(90,60,20,.4);
  background: linear-gradient(155deg, rgba(255,255,255,.80), rgba(255,255,255,.62) 52%, rgba(255,251,245,.72));
}
.modal.is-on { visibility: visible; }
.modal .m-head { display: flex; align-items: flex-start; gap: 16px; padding: 28px 32px 18px; }
.modal .m-head h3 { font-size: 36px; line-height: 1.2; }
.modal .m-close { margin-left: auto; flex: none; width: 44px; height: 44px; border-radius: 22px; border: 0; cursor: pointer; font-size: 22px; color: var(--ink-2); background: rgba(255,255,255,.7); box-shadow: var(--sh-1); }
.modal .m-body { flex: 1; overflow: auto; padding: 0 32px 32px; overscroll-behavior: contain; }

/* qc：冻结时禁止 CSS 过渡 */
html[data-qc] *, html[data-qc] *::before, html[data-qc] *::after { transition: none !important; }