/* 动效与新组件。动效只在 html.mo（开启动效）时生效；否则内容直接显示。 */
:root { --ease2: cubic-bezier(.16, 1, .3, 1); --ease3: cubic-bezier(.7, 0, .2, 1); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel] { overscroll-behavior: contain; }

/* ---------- 导航收起 ---------- */
.nav { transition: transform .5s var(--ease2); }
body.nav-up .nav { transform: translateY(-100%); }
.progress { transition: top .5s var(--ease2); }
body.nav-up .progress { top: 0; }

/* ---------- 胶片颗粒 ---------- */
html.mo body::after {
  content: ""; position: fixed; inset: -50%; z-index: 92; pointer-events: none; opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-3%, 2%); } 33% { transform: translate(2%, -4%); }
  50% { transform: translate(-4%, -1%); } 67% { transform: translate(3%, 3%); } 83% { transform: translate(-1%, 4%); } 100% { transform: translate(0, 0); }
}

/* ---------- 光标 ---------- */
html.has-cursor body *:not(input):not(textarea):not(select) { cursor: none !important; }
html.has-cursor .hall-stage, html.has-cursor .hall-stage * { cursor: default !important; }
html.has-cursor .hall-stage .person, html.has-cursor .hall-stage .person *, html.has-cursor .hall-stage button { cursor: pointer !important; }
html.has-cursor .hall-stage.dragging, html.has-cursor .hall-stage.dragging * { cursor: grabbing !important; }
.cursor { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; opacity: 0; transition: opacity .25s; }
.cursor.on { opacity: 1; }
.cursor.hide { opacity: 0; }
.cursor .dot { position: fixed; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.cursor .ring {
  position: fixed; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid rgba(216, 38, 28, .7); display: flex; align-items: center; justify-content: center;
  transition: width .35s var(--ease2), height .35s var(--ease2), left .35s var(--ease2), top .35s var(--ease2), background .3s, border-color .3s;
}
.cursor .ring b { font-family: var(--f-display); font-size: 13px; font-weight: 900; color: #fff; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cursor.link .ring { width: 56px; height: 56px; left: -28px; top: -28px; background: rgba(216, 38, 28, .12); }
.cursor.label .ring { width: 84px; height: 84px; left: -42px; top: -42px; background: var(--red); border-color: var(--red); }
.cursor.label .ring b { opacity: 1; }
.cursor.label .dot { opacity: 0; }
.cursor.down .ring { width: 30px; height: 30px; left: -15px; top: -15px; }

/* ---------- 显现 ---------- */
html.mo [data-rv="up"], html.mo [data-rv="para"], html.mo [data-rv="note"], html.mo [data-rv="same"] {
  opacity: 0; transform: translate3d(0, 46px, 0);
  transition: opacity .9s var(--ease) var(--d, 0ms), transform 1.2s var(--ease2) var(--d, 0ms);
}
html.mo [data-rv="para"] { transform: translate3d(0, 22px, 0); transition-duration: .8s, 1s; }
html.mo [data-rv="note"] { transform: translate3d(40px, 0, 0); }
html.mo [data-rv].in { opacity: 1; transform: none; }

html.mo [data-rv="left"] { opacity: 0; transform: translate3d(-60px, 0, 0); transition: opacity .8s var(--ease) var(--d), transform 1.1s var(--ease2) var(--d); }

/* 逐字 */
.hero h1 .cw { display: inline-block; }
.cw { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .06em 0 .1em; margin: -.06em 0 -.1em; }
.ch { display: inline-block; }
html.mo [data-rv="chars"] .ch { transform: translate3d(0, 112%, 0) rotate(7deg); transform-origin: 0 100%; transition: transform 1.05s var(--ease2) calc(var(--d, 0ms) + var(--i) * 32ms); }
html.mo [data-rv="chars"].in .ch { transform: none; }

/* 区块标题 */
html.mo [data-rv="head"] .idx, html.mo [data-rv="head"] h1 { clip-path: inset(0 0 100% 0); transform: translateY(30%); transition: clip-path .9s var(--ease2), transform 1s var(--ease2); }
html.mo [data-rv="head"] h2, html.mo [data-rv="head"] p { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease) .15s, transform .9s var(--ease2) .15s; }
html.mo [data-rv="head"] .rule { transform: skewX(-40deg) scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease3) .25s; }
html.mo [data-rv="head"].in .idx, html.mo [data-rv="head"].in h1 { clip-path: inset(0 0 -10% 0); transform: none; }
html.mo [data-rv="head"].in h2, html.mo [data-rv="head"].in p { opacity: 1; transform: none; }
html.mo [data-rv="head"].in .rule { transform: skewX(-40deg) scaleX(1); }
.page-title[data-rv="head"] h1[data-rv="chars"] { clip-path: none !important; transform: none !important; }

/* 时间轴：胶片卷入 */
html.mo [data-rv="film"] .strip { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease3); }
html.mo [data-rv="film"] .strip .holes { transform: translateX(-120px); transition: transform 1.8s var(--ease2); }
html.mo [data-rv="film"] .tl-mark { opacity: 0; transition: opacity .5s 1.1s, transform .25s var(--ease), background .2s; }
html.mo [data-rv="film"] .tl-scale, html.mo [data-rv="film"] .tl-hint { opacity: 0; transition: opacity .8s .9s; }
html.mo [data-rv="film"].in .strip { clip-path: inset(0 0 0 0); }
html.mo [data-rv="film"].in .strip .holes { transform: none; }
html.mo [data-rv="film"].in .tl-mark, html.mo [data-rv="film"].in .tl-scale, html.mo [data-rv="film"].in .tl-hint { opacity: 1; }

