/* 第四轮整页：主角是他。每段一个他所在地方的场景图，宋体标题，灯笼暖黄点题 */
:root {
  --ink: #07090c;
  --fg: #eef1f3;
  --fg-2: rgba(238, 241, 243, .66);
  --lamp: #f0c27a;
  --line: rgba(255, 255, 255, .12);
  --pad: clamp(20px, 6vw, 96px);
}
body { background: var(--ink); color: var(--fg); }
.wrap { position: relative; width: min(1180px, 100%); margin: 0 auto; padding: 0 var(--pad); }
.kicker { font-size: 13px; letter-spacing: .24em; color: var(--lamp); margin-bottom: 14px; }
h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 4.4vw, 52px); line-height: 1.3; letter-spacing: .03em; margin-bottom: 16px; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.body { font-size: clamp(15px, 1.4vw, 18px); color: rgba(238,241,243,.85); max-width: 32em; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.fine { font-size: 12px; color: var(--fg-2); }
.reveal { opacity: 0; transform: translateY(10px); transition: opacity 1.2s ease, transform 1.2s ease; }
.reveal.in { opacity: 1; transform: none; }
.seg { position: relative; }
.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shade { position: absolute; inset: 0; pointer-events: none; }
.fig { position: absolute; width: auto; max-width: none; pointer-events: none; }
.more { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); font-size: 12px; letter-spacing: .24em; color: var(--fg-2); white-space: nowrap; opacity: 0; transition: opacity .5s; }
.more.in { opacity: 1; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, 6px); } }

/* 顶栏 */
.chrome { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 16px clamp(18px, 4vw, 48px); pointer-events: none; transition: background .4s; }
.chrome > * { pointer-events: auto; }
.past-hero .chrome { background: linear-gradient(180deg, rgba(7,9,12,.85), transparent); }
.brand { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: .14em; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.snd { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.32); backdrop-filter: blur(8px); border-radius: 99px; padding: 6px 12px; font-size: 12px; }
.snd::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); animation: breathe 2.4s ease-in-out infinite; }
.snd[aria-pressed="true"]::before { background: var(--lamp); box-shadow: 0 0 0 3px rgba(240,194,122,.25); animation: none; }
@keyframes breathe { 50% { opacity: .3; } }

/* ---------- 首屏：他 ---------- */
.hero { height: 100svh; min-height: 600px; overflow: hidden; }
.hero .bg { inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); max-width: none; filter: blur(12px) brightness(.55) saturate(.9); }
.hero .fig { left: 50%; top: -2%; height: 190%; transform: translateX(-50%) scale(1.06); transform-origin: 50% 12%; filter: blur(9px) brightness(.7); transition: filter 1.6s ease, transform 2.4s cubic-bezier(.2,.7,.2,1); }
.hero.looked .fig { filter: none; transform: translateX(-50%); }
.rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: filter 1.6s, opacity 1.6s; }
.looked .rain { filter: blur(2px); opacity: .55; }
.hero .shade { background: linear-gradient(180deg, rgba(0,0,0,.45), transparent 16%, transparent 34%, rgba(6,8,10,.75) 56%, rgba(6,8,10,.96) 80%); }
.hero .copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 72px; padding: 0 clamp(18px, 5vw, 48px); }
.now { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(238,241,243,.85); margin-bottom: 12px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 10px var(--lamp); animation: breathe 2.6s ease-in-out infinite; }
.letter { padding: 14px 16px 16px; border-radius: 16px; background: rgba(250,246,238,.94); color: #22262a; box-shadow: 0 18px 50px rgba(0,0,0,.45); opacity: 0; transform: translateY(14px); transition: opacity .9s, transform .9s; margin-bottom: 20px; }
.told .letter { opacity: 1; transform: none; }
.letter-from { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: #8a6a4a; margin-bottom: 4px; }
.letter-from b { font-family: var(--serif); font-size: 15px; color: #22262a; }
.letter-text { font-family: var(--serif); font-size: 15px; line-height: 1.75; min-height: 3.5em; }
.hero .title { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 7.6vw, 58px); white-space: nowrap; line-height: 1.25; letter-spacing: .04em; }
.hero .sub { margin-top: 8px; font-family: var(--serif); font-size: clamp(16px, 4.2vw, 22px); color: rgba(238,241,243,.88); transition-delay: .5s; }
.cue { position: absolute; z-index: 2; right: clamp(18px, 4vw, 48px); bottom: 40px; font-size: 12px; letter-spacing: .24em; color: var(--fg-2); transition-delay: 1.2s !important; }
.foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 12px; padding: 12px clamp(18px, 4vw, 48px) max(12px, env(safe-area-inset-bottom)); font-size: 11px; color: var(--fg-2); }
@media (min-width: 960px) {
  .hero .fig { left: 66%; top: -4%; height: 196%; }
  .hero .shade { background: linear-gradient(90deg, rgba(6,8,10,.94), rgba(6,8,10,.7) 34%, transparent 58%), linear-gradient(180deg, rgba(0,0,0,.4), transparent 20%, transparent 80%, rgba(0,0,0,.5)); }
  .hero .copy { left: clamp(48px, 7vw, 120px); right: auto; top: 50%; bottom: auto; transform: translateY(-50%); width: min(38vw, 540px); padding: 0; }
  .letter-text { font-size: 16px; }
  .hero .title { font-size: clamp(36px, 3.4vw, 50px); }
}

/* ---------- 钉住的段：外层几屏高，里面一屏 sticky ---------- */
.pinned { overflow: visible; }
.pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; padding: 88px 0 72px; }

