/* 第五轮：在第四轮样式上加——首屏三个人并排、这一夜换人、入梦一段、结尾三个人 */

/* ---------- 首屏：三扇画铺满整屏，统一调色、暗角、颗粒。挑中的那扇展开，另两扇收成窄条，只留竖排题签 ---------- */
.hero5 { --px: 0; --py: 0; height: 100svh; min-height: 640px; overflow: hidden; background: #06080b; }
.lineup { position: absolute; inset: 0; display: flex; }
.strip { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border: 0; padding: 0; background: #0b0e12; cursor: pointer; transition: flex-grow 1.05s cubic-bezier(.7,0,.2,1); }
.picked .strip { flex-grow: .34; }
.picked .strip.on { flex-grow: 2.6; }
/* 接缝：不画线，两边压一道柔和的暗影 */
.strip::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 18px 0 24px -14px rgba(0,0,0,.75), inset -18px 0 24px -14px rgba(0,0,0,.75); }
.strip-bg { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; filter: brightness(.78) saturate(.72) contrast(1.05) sepia(.12); transform: translate(calc(var(--px) * -12px), calc(var(--py) * -8px)); transition: filter 1s ease; animation: push 26s ease-in-out infinite alternate; }
@keyframes push { from { scale: 1.02; } to { scale: 1.12; } }
.strip-fig { position: absolute; left: 50%; top: 6%; height: 132%; width: auto; max-width: none; translate: -50% 0; transform: translate(calc(var(--px) * 8px), calc(var(--py) * 4px)); transform-origin: 50% 20%; filter: brightness(.94) saturate(.86) drop-shadow(0 18px 30px rgba(0,0,0,.6)); transition: filter 1s ease, top 1s ease; animation: alive 6s ease-in-out infinite; }
@keyframes alive { 50% { scale: 1.01 1.016; } }
.strip:nth-child(2) .strip-fig { animation-delay: -2s; }
.strip:nth-child(3) .strip-fig { animation-delay: -4s; }
/* 没挑中的：压暗、去色，不再糊 */
.picked .strip:not(.on) .strip-bg { filter: brightness(.3) saturate(.25) contrast(1.05); }
.picked .strip:not(.on) .strip-fig { filter: brightness(.32) saturate(.2); }
.picked .strip.on .strip-fig { top: 3%; }
/* 题签：竖排名字，细金边，挂在每扇上方；挑中的那扇收起来 */
.strip-tag { position: absolute; z-index: 3; top: 76px; left: 50%; translate: -50% 0; writing-mode: vertical-rl; font-family: var(--serif); font-size: 15px; letter-spacing: .32em; padding: 10px 5px; color: rgba(244,238,226,.9); border: 1px solid rgba(240,194,122,.45); background: rgba(8,10,13,.45); backdrop-filter: blur(6px); transition: opacity .6s ease, color .6s; }
.picked .strip.on .strip-tag { opacity: 0; }
.picked .strip:not(.on) .strip-tag { color: rgba(240,194,122,.85); }
.strip:hover .strip-tag { color: #fff; }
.invite .strip:not(.on) .strip-tag { animation: invite 1.4s ease-in-out 2; }
@keyframes invite { 50% { color: #fff; border-color: var(--lamp); box-shadow: 0 0 18px rgba(240,194,122,.45); } }
/* 统一调色：上冷下暖的一层，再压暗角，再加一点颗粒，三张画看着像同一部片子 */
.grade { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; background: linear-gradient(180deg, rgba(60,80,110,.55), rgba(40,40,50,.2) 45%, rgba(150,95,50,.35)); }
.hero5 .shade { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(ellipse 120% 80% at 50% 40%, transparent 50%, rgba(4,5,8,.7) 100%),
  linear-gradient(180deg, rgba(4,5,8,.65), transparent 16%, transparent 46%, rgba(5,7,10,.72) 66%, rgba(5,7,10,.94) 86%); }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .14; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.fog { position: absolute; inset: -10% -40% 30%; pointer-events: none; background: radial-gradient(ellipse 40% 16% at 30% 60%, rgba(210,220,230,.14), transparent 70%), radial-gradient(ellipse 50% 18% at 75% 35%, rgba(210,220,230,.1), transparent 70%); animation: drift 30s linear infinite alternate; }
@keyframes drift { to { transform: translateX(16%); } }
/* 文字：此刻一行、标题、副标、回信 */
.hero5 .copy { position: absolute; z-index: 4; left: 0; right: 0; bottom: 46px; padding: 0 clamp(20px, 5vw, 48px); text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.hero-now { min-height: 1.5em; margin-bottom: 10px; font-size: 13px; letter-spacing: .06em; color: var(--lamp); opacity: 0; transform: translateY(6px); transition: opacity .6s, transform .6s; }
.hero-now.in { opacity: 1; transform: none; }
.hero5 .title { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 7.6vw, 56px); line-height: 1.25; letter-spacing: .05em; white-space: nowrap; }
.hero5 .sub { margin-top: 6px; font-family: var(--serif); font-size: clamp(15px, 4vw, 21px); color: rgba(244,238,226,.86); transition-delay: .4s; }
.pick { margin-top: 16px; font-size: 13px; letter-spacing: .08em; color: rgba(244,238,226,.7); transition-delay: .9s; }
/* 回信：暗色信笺，左边一道金线 */
.hero5 .letter { margin: 16px 0 0; display: none; padding: 12px 16px 14px 18px; border-radius: 4px; color: rgba(244,238,226,.94); background: linear-gradient(90deg, rgba(240,194,122,.10), rgba(12,14,18,.55)); border-left: 2px solid var(--lamp); backdrop-filter: blur(10px); box-shadow: none; text-shadow: none; }
.hero5 .letter-from { color: rgba(240,194,122,.8); margin-bottom: 4px; }
.hero5 .letter-from b { color: #f4eee2; }
.hero5.told .letter { display: block; }
.hero5.told .pick { display: none; }
.hero5 .letter-text { font-size: 14px; line-height: 1.8; min-height: 0; }
.hero5 .foot { z-index: 4; color: rgba(244,238,226,.5); }
@media (min-width: 960px) {
  .lineup { left: 38%; }
  .strip-fig { top: 7%; height: 140%; }
  .picked .strip.on .strip-fig { top: 4%; }
  .strip-tag { top: 96px; font-size: 18px; padding: 14px 7px; }
  .hero5 .shade { background:
    radial-gradient(ellipse 90% 90% at 70% 45%, transparent 45%, rgba(4,5,8,.7) 100%),
    linear-gradient(90deg, #06080b 0%, rgba(6,8,11,.97) 34%, rgba(6,8,11,.55) 40%, transparent 50%),
    linear-gradient(180deg, rgba(4,5,8,.55), transparent 16%, transparent 80%, rgba(4,5,8,.55)); }
  .hero5 .copy { left: clamp(48px, 6vw, 110px); right: auto; top: 50%; bottom: auto; transform: translateY(-50%); width: min(32vw, 470px); padding: 0; }
  .hero5 .title { font-size: clamp(34px, 3vw, 46px); }
  .hero5 .letter-text { font-size: 15px; }
}

/* ---------- 这一夜：换人 ---------- */
.who-tabs { display: flex; gap: 6px; margin: -6px 0 18px; }
.who-tabs button { border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.3); backdrop-filter: blur(8px); border-radius: 99px; padding: 5px 12px; font-size: 13px; }
.who-tabs button[aria-pressed="true"] { background: rgba(240,194,122,.92); color: #1a1208; border-color: transparent; }
.life .rail { min-height: min(40svh, 420px); }

/* ---------- 入梦 ---------- */
.dream { height: 180svh; }
.dream .pin { padding: 96px 0 72px; }
.dream .bg { transform: scale(1.06); transition: transform 8s ease-out; }
.dream.seen .bg { transform: none; }
.dream .shade { background: linear-gradient(180deg, var(--ink), rgba(7,9,12,.45) 18%, rgba(7,9,12,.55) 50%, rgba(7,9,12,.9) 80%, var(--ink)); }
.dream .text > *, .dream .shot { opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s; }
.dream .text > .in, .dream .shot.in { opacity: 1; transform: none; }
.here-head { margin-top: 22px; font-size: 13px; color: var(--lamp); letter-spacing: .1em; }
.here { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.here li { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 99px; background: rgba(10,13,17,.6); border: 1px solid var(--line); backdrop-filter: blur(8px); }
.here li.me { border-color: rgba(240,194,122,.6); }
.here .face { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: 50% 6%; background: #1a1f26; }
.here b { display: block; font-family: var(--serif); font-size: 15px; }
.here small { font-size: 12px; color: var(--fg-2); }
.apart { margin-top: 16px; font-size: 13px; color: var(--fg-2); }
.shot { max-width: 240px; }
.shot .phone { border-radius: 24px; overflow: hidden; border: 5px solid #0b0d0f; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.shot figcaption { margin-top: 8px; font-size: 12px; color: var(--fg-2); }
@media (max-width: 959px) { .dream .shot { display: none; } }
@media (min-width: 960px) {
  .dream .two { grid-template-columns: 1.2fr 1fr; }
  .dream .shot { justify-self: end; max-width: 280px; }
  .dream .shade { background: linear-gradient(90deg, rgba(7,9,12,.9), rgba(7,9,12,.55) 50%, rgba(7,9,12,.3)), linear-gradient(180deg, var(--ink), transparent 18%, transparent 82%, var(--ink)); }
}

/* 字标：F1 黑体 + 虹彩正本（own-xujie-horizontal-dark.svg 删掉底色），不低于 32px，再小换 F4 */
.brand { display: block; line-height: 0; }
.brand-mark { height: 58px; width: auto; margin: -12px 0 -14px -10px; filter: drop-shadow(0 1px 8px rgba(0,0,0,.7)); }
@media (min-width: 960px) { .brand-mark { height: 68px; } }

/* ---------- 结尾：三个人此刻各在哪 ---------- */
.end-list { list-style: none; margin: 4px 0 26px; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.end-list li { display: flex; gap: 12px; }
.end-list b { font-family: var(--serif); font-weight: 600; min-width: 3.5em; }
.end-list span { color: rgba(238,241,243,.8); }
.end-list li.dim { opacity: .55; }
.end-list li.me b { color: var(--lamp); }

/* ---------- 多个世界：别的世界隔着雾 ---------- */
/* 首屏：另两个世界的三扇叠在烟雨渡上面，切到它们时淡进来；画是糊的、去色的，上面一层雾在飘 */
.glimpse { pointer-events: none; opacity: 0; transition: opacity 1.1s ease; }
.hero5[data-world="inari"] .glimpse[data-world="inari"], .hero5[data-world="qingya"] .glimpse[data-world="qingya"] { opacity: 1; }
.hero5:not([data-world="yanyudu"]) .lineup:not(.glimpse) { opacity: 0; pointer-events: none; }
.lineup:not(.glimpse) { transition: opacity 1.1s ease; }
.glimpse .strip { cursor: default; }
.glimpse .strip-bg { filter: blur(7px) brightness(.6) saturate(.45); }
.glimpse .strip-fig { filter: blur(5px) brightness(.62) saturate(.4); }
.glimpse .strip-tag { opacity: .55; color: rgba(244,238,226,.75); border-color: rgba(244,238,226,.25); filter: blur(.4px); }
.haze { position: absolute; inset: -10%; pointer-events: none; opacity: 0; transition: opacity 1.1s ease;
  background: radial-gradient(ellipse 60% 40% at 30% 40%, rgba(220,226,232,.28), transparent 70%), radial-gradient(ellipse 70% 45% at 75% 65%, rgba(220,226,232,.22), transparent 70%), linear-gradient(rgba(200,208,216,.14), rgba(200,208,216,.14));
  animation: hazeDrift 18s ease-in-out infinite alternate; }
@keyframes hazeDrift { to { transform: translate(6%, -3%) scale(1.05); } }
.hero5:not([data-world="yanyudu"]) .haze { opacity: 1; }
/* 看别的世界时：回信和挑人的话收起来 */
.hero5:not([data-world="yanyudu"]) .letter, .hero5:not([data-world="yanyudu"]) .pick { opacity: .3; pointer-events: none; }
.hero5 .letter, .hero5 .pick { transition: opacity .6s ease; }
.hero5:not([data-world="yanyudu"]) .hero-now { color: rgba(244,238,226,.7); }

/* 世界名一排：烟雨渡清楚，另两个糊着，点了隔着雾看一眼 */
.worlds-row { display: flex; gap: 18px; margin-bottom: 12px; }
.wname { border: 0; background: none; padding: 0 0 4px; font-family: var(--serif); font-size: 15px; letter-spacing: .14em; color: rgba(244,238,226,.9); border-bottom: 1px solid transparent; transition: color .5s, filter .5s, opacity .5s, border-color .5s; }
.wname.hazy { color: rgba(244,238,226,.6); filter: blur(1.3px); opacity: .7; }
.wname.hazy:hover { filter: blur(.6px); opacity: .9; }
.wname[aria-pressed="true"] { border-bottom-color: var(--lamp); color: #f4eee2; filter: blur(.6px); opacity: 1; }
.wname[data-world="yanyudu"][aria-pressed="true"] { filter: none; color: var(--lamp); }

/* 四 · 不止一个世界 */
.worlds { align-items: center; background: radial-gradient(ellipse at 50% 30%, rgba(60,70,84,.25), transparent 70%), var(--ink); }
.worlds .wrap > * { opacity: 0; transform: translateY(10px); transition: opacity 1s, transform 1s; }
.worlds.seen .wrap > * { opacity: 1; transform: none; }
.worlds.seen .wrap > :nth-child(3) { transition-delay: .2s; }
.worlds.seen .wrap > :nth-child(4) { transition-delay: .4s; }
.worlds.seen .wrap > :nth-child(n+5) { transition-delay: .7s; }
.haze-section { opacity: .5; }
.wgrid { margin-top: 28px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wcard { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px; background: #10141a; }
.wcard-bg { position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; filter: brightness(.7) saturate(.8); transition: filter 1.4s ease, transform 8s ease; }
.wcard:hover .wcard-bg { transform: scale(1.04); }
.wcard-mist { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 30%, rgba(7,9,12,.85)); }
.wcard.hazy .wcard-bg { filter: blur(6px) brightness(.6) saturate(.45); }
.wcard.hazy .wcard-mist { background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(220,226,232,.24), transparent 75%), linear-gradient(180deg, rgba(200,208,216,.1), rgba(7,9,12,.85)); animation: hazeDrift 14s ease-in-out infinite alternate; }
/* 碰一下（悬停、按住）雾薄一点，看得清一些 */
.wcard.hazy:hover .wcard-bg, .wcard.hazy:active .wcard-bg { filter: blur(4px) brightness(.66) saturate(.55); }
.wcard-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; }
.wcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.wcard-head b { font-family: var(--serif); font-size: 19px; letter-spacing: .1em; }
.wcard-state { font-size: 11px; letter-spacing: .1em; color: var(--lamp); white-space: nowrap; }
.wcard.hazy .wcard-state { color: rgba(244,238,226,.6); }
.wcard-line { font-family: var(--serif); font-size: 12.5px; line-height: 1.55; color: rgba(244,238,226,.86); }
.wcard-people { margin-top: 6px; font-size: 11px; color: var(--fg-2); }
.wcard.hazy .wcard-body { filter: blur(.5px); }
.wcard.hazy .wcard-line, .wcard.hazy .wcard-people { opacity: .7; }
.wcard.wmore { display: grid; place-items: center; background: linear-gradient(160deg, #141820, #0b0e12); border: 1px dashed rgba(244,238,226,.18); }
.wcard-more { position: relative; font-family: var(--serif); font-size: 14px; letter-spacing: .16em; color: rgba(244,238,226,.55); writing-mode: vertical-rl; filter: blur(.4px); }
.worlds .next { margin-top: 26px; }
.worlds .next b { font-weight: 600; color: var(--lamp); margin-right: 4px; }
@media (min-width: 960px) {
  .wgrid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .wcard-body { padding: 16px; }
  .wcard-head b { font-size: 22px; }
  .wcard-line { font-size: 14px; }
}

/* 世界、结尾：显形不再一层层延迟，滑过时至少是有内容的 */
.world .wrap > *, .end .wrap > * { transition-duration: .6s !important; transition-delay: 0s !important; }

/* 最后三段：滑到附近时轻轻停在段落开头（proximity，只在靠近时吸一下）；前面钉住的段不受影响 */
html { scroll-snap-type: y proximity; }
.dream, .worlds, .end { scroll-snap-align: start; }