/* 卡片：一块纸色遮罩从下往上收起（不对被观察的元素本身裁切，否则 IntersectionObserver 会认为它不可见） */
html.mo [data-rv="card"]::after { content: ""; position: absolute; inset: -4px; background: var(--paper); z-index: 4; transform-origin: 50% 0; transition: transform 1.1s var(--ease3) var(--d); pointer-events: none; }
html.mo [data-rv="card"].in::after { transform: scaleY(0); }
html.mo [data-rv="card"] .c-art svg { transform: scale(1.25); transition: transform 1.6s var(--ease2) var(--d); }
html.mo [data-rv="card"] .c-body > * { opacity: 0; transform: translateY(14px); transition: opacity .6s calc(var(--d) + .45s), transform .8s var(--ease2) calc(var(--d) + .45s); }
html.mo [data-rv="card"].in .c-art svg { transform: scale(1); }
html.mo [data-rv="card"].in .c-body > * { opacity: 1; transform: none; }
.card .c-art svg { transition: transform .8s var(--ease2); }
.card:hover .c-art svg { transform: scale(1.06) !important; }

/* 观众席缩略图 */
html.mo [data-rv="seats"] i { opacity: 0; transform: scale(.3); transition: opacity .4s calc(var(--w, 0) * 22ms), transform .6s var(--ease2) calc(var(--w, 0) * 22ms), background .3s; }
html.mo [data-rv="seats"].in i { opacity: 1; transform: none; }

/* 文章小标题 */
html.mo [data-rv="h2"] { opacity: 0; transform: translateX(-24px); transition: opacity .7s var(--ease), transform 1s var(--ease2); }
html.mo [data-rv="h2"]::before { transform: rotate(-180deg) scale(0); transition: transform .9s var(--ease2) .1s; }
html.mo [data-rv="h2"].in { opacity: 1; transform: none; }
html.mo [data-rv="h2"].in::before { transform: none; }

/* 引文：纸色遮罩向右收起 */
html.mo [data-rv="quote"]::after { content: ""; position: absolute; inset: -2px -2px -2px 10px; background: var(--paper); transform-origin: 100% 50%; transition: transform 1.1s var(--ease3); }
html.mo [data-rv="quote"].in::after { transform: scaleX(0); }
html.mo [data-rv="quote"] .qt, html.mo [data-rv="quote"] cite { opacity: 0; transition: opacity .7s .7s; }
html.mo [data-rv="quote"].in .qt, html.mo [data-rv="quote"].in cite { opacity: 1; }

/* 插图显影：先是负片，进入视野后冲洗成正片 */
html.mo [data-rv="develop"] .fig-art { clip-path: inset(0 0 100% 0); filter: invert(1) grayscale(1) contrast(1.2); transition: clip-path 1.2s var(--ease3), filter 1.8s var(--ease) .7s; }
html.mo [data-rv="develop"].in .fig-art { clip-path: inset(0 0 0 0); filter: none; }
html.mo [data-rv="develop"] figcaption { opacity: 0; transition: opacity .8s 1.2s; }
html.mo [data-rv="develop"].in figcaption { opacity: 1; }

/* 档案年代条 */
html.mo [data-rv="bars"] i { transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease2); }
html.mo [data-rv="bars"] div:nth-child(2) i { transition-delay: .06s; } html.mo [data-rv="bars"] div:nth-child(3) i { transition-delay: .12s; }
html.mo [data-rv="bars"] div:nth-child(4) i { transition-delay: .18s; } html.mo [data-rv="bars"] div:nth-child(5) i { transition-delay: .24s; }
html.mo [data-rv="bars"] div:nth-child(6) i { transition-delay: .3s; } html.mo [data-rv="bars"] div:nth-child(7) i { transition-delay: .36s; }
html.mo [data-rv="bars"] div:nth-child(8) i { transition-delay: .42s; }
html.mo [data-rv="bars"].in i { transform: none; }

/* 同一年 */
html.mo [data-rv="same"] li { opacity: 0; transform: translateX(-16px); transition: opacity .5s, transform .7s var(--ease2); }
html.mo [data-rv="same"].in li { opacity: 1; transform: none; }
html.mo [data-rv="same"].in li:nth-child(1) { transition-delay: .35s; } html.mo [data-rv="same"].in li:nth-child(2) { transition-delay: .5s; }
html.mo [data-rv="same"].in li:nth-child(3) { transition-delay: .65s; } html.mo [data-rv="same"].in li:nth-child(4) { transition-delay: .8s; }
html.mo [data-rv="same"].in li:nth-child(5) { transition-delay: .95s; }

/* ---------- 转场 ---------- */
.wipe { clip-path: none !important; background: none; }
.wipe i { position: absolute; inset: -10% -30%; transform: translateX(-130%) skewX(-18deg); }
.wipe i.a { background: var(--red); }
.wipe i.b { background: var(--ink); }
.wipe b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--f-display); font-weight: 900; font-size: 64px; letter-spacing: .3em; color: var(--paper); opacity: 0; }
.wipe.go i.a { animation: wipeA .78s var(--ease3) forwards; }
.wipe.go i.b { animation: wipeA .78s var(--ease3) .08s forwards; }
.wipe.go b { animation: wipeB .78s var(--ease) .08s forwards; }
@keyframes wipeA { 0% { transform: translateX(-130%) skewX(-18deg); } 48% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(130%) skewX(-18deg); } }
@keyframes wipeB { 0%, 30% { opacity: 0; } 45%, 58% { opacity: 1; } 75%, 100% { opacity: 0; } }