/* 一 · 他只记得你 */
.remember { height: 240svh; }
.remember .fig-side { left: 50%; bottom: 0; height: 66%; transform: translateX(-16%); filter: brightness(.9) drop-shadow(0 20px 30px rgba(0,0,0,.45)); }
.remember .shade { background: linear-gradient(180deg, rgba(7,9,12,.6) 0%, rgba(7,9,12,.15) 18%, rgba(7,9,12,.25) 42%, rgba(7,9,12,.8) 72%, var(--ink)); }
.two { display: grid; gap: 30px; }
.chat { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.bubble { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.65; opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s; }
.bubble b { display: block; font-size: 12px; font-weight: 600; color: var(--lamp); margin-bottom: 2px; }
.bubble.you { align-self: flex-end; background: rgba(250,246,238,.94); color: #22262a; border-bottom-right-radius: 4px; }
.bubble.him { align-self: flex-start; background: rgba(20,26,32,.8); backdrop-filter: blur(10px); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.reply-slot { position: relative; align-self: flex-start; max-width: 86%; display: flex; flex-direction: column; }
.reply-slot .bubble { max-width: none; }
.reply-slot .typing { position: absolute; left: 0; top: 0; }
.typing i { display: inline-block; width: 6px; height: 6px; margin: 4px 3px 2px 0; border-radius: 50%; background: rgba(238,241,243,.7); animation: dot 1.1s ease-in-out infinite; }
.typing i:nth-of-type(2) { animation-delay: .15s; }
.typing i:nth-of-type(3) { animation-delay: .3s; }
@keyframes dot { 50% { opacity: .25; transform: translateY(-2px); } }
.gap { text-align: center; color: var(--fg-2); letter-spacing: .4em; opacity: 0; transition: opacity .6s; }
.chat-note { font-size: 12px; color: var(--fg-2); align-self: flex-end; opacity: 0; transition: opacity .6s; }
.bubble.in, .gap.in, .chat-note.in { opacity: 1; transform: none; }
@media (min-width: 960px) {
  .remember .fig-side { left: 60%; height: 92%; transform: translateX(-50%); }
  .remember .shade { background: linear-gradient(90deg, rgba(7,9,12,.88), rgba(7,9,12,.45) 45%, rgba(7,9,12,.1) 70%), linear-gradient(180deg, rgba(7,9,12,.5), transparent 18%, transparent 80%, var(--ink)); }
  .two { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 64px; }
  .chat { justify-self: end; }
}

/* 二 · 他也有自己的生活 */
.life { --fill: 0; height: 240svh; }
.life .bg { opacity: 0; transition: opacity 1.2s ease; }
.life .bg.on { opacity: .62; }
.life .shade { background: linear-gradient(180deg, rgba(7,9,12,.75), rgba(7,9,12,.55) 40%, rgba(7,9,12,.85)); }
.life .wrap { width: min(980px, 100%); }
.life h2 { font-size: clamp(24px, 3.6vw, 44px); margin-bottom: 22px; }
.vs { display: grid; grid-template-columns: .72fr 1fr; gap: clamp(14px, 4vw, 64px); }
.col-head { font-family: var(--serif); font-size: clamp(15px, 1.8vw, 20px); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.them .col-head, .them .node, .them .col-foot { color: var(--fg-2); }
.rail { list-style: none; margin: 0; padding: 0 0 0 16px; position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: min(44svh, 440px); }
.rail::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.us .rail::after { content: ""; position: absolute; left: 4px; top: 6px; width: 1px; height: calc((100% - 12px) * var(--fill)); background: var(--lamp); }
.gap-node { flex: 1; display: flex; align-items: center; }
.gap-node span { font-family: var(--serif); font-size: clamp(12px, 1.4vw, 15px); color: rgba(238,241,243,.32); writing-mode: vertical-rl; letter-spacing: .3em; margin-left: -2px; }
.node { position: relative; font-size: clamp(13px, 1.5vw, 16px); line-height: 1.45; }
.node::before { content: ""; position: absolute; left: -16px; top: .45em; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); border: 1px solid rgba(238,241,243,.45); }
.node time { display: block; font-size: 11px; color: var(--lamp); font-variant-numeric: tabular-nums; }
.us .node { opacity: .08; transform: translateY(6px); transition: opacity .5s, transform .5s; }
.us .node.in { opacity: 1; transform: none; }
.us .node.in::before { background: var(--lamp); border-color: var(--lamp); }
.us .node.dim.in { opacity: .55; }
.us .end-node { font-family: var(--serif); font-size: clamp(15px, 1.9vw, 21px); font-weight: 600; }
.col-foot { margin-top: 16px; font-family: var(--serif); font-size: clamp(14px, 1.9vw, 22px); line-height: 1.5; opacity: 0; transform: translateY(8px); transition: opacity .8s, transform .8s; }
.done .col-foot { opacity: 1; transform: none; }
@media (min-width: 960px) {
  .vs { grid-template-columns: 1fr 1.4fr; gap: 72px; }
  .node { font-size: 17px; }
  .rail { min-height: min(50svh, 480px); }
}

/* 三 · 他住的地方 */
.world { min-height: 100svh; display: flex; align-items: flex-end; padding: 120px 0 72px; overflow: hidden; }
.world .bg { transform: scale(1.08); transition: transform 8s ease-out; }
.world.seen .bg { transform: none; }
.world .shade { background: linear-gradient(180deg, var(--ink), rgba(7,9,12,.2) 18%, rgba(7,9,12,.35) 40%, rgba(7,9,12,.9) 70%, var(--ink)); }
.world .wrap > * { opacity: 0; transform: translateY(10px); transition: opacity 1s, transform 1s; }
.world.seen .wrap > * { opacity: 1; transform: none; }
.world.seen .wrap > :nth-child(3) { transition-delay: .2s; }
.world.seen .wrap > :nth-child(4) { transition-delay: .5s; }
.world.seen .wrap > :nth-child(5) { transition-delay: .8s; }
.world.seen .wrap > :nth-child(n+6) { transition-delay: 1.1s; }
.world-name { font-size: clamp(44px, 8vw, 96px); letter-spacing: .12em; line-height: 1.1; }
.world-name small { display: block; margin-top: 8px; font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: .2em; color: var(--lamp); }
.shared { margin-top: 12px; color: #fff; }
.next { margin-top: 20px; font-family: var(--serif); font-size: clamp(16px, 1.8vw, 20px); border-left: 2px solid var(--lamp); padding-left: 14px; max-width: 32em; }
.others { margin-top: 16px; font-size: 14px; color: var(--fg-2); max-width: 32em; }
.film-card { margin-top: 22px; display: inline-flex; align-items: center; gap: 14px; padding: 8px 18px 8px 8px; border: 1px solid rgba(240,194,122,.45); border-radius: 14px; background: rgba(240,194,122,.08); text-align: left; }
.film-card img { width: 52px; height: 72px; object-fit: cover; border-radius: 8px; }
.film-card b { display: block; font-size: 15px; color: var(--lamp); letter-spacing: .08em; }
.film-card b::before { content: "▶"; font-size: 10px; margin-right: 8px; }
.film-card small { font-size: 12px; color: var(--fg-2); }
@media (min-width: 960px) {
  .world { align-items: center; }
  .world .shade { background: linear-gradient(90deg, rgba(7,9,12,.9), rgba(7,9,12,.5) 45%, rgba(7,9,12,.1) 75%), linear-gradient(180deg, var(--ink), transparent 18%, transparent 82%, var(--ink)); }
}

/* 结尾：此刻的他 */
.end { min-height: 100svh; display: flex; align-items: flex-end; padding: 120px 0 28px; overflow: hidden; }
.end .bg { filter: brightness(.7); }
.end .fig { left: 50%; bottom: 18%; height: 62%; transform: translateX(-10%); filter: brightness(.88) drop-shadow(0 20px 30px rgba(0,0,0,.45)); transition: opacity 1s; }
.end .fig.away { opacity: 0; }
.end .shade { background: linear-gradient(180deg, var(--ink), rgba(7,9,12,.2) 18%, rgba(7,9,12,.2) 40%, rgba(7,9,12,.88) 66%, var(--ink) 86%); }
.end .wrap > * { opacity: 0; transform: translateY(10px); transition: opacity 1s, transform 1s; }
.end.seen .wrap > * { opacity: 1; transform: none; }
.end.seen .wrap > :nth-child(2) { transition-delay: .4s; }
.end.seen .wrap > :nth-child(3) { transition-delay: .7s; }
.end.seen .wrap > :nth-child(n+4) { transition-delay: 1s; }
.end-now { font-family: var(--serif); font-size: clamp(16px, 2vw, 20px); color: rgba(238,241,243,.88); margin-bottom: 26px; }
.end-name { font-family: var(--serif); font-size: clamp(40px, 9vw, 72px); font-weight: 600; letter-spacing: .2em; line-height: 1.1; }
.end-line { margin-top: 10px; font-family: var(--serif); font-size: clamp(18px, 3vw, 28px); }
.end-status { margin-top: 10px; font-size: 13px; letter-spacing: .14em; color: var(--lamp); }
.notices { margin: 24px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: rgba(238,241,243,.82); max-width: 32em; }
@media (min-width: 960px) {
  .end { align-items: center; }
  .end .fig { left: 62%; bottom: 0; height: 92%; transform: translateX(-50%); }
  .end .shade { background: linear-gradient(90deg, rgba(7,9,12,.9), rgba(7,9,12,.5) 42%, transparent 66%), linear-gradient(180deg, var(--ink), transparent 18%, transparent 82%, rgba(7,9,12,.6)); }
}

/* 序幕片弹层 */
.film { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0,0,0,.92); }
.film[hidden] { display: none; }
.film-box { position: relative; height: min(86svh, 900px); aspect-ratio: 9 / 16; max-width: 94vw; border-radius: 14px; overflow: hidden; background: #000; }
.film-box .hero-video { width: 100%; height: 100%; }
.film-close { position: absolute; top: 16px; right: 16px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.4); border-radius: 99px; padding: 6px 14px; font-size: 13px; }