/* ---------- 首页：跑马灯 ---------- */
.marquee { position: relative; height: 214px; overflow: hidden; background: var(--paper); border-bottom: 3px solid var(--ink); }
.mq { position: absolute; left: -5%; right: -5%; white-space: nowrap; overflow: hidden; }
.mq .track { display: inline-flex; will-change: transform; }
.mq span { font-family: var(--f-num); font-weight: 900; font-size: 64px; letter-spacing: .04em; padding: 0 22px; line-height: 1.15; display: inline-flex; align-items: center; gap: 44px; }
.mq span::after { content: ""; width: 18px; height: 18px; background: currentColor; transform: rotate(45deg); display: inline-block; }
.mq1 { top: 22px; background: var(--ink); color: var(--paper); transform: rotate(-2.2deg); padding: 6px 0; z-index: 2; }
.mq1 span:nth-child(3n+2) { color: var(--red); }
.mq2 { top: 122px; background: var(--red); color: var(--ink); transform: rotate(1.6deg); padding: 4px 0; }
.mq2 span { font-family: var(--f-display); font-size: 46px; letter-spacing: .12em; }
.mq2 span:nth-child(odd) { -webkit-text-stroke: 1.5px var(--ink); color: transparent; }

/* ---------- 首页：头条卡片横排 ---------- */
.cards .card:first-child { grid-column: 1 / -1; flex-direction: row; }
.cards .card:first-child .c-art { flex: 0 0 58%; aspect-ratio: 16 / 8; border-bottom: 0; border-right: 3px solid var(--ink); }
.cards .card:first-child .c-body { padding: 34px 40px; justify-content: center; }
.cards .card:first-child h3 { font-size: 46px; }
.cards .card:first-child p { font-size: 18px; }

/* ---------- 首页：头图数字 ---------- */
.hero-stats { position: absolute; right: calc(max(48px, (100% - 1280px) / 2) + 60px); bottom: 26px; display: flex; gap: 0; z-index: 3; }
.hero-stats .hs { background: var(--paper); border: 3px solid var(--ink); border-left-width: 0; padding: 8px 16px 6px; min-width: 128px; }
.hero-stats .hs:first-child { border-left-width: 3px; }
.hero-stats .hs b { display: block; font-family: var(--f-num); font-weight: 900; font-size: 30px; line-height: 1; }
.hero-stats .hs b em { font-style: normal; font-size: 15px; margin-left: 3px; }
.hero-stats .hs small { font-family: var(--f-display); font-size: 12px; color: var(--gray); }
.hero-stats .hs.red { background: var(--red); color: #fff; }
.hero-stats .hs.red small { color: rgba(255, 255, 255, .8); }
.hero .art svg .pl { will-change: transform; }

/* ---------- 首页：横向长卷 ---------- */
.journey { position: relative; height: 520vh; background: var(--ink); color: var(--paper); }
.j-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.j-head { display: flex; align-items: flex-end; gap: 18px; padding: calc(var(--nav-h) + 28px) max(48px, calc((100% - 1280px) / 2)) 18px; }
.j-head .idx { font-family: var(--f-num); font-weight: 900; font-size: 56px; line-height: .8; color: var(--red); }
.j-head h2 { font-size: 30px; color: var(--paper); }
.j-head p { margin: 0; color: #9c9486; font-size: 15px; }
.j-head .hint { margin-left: auto; font-family: var(--f-display); font-size: 13px; color: #9c9486; display: flex; align-items: center; gap: 10px; }
.j-head .hint i { width: 18px; height: 28px; border: 2px solid #9c9486; border-radius: 10px; position: relative; }
.j-head .hint i::after { content: ""; position: absolute; left: 50%; top: 5px; width: 2px; height: 6px; background: var(--red); transform: translateX(-50%); animation: wheelHint 1.6s infinite; }
@keyframes wheelHint { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 10px); } }
.j-track { flex: 1; display: flex; align-items: stretch; will-change: transform; padding-left: max(48px, calc((100% - 1280px) / 2)); }
.j-panel { flex: 0 0 min(1040px, 78vw); margin-right: 64px; position: relative; display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: center; padding: 10px 0 40px; text-decoration: none; color: inherit; }
.j-year { position: absolute; left: -10px; top: 0; font-family: var(--f-num); font-weight: 900; font-size: 30vh; line-height: .8; color: transparent; -webkit-text-stroke: 2px rgba(235, 229, 214, .2); pointer-events: none; z-index: 0; white-space: nowrap; }
.j-panel.on .j-year { -webkit-text-stroke-color: rgba(216, 38, 28, .7); }
.j-art { position: relative; z-index: 1; aspect-ratio: 16 / 10; overflow: hidden; border: 3px solid var(--paper); box-shadow: 16px 16px 0 var(--red); max-height: 56vh; transition: box-shadow .6s var(--ease2); }
.j-panel:not(.on) .j-art { box-shadow: 0 0 0 var(--red); }
.j-art svg { width: 100%; height: 100%; display: block; }
.j-info { position: relative; z-index: 1; }
.j-info .j-y { font-family: var(--f-num); font-weight: 900; font-size: 64px; line-height: 1; color: var(--red); }
.j-info .j-place { font-family: var(--f-display); font-weight: 700; font-size: 15px; color: #bdb5a5; display: block; margin: 6px 0 14px; }
.j-info h3 { font-size: 34px; color: var(--paper); }
.j-info .by { margin: 4px 0 14px; font-family: var(--f-display); font-size: 14px; color: #9c9486; }
.j-info p { margin: 0 0 18px; font-size: 17px; line-height: 1.8; color: #e0d8c4; }
.j-info .go { font-family: var(--f-display); font-weight: 700; font-size: 14px; border-bottom: 2px solid var(--red); padding-bottom: 2px; }
.j-panel:hover .go { color: var(--red); }
.j-bar { position: absolute; left: max(48px, calc((100% - 1280px) / 2)); right: max(48px, calc((100% - 1280px) / 2)); bottom: 26px; height: 22px; display: flex; justify-content: space-between; align-items: center; border-top: 2px solid rgba(235, 229, 214, .2); }
.j-bar i { position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--red); transform-origin: left; transform: scaleX(0); }
.j-bar span { font-family: var(--f-num); font-weight: 800; font-size: 15px; color: #6d665d; padding-top: 8px; transition: color .3s; cursor: pointer; }
.j-bar span.on { color: var(--paper); }
html:not(.mo) .journey { height: auto; }
html:not(.mo) .j-sticky { position: relative; height: auto; }
html:not(.mo) .j-track { overflow-x: auto; padding-bottom: 60px; }
html:not(.mo) .j-panel { min-height: 460px; }

/* ---------- 文章：新的正文块 ---------- */
.article-body { grid-template-columns: 1fr 680px 1fr; column-gap: 48px; --wide-r: calc(-1 * min(260px, (100vw - 680px) / 2 - 40px)); }
@media (max-width: 1320px) { .side-note { float: none; width: auto; margin: 1.4em 0; } }
@media (max-width: 1260px) { .article-body .toc { display: none; } }
.article-body .toc { grid-column: 1; justify-self: end; width: 200px; position: relative; }
.toc-in { position: sticky; top: calc(var(--nav-h) + 48px); font-family: var(--f-display); font-size: 13px; transition: top .5s var(--ease2); }
body.nav-up .toc-in { top: 48px; }
.toc-in .t { font-family: var(--f-num); font-weight: 800; letter-spacing: .2em; color: var(--red); font-size: 12px; margin-bottom: 10px; }
.toc-in a { display: flex; gap: 10px; padding: 6px 0 6px 12px; text-decoration: none; color: var(--gray); border-left: 2px solid var(--line); transition: color .25s, border-color .25s, padding .3s var(--ease2); line-height: 1.45; }
.toc-in a span { font-family: var(--f-num); font-weight: 800; color: inherit; opacity: .7; }
.toc-in a:hover { color: var(--ink); }
.toc-in a.on { color: var(--ink); border-left-color: var(--red); padding-left: 18px; font-weight: 700; }
.article-body .text { grid-column: 2; position: relative; }
.article-body .lead { font-size: 20px; line-height: 1.9; text-indent: 0; }
.article-body .lead::first-letter { float: left; font-family: var(--f-display); font-weight: 900; font-size: 4.2em; line-height: .9; color: var(--red); margin: .08em .14em 0 0; }
.article-body h2 .n { font-family: var(--f-num); font-weight: 900; color: var(--gray); font-size: 18px; margin-left: auto; letter-spacing: .1em; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); clear: right; margin: 2.2em var(--wide-r) 2.2em 0; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.stats .st { padding: 20px 22px 18px; border-left: 1px solid var(--line); }
.stats .st:first-child { border-left: 0; }
.stats .v { font-family: var(--f-num); font-weight: 900; font-size: 58px; line-height: 1; color: var(--red); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats .v em { font-style: normal; font-family: var(--f-display); font-size: 17px; color: var(--ink); margin-left: 4px; font-weight: 700; }
.stats .x { font-family: var(--f-display); font-size: 13px; line-height: 1.55; color: #4d4841; margin-top: 8px; }

.same-box { clear: right; margin: 2.4em var(--wide-r) 2.4em 0; background: var(--ink); color: var(--paper); padding: 26px 34px 24px; display: grid; grid-template-columns: 170px 1fr; gap: 28px; position: relative; overflow: hidden; }
.same-box::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: var(--red); opacity: .9; }
.same-box .k { font-family: var(--f-display); font-weight: 700; font-size: 13px; color: #9c9486; }
.same-box .y { font-family: var(--f-num); font-weight: 900; font-size: 44px; line-height: 1; color: var(--red); margin-top: 6px; }
.same-box ul { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.same-box li { padding: 7px 0 7px 22px; position: relative; font-size: 15px; line-height: 1.7; border-bottom: 1px solid rgba(235, 229, 214, .12); }
.same-box li:last-child { border-bottom: 0; }
.same-box li::before { content: ""; position: absolute; left: 0; top: 16px; width: 10px; height: 10px; background: var(--red); transform: rotate(45deg); }

.side-note { float: right; clear: right; width: 230px; margin: .3em -290px 1em 0; font-family: var(--f-display); font-size: 13px; line-height: 1.7; color: #4d4841; border-top: 3px solid var(--red); padding-top: 10px; text-indent: 0; }
.side-note b { display: block; font-family: var(--f-num); letter-spacing: .2em; font-size: 11px; color: var(--red); margin-bottom: 4px; }

.fig { clear: right; margin: 2.6em var(--wide-r) 2.6em 0; }
.fig-art { aspect-ratio: 16 / 9; overflow: hidden; border: 3px solid var(--ink); background: var(--ink); }
.fig-art svg { width: 100%; height: 100%; display: block; will-change: transform; }
.fig figcaption { font-family: var(--f-display); font-size: 13px; color: var(--gray); margin-top: 10px; padding-left: 14px; border-left: 3px solid var(--red); }

.article-head .art svg { will-change: transform; }

/* ---------- 观众席入场 ---------- */
html.mo .hall-stage.wave .seat-empty, html.mo .hall-stage.wave .person:not(.enter) { animation: seatIn .8s var(--ease2) both; animation-delay: calc(var(--r) * 45ms + var(--c) * 10ms); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes seatIn { from { opacity: 0; transform: translateY(14px) scale(.6); } to { opacity: 1; transform: none; } }
html.mo .screen { animation: flicker 6s infinite; }
@keyframes flicker { 0%, 100% { filter: brightness(1); } 47% { filter: brightness(1); } 48% { filter: brightness(.94); } 49% { filter: brightness(1.03); } 50% { filter: brightness(.97); } 51% { filter: brightness(1); } }

/* ---------- 地图入场 ---------- */
html.mo .map-svg .route-m { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.8s var(--ease3) 1.1s; }
html.mo .map-svg.in .route-m { stroke-dashoffset: 0; }
html.mo .map-svg .land { opacity: 0; transition: opacity 1.2s; }
html.mo .map-svg .route { stroke-dashoffset: 0; }
html.mo .map-svg.in .land { opacity: 1; }
html.mo .map-svg .pin { opacity: 0; transform: translateY(-14px); transition: opacity .5s, transform .7s var(--ease2); transform-box: fill-box; }
html.mo .map-svg.in .pin { opacity: 1; transform: none; }
.map-svg .pin.minor text { opacity: 0; transition: opacity .3s; }
.map-svg.zoomed .pin.minor text { opacity: 1; }
.map-zoom { position: absolute; right: 14px; top: 14px; display: flex; gap: 8px; }
.map-wrap { position: relative; }
.map-stage { position: relative; }

@media (prefers-reduced-motion: reduce) {
  html.mo body::after { display: none; }
}
[hidden] { display: none !important; }
.map-zoom .btn { background: var(--paper); }
html:not(.mo) .j-head .hint { display: none; }
.nav .mo-toggle { align-self: center; margin-right: 14px; background: none; border: 2px solid var(--ink); font-family: var(--f-display); font-size: 13px; font-weight: 700; padding: 4px 10px; }
.nav .mo-toggle b { color: var(--red); }
.nav .mo-toggle:hover { background: var(--ink); color: var(--paper); }

/* =========================================================
   第三轮：视差与交互
   ========================================================= */

/* 页头 */
.issue-head, .article-head { overflow: hidden; }
.hero .scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 3; font-family: var(--f-display); font-size: 12px; font-weight: 700; letter-spacing: .3em; color: var(--ink); pointer-events: none; }
.hero .scroll-cue i { width: 2px; height: 44px; background: linear-gradient(var(--ink) 0 50%, transparent 50%); background-size: 100% 200%; animation: cue 1.6s var(--ease3) infinite; }
@keyframes cue { 0% { background-position: 0 100%; } 100% { background-position: 0 -100%; } }
html:not(.mo) .hero .scroll-cue { display: none; }
.hero .art svg .pl { transform-box: fill-box; transform-origin: 50% 50%; }

/* 背景大字 */
.has-bw, .hall-teaser { position: relative; overflow-x: clip; }
.has-bw > .wrap, .hall-teaser > .wrap { position: relative; z-index: 1; }
.bgword {
  position: absolute; top: 4px; left: -3%; z-index: 0; pointer-events: none; white-space: nowrap;
  font-family: var(--f-num); font-weight: 900; font-size: clamp(140px, 17vw, 260px); line-height: .9; letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 2px rgba(20, 18, 16, .075); will-change: translate;
}
.bgword.r { left: auto; right: -3%; }
.bgword.dark { -webkit-text-stroke-color: rgba(235, 229, 214, .07); top: auto; bottom: -20px; }

/* 插图框内视差：图比框高一点，在框里滑动，不裁左右 */
.fig-art { aspect-ratio: 16 / 8.4; }
.fig-art svg { height: 107.2%; position: relative; top: -3.6%; will-change: translate; }

/* 文字随滚动显影 */
.scrub .sc { opacity: clamp(.13, calc((var(--p, 0) * (var(--n) + 16) - var(--i)) / 16), 1); }
blockquote .scrub .sc { opacity: clamp(.18, calc((var(--p, 0) * (var(--n) + 10) - var(--i)) / 10), 1); }

/* 页脚：主体内容像幕布一样拉起，露出下面的页脚 */
#main { position: relative; z-index: 1; background: var(--paper); }
.foot { position: sticky; bottom: 0; z-index: 0; padding-bottom: 0; overflow: hidden; }
.foot-big { margin-top: 26px; padding: 0 max(48px, calc((100% - 1280px) / 2)); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.foot-big span {
  font-family: var(--f-display); font-weight: 900; font-size: clamp(120px, 15vw, 230px); line-height: .78; letter-spacing: .08em;
  color: transparent; -webkit-text-stroke: 2px #4a443d; display: block;
  transform: translateY(calc((1 - var(--fp, 1)) * 55%)); transition: -webkit-text-stroke-color .4s;
}
.foot:hover .foot-big span { -webkit-text-stroke-color: var(--red); }
.foot-big em { font-style: normal; font-family: var(--f-num); font-weight: 800; letter-spacing: .3em; font-size: 13px; color: #6d665d; padding-bottom: 18px; opacity: var(--fp, 1); }
body.has-banner .foot { padding-bottom: 32px; }
html:not(.mo) .foot { position: relative; }

/* 返回顶部胶片盘 */
.reel { position: fixed; right: 24px; bottom: 24px; width: 64px; height: 64px; z-index: 70; border: 0; padding: 0; background: none; opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; transition: opacity .4s, transform .5s var(--ease2), bottom .4s; }
.reel.on { opacity: 1; transform: none; pointer-events: auto; }
.reel svg { width: 64px; height: 64px; display: block; overflow: visible; }
.reel .trk { fill: var(--paper); stroke: rgba(20, 18, 16, .2); stroke-width: 3; }
.reel .bar { fill: none; stroke: var(--red); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 32px 32px; }
.reel .spin { transform-origin: 32px 32px; }
.reel .disc { fill: var(--ink); }
.reel .hole { fill: var(--paper); }
.reel span { position: absolute; left: 50%; top: -24px; transform: translateX(-50%); font-family: var(--f-num); font-weight: 900; font-size: 12px; letter-spacing: .2em; background: var(--ink); color: var(--paper); padding: 1px 7px; opacity: 0; transition: opacity .25s; }
.reel:hover span { opacity: 1; }
.reel:hover svg { transform: scale(1.08); transition: transform .3s var(--ease2); }
body.has-banner .reel { bottom: 56px; }

/* 悬停预览 */
.hover-pv { position: fixed; left: 0; top: 0; width: 300px; z-index: 150; pointer-events: none; opacity: 0; scale: .85; transition: opacity .25s, scale .35s var(--ease2); }
.hover-pv.on { opacity: 1; scale: 1; }
.hover-pv .hp-art { aspect-ratio: 16 / 9; border: 3px solid var(--ink); background: var(--ink); overflow: hidden; box-shadow: 10px 10px 0 var(--red); }
.hover-pv .hp-art svg { width: 100%; height: 100%; display: block; }
.hover-pv .hp-cap { margin-top: 8px; display: inline-block; background: var(--ink); color: var(--paper); font-family: var(--f-display); font-weight: 700; font-size: 13px; padding: 3px 10px; max-width: 100%; }
.hover-pv .hp-cap:empty { display: none; }

/* 按钮涟漪 */
.btn, .btn-seat, .mo-toggle, .seg button { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .28; transform: scale(0); pointer-events: none; animation: rip .7s var(--ease) forwards; }
@keyframes rip { to { transform: scale(1); opacity: 0; } }

/* 观众席缩略图聚光 */
.mini-hall { position: relative; }
.mini-hall::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; mix-blend-mode: screen;
  background: radial-gradient(180px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 236, 200, .28), rgba(216, 38, 28, .08) 45%, transparent 70%); }
.mini-hall.lit::after { opacity: 1; }

/* 时间轴播放头 */
.tl-head { position: absolute; top: -6px; bottom: -6px; left: 0; width: 2px; margin-left: -1px; background: var(--red); opacity: 0; pointer-events: none; z-index: 2; transition: opacity .2s; }
.tl-head.on { opacity: 1; }
.tl-head b { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); font-family: var(--f-display); font-size: 12px; font-weight: 700; padding: 2px 9px; white-space: nowrap; line-height: 1.6; }
.tl-head.snap b { display: none; }
.tl-head::before { content: ""; position: absolute; bottom: -2px; left: 50%; width: 10px; height: 10px; background: var(--red); transform: translate(-50%, 50%) rotate(45deg); }
.timeline .tl-scale { margin-top: 10px; }

/* 已读标记 */
.card .read-mark { position: absolute; top: 14px; left: 14px; z-index: 3; background: var(--red); color: #fff; font-family: var(--f-display); font-weight: 700; font-size: 12px; padding: 2px 9px; }
.card .read-mark.part { background: var(--ink); color: var(--paper); }

/* 续读提示 */
.resume { position: fixed; left: 50%; bottom: 28px; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px;
  background: var(--ink); color: var(--paper); font-family: var(--f-display); font-size: 14px; box-shadow: 6px 6px 0 var(--red);
  transform: translate(-50%, 160%); transition: transform .7s var(--ease2); }
.resume.on { transform: translate(-50%, 0); }
.resume b { color: var(--red); font-family: var(--f-num); font-size: 18px; }
.resume .go { background: var(--red); color: #fff; border: 0; padding: 6px 14px; font-weight: 700; }
.resume .x { background: none; border: 0; color: #9c9486; font-size: 20px; line-height: 1; padding: 0 6px; }
body.has-banner .resume { bottom: 60px; }

/* 阅读剩余时间 */
.progress .left { position: absolute; right: 40px; top: 0; line-height: 18px; font-family: var(--f-display); font-weight: 700; font-size: 11px; color: #cfc7b7; }

/* =========================================================
   第四轮：借鉴参考站的入口、转场与常驻控件
   ========================================================= */

/* 入口：胶片倒计时 */
html.gated, html.gated body { overflow: hidden; }
.gate { position: fixed; inset: 0; z-index: 400; background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  clip-path: circle(150% at 50% 46%); transition: clip-path 1.15s var(--ease3); }
.gate::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
.gate.out { clip-path: circle(0% at 50% 46%); pointer-events: none; }
.g-top { position: absolute; left: 0; right: 0; top: 28px; display: flex; justify-content: space-between; padding: 0 40px; font-family: var(--f-display); font-size: 13px; color: var(--gray); letter-spacing: .08em; }
.g-top b { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 22px; letter-spacing: .15em; }
.g-top b i { width: 14px; height: 14px; border-radius: 50%; background: var(--red); }
.g-leader { position: relative; width: 240px; height: 240px; border-radius: 50%; overflow: hidden; background: #d9d1bd; }
.g-sweep { position: absolute; inset: 0; background: conic-gradient(var(--red) var(--a, 0deg), transparent 0); opacity: .9; }
.g-leader svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 2.2; }
.g-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-num); font-weight: 900; font-size: 128px; line-height: 1; color: var(--ink); }
.g-status { position: relative; width: min(560px, 90vw); height: 58px; display: flex; align-items: center; justify-content: center; }
.g-load { font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: .2em; color: var(--ink); transition: opacity .4s; }
.g-load em { font-style: normal; font-family: var(--f-num); color: var(--red); margin-left: 6px; }
.g-btns { position: absolute; left: 50%; top: 50%; translate: -50% -50%; white-space: nowrap; display: flex; gap: 12px; align-items: center; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .5s .1s, transform .6s var(--ease2) .1s; }
.gate.ready .g-load { opacity: 0; }
.gate.ready .g-btns { opacity: 1; transform: none; pointer-events: auto; }
.gate.ready .g-leader { animation: leaderPulse 2.4s ease-in-out infinite; }
@keyframes leaderPulse { 50% { transform: scale(1.03); } }
.g-enter { position: relative; overflow: hidden; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: 999px; padding: 12px 30px; font-family: var(--f-display); font-weight: 900; font-size: 17px; letter-spacing: .1em; white-space: nowrap; }
.g-enter i { font-style: normal; display: inline-block; transition: transform .3s var(--ease2); }
.g-enter:hover { background: var(--red); border-color: var(--red); }
.g-enter:hover i { transform: translateX(6px); }
.g-mute { background: none; border: 0; font-family: var(--f-display); font-size: 14px; color: var(--gray); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; padding: 8px 4px; }
.g-mute:hover { color: var(--ink); }
.g-hint { position: absolute; bottom: 26px; margin: 0; font-family: var(--f-display); font-size: 12px; color: var(--gray); letter-spacing: .1em; }
.cursor { z-index: 500; }

/* 灯暗下来：钉住的过渡场景 */
.ld { position: relative; height: 330vh; background: var(--paper); }
.ld-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ld-horizon { position: absolute; left: 50%; top: 100%; border-radius: 50%; background: var(--ink); will-change: transform; }
.ld-horizon::before, .ld-horizon::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.ld-horizon::before { inset: -22px; border: 2px solid var(--red); }
.ld-horizon::after { inset: -64px; border: 1px solid rgba(20, 18, 16, .25); }
.ld-text { position: absolute; left: 50%; top: 50%; width: min(980px, 80vw); margin-left: max(-490px, -40vw); transform: translateY(-50%); text-align: center; z-index: 2; will-change: transform, opacity; }
.ld-text { top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: none; }
.ld-inv { position: absolute; inset: 0; z-index: 2; pointer-events: none; clip-path: circle(0 at 50% 200%); }
.ld-inv .ld-quote, .ld-inv .ld-idx span { color: var(--paper); }
.ld-inv .ld-idx svg { stroke: var(--paper); }
.ld-inv .ld-label { color: #ff5a4a; }
.ld-inv .ld-label::before { background: #ff5a4a; }
html:not(.mo) .ld-inv { display: none; }
.ld-idx { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.ld-idx svg { position: absolute; inset: 0; fill: none; stroke: var(--ink); stroke-width: 1.5; transform: rotate(-90deg); }
.ld-idx circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ld-idx span { font-family: var(--f-num); font-weight: 800; font-size: 20px; }
.ld-label { font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .25em; color: var(--red); margin-bottom: 26px; display: flex; align-items: center; gap: 10px; }
.ld-label::before { content: ""; width: 7px; height: 7px; background: var(--red); transform: rotate(45deg); }
.ld-quote { font-family: var(--f-body); font-weight: 600; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.55; margin: 0; color: var(--ink); text-wrap: balance; }
.ld-beams { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.ld-beams line { stroke: rgba(235, 229, 214, .28); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ld-beams line:nth-child(7) { stroke: rgba(216, 38, 28, .7); }
.ld-ring { position: absolute; left: 50%; top: 50%; width: min(56vh, 460px); aspect-ratio: 1; z-index: 3; opacity: 0; transform: translate(-50%, -50%) scale(.82); will-change: transform, opacity; }
.ld-ring svg { width: 100%; height: 100%; overflow: visible; }
.ld-ring .perf { fill: none; stroke: var(--paper); stroke-width: 10; stroke-dasharray: 6 10; opacity: .5; }
.ld-ring .in { fill: rgba(216, 38, 28, .12); stroke: var(--red); stroke-width: 2; }
.ld-ring .spin { transform-origin: 200px 200px; }
.ld-ring text { font-family: var(--f-num); font-weight: 800; font-size: 21px; letter-spacing: 4px; fill: var(--paper); }
.ld-count { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--paper); text-align: center; }
.ld-count b { font-family: var(--f-num); font-weight: 900; font-size: clamp(40px, 5vh, 62px); line-height: 1.1; color: var(--paper); font-variant-numeric: tabular-nums; margin: 6px 0; }
.ld-count small { font-family: var(--f-display); font-size: 13px; color: #bdb5a5; letter-spacing: .08em; }
.ld-pill { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); z-index: 4; height: 40px; min-width: 240px; border: 1.5px solid var(--ink); border-radius: 999px; display: grid; place-items: center; overflow: hidden; transition: border-color .5s; }
.ld-pill span { grid-area: 1 / 1; padding: 0 22px; font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: .12em; color: var(--ink); white-space: nowrap; transform: translateY(120%); opacity: 0; transition: transform .6s var(--ease2), opacity .4s, color .5s; }
.ld-pill span.on { transform: none; opacity: 1; }
.ld.dark .ld-pill { border-color: rgba(235, 229, 214, .5); }
.ld.dark .ld-pill span { color: var(--paper); }
html:not(.mo) .ld { height: auto; }
html:not(.mo) .ld-stage { position: relative; height: auto; overflow: visible; }
html:not(.mo) .ld-text { position: relative; inset: auto; margin: 0 auto; padding: 100px 0; }
html:not(.mo) .ld-horizon, html:not(.mo) .ld-beams, html:not(.mo) .ld-pill { display: none; }
html:not(.mo) .ld-ring { position: relative; left: auto; top: auto; margin: 0 auto; opacity: 1; transform: none; }
html:not(.mo) .ld-stage::after { content: ""; display: block; height: 90px; }
html:not(.mo) .ld { background: var(--ink); }
html:not(.mo) .ld-text { background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); }
html:not(.mo) .ld-ring { margin-top: 90px; }
.journey { margin-top: -1px; }

/* 弧形纸面 */
.arcsec { overflow: visible !important; }
.arc-cap { position: absolute; left: -20%; right: -20%; top: -150px; height: 300px; border-radius: 50%; background: var(--paper); transform-origin: 50% 100%; z-index: 0; pointer-events: none; box-shadow: 0 -18px 0 -16px var(--red); }
.arcsec > .wrap, .arcsec > .bgword { z-index: 1; }
.hall-teaser { padding-bottom: 150px; }
html:not(.mo) .arc-cap { display: none; }
html:not(.mo) .hall-teaser { padding-bottom: 56px; }

/* 左下章节指示 */
.chap { position: fixed; left: 28px; bottom: 24px; z-index: 65; display: flex; align-items: flex-end; gap: 16px; opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .5s var(--ease2), bottom .4s; pointer-events: none; }
.chap.on { opacity: 1; transform: none; pointer-events: auto; }
.chap .c-now { display: flex; align-items: baseline; gap: 8px; font-family: var(--f-display); color: var(--ink); transition: color .4s; min-width: 150px; }
.chap .c-now b { font-family: var(--f-num); font-weight: 900; font-size: 26px; color: var(--red); line-height: 1; }
.chap .c-now span { font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.chap.flip .c-now { animation: chapFlip .5s var(--ease2); }
@keyframes chapFlip { from { opacity: 0; transform: translateY(8px); } }
.chap .c-bars { display: flex; gap: 6px; padding-bottom: 6px; }
.chap .c-bars button { width: 22px; height: 14px; border: 0; padding: 0; background: none; position: relative; }
.chap .c-bars button i { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: rgba(20, 18, 16, .2); overflow: hidden; transition: background .4s; }
.chap .c-bars button i::after { content: ""; position: absolute; inset: 0; background: var(--red); transform-origin: left; transform: scaleX(var(--f, 0)); }
.chap .c-bars button.on { width: 36px; }
.chap .c-bars button:hover i { background: rgba(20, 18, 16, .45); }
html.tone-l-dark .chap .c-now { color: var(--paper); }
html.tone-l-dark .chap .c-bars button i { background: rgba(235, 229, 214, .25); }
html.tone-l-dark .chap .c-bars button:hover i { background: rgba(235, 229, 214, .5); }
body.has-banner .chap { bottom: 50px; }

/* 放映机声音开关 */
.snd { position: fixed; right: 100px; bottom: 37px; z-index: 70; display: flex; align-items: center; gap: 8px; background: var(--paper); border: 1.5px solid rgba(20, 18, 16, .55); border-radius: 999px; padding: 5px 14px 5px 10px; box-shadow: 0 6px 18px -10px rgba(0,0,0,.5); color: var(--ink); font-family: var(--f-display); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.snd svg { width: 36px; height: 20px; overflow: hidden; }
.snd path { fill: none; stroke: currentColor; stroke-width: 2; transform: scaleY(.08); transform-origin: 0 12px; transition: transform .5s var(--ease2); }
html.snd-on .snd path { transform: scaleY(1); animation: wave 1.1s linear infinite; }
@keyframes wave { from { translate: 0 0; } to { translate: -30px 0; } }
.snd:hover { color: var(--red); }
html.snd-on .snd { color: var(--red); border-color: var(--red); }
body.has-banner .snd { bottom: 68px; }