/* 遗忘的故事：外层很高（滚动距离），内层 sticky 钉住一屏，进度由 JS 写进 --p */
/* 2026-10-12 首页改版：520vh → 360vh（滚动距离约 4.2 屏 → 2.6 屏），痛点讲清楚就收，把篇幅让给「只要一句」演示 */
.story { position: relative; height: 360vh; color: var(--night-text); }
.story__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.story__scene { --story-scale: 1; position: absolute; inset: 0; width: min(1920px, 100%); margin-inline: auto; }
.story__bots .bot { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.story__bots .bot__shadow { background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,0)); }
/* 记忆卡：一颗弹珠 + 标题 + 类别 · 来源。--open 由滚动驱动（1 展开 / 0 收拢成一颗弹珠） */
.story__tethers { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* .mem 是零尺寸的锚点，正好在弹珠圆心（JS 只移动它）；卡片从这里往外展开：
   右侧卡片的弹珠在左端，左侧卡片的弹珠在右端。悬停变宽时卡片往外长，弹珠和细线末端都不挪位置 */
.tether { fill: none; stroke: color-mix(in srgb, var(--c) 45%, #fff); stroke-opacity: .28; stroke-width: 1; stroke-linecap: round; transition: stroke-opacity 300ms var(--ease-out), stroke-width 300ms var(--ease-out); }
.tether.is-hot { stroke-opacity: .75; stroke-width: 1.4; }
.tether__dot { opacity: 0; filter: drop-shadow(0 0 3px rgba(255,255,255,.5)); }
.mem { --open: 1; --mo: calc(20px * var(--story-scale)); position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; pointer-events: auto; }
.mem.is-hot { z-index: 6; }
.mem__card { position: absolute; top: 0; left: calc(-1 * var(--mo)); display: flex; align-items: center; gap: calc(11px * var(--story-scale)); padding: calc(7px * var(--story-scale)) calc(15px * var(--story-scale)) calc(7px * var(--story-scale)) calc(7px * var(--story-scale)); border-radius: 15px; white-space: nowrap;
  transform: translateY(-50%); transform-origin: var(--mo) 50%; transition: transform 520ms var(--ease-spring); }
.mem--l .mem__card { left: auto; right: calc(-1 * var(--mo)); flex-direction: row-reverse; padding: calc(7px * var(--story-scale)) calc(7px * var(--story-scale)) calc(7px * var(--story-scale)) calc(15px * var(--story-scale)); text-align: right; transform-origin: calc(100% - var(--mo)) 50%; }
/* 卡片底：独立一层，收拢时只淡掉这一层，弹珠本身不受影响。
   展开时卡底是完全不透明的实色（看起来和以前的半透明玻璃同一个颜色）：后面经过的细线、别的卡都不会透出来；
   悬停时再提亮一档、浮到最上层 */
.mem__card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: var(--open);
  background: linear-gradient(180deg, #444247, #38363c);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.10), 0 14px 30px -16px rgba(0,0,0,.55);
  transition: background 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
.mem.is-hot .mem__card::before { background: linear-gradient(180deg, #4d4b54, #403e46);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.14), 0 20px 40px -18px rgba(0,0,0,.6), 0 0 0 4px color-mix(in srgb, var(--c) 12%, transparent); }
/* 弹珠：主色球体 + 暗边 + 高光 + 底部反光，转动时高光不跟着转（高光在外层，花纹在内层） */
.mem__m { position: relative; flex: none; width: calc(26px * var(--story-scale)); height: calc(26px * var(--story-scale)); border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.95) 0 7%, rgba(255,255,255,0) 24%), radial-gradient(circle at 60% 85%, rgba(255,255,255,.25), transparent 40%);
  box-shadow: 0 3px 6px -2px rgba(0,0,0,.5), inset 0 -2px 4px rgba(0,0,0,.18); z-index: 1; }
.mem__m i { position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 20deg, transparent 0 12%, rgba(255,255,255,.22) 14% 18%, transparent 20% 62%, rgba(255,255,255,.16) 64% 67%, transparent 69%), radial-gradient(circle at 40% 35%, var(--cl), var(--c) 55%, var(--cd)); }
.mem__body { position: relative; display: grid; gap: 1px; opacity: var(--open); transform: translateX(calc((1 - var(--open)) * -8px)); }
.mem--l .mem__body { transform: translateX(calc((1 - var(--open)) * 8px)); justify-items: end; }
.mem__title { font-size: calc(14px * var(--story-scale)); font-weight: 540; letter-spacing: -.012em; color: var(--night-text); }
.mem__meta { display: flex; align-items: center; font-family: var(--font-mono); font-size: calc(10.5px * var(--story-scale)); letter-spacing: .02em; color: var(--night-text-2); }
.mem__kind::before { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--c); vertical-align: middle; }
.mem__more { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; color: color-mix(in srgb, var(--c) 40%, #fff);
  transition: max-width 520ms var(--ease-spring), opacity 260ms var(--ease-out); }
.mem__more::before { content: '·'; margin: 0 6px; color: var(--night-text-2); }
.mem.is-hot .mem__more { max-width: 14em; opacity: 1; transition-delay: 60ms; }
.mem.is-hot .mem__card { transform: translateY(-50%) scale(1.03); }
.mem.is-narrow { --mo: 16px; }
.mem.is-narrow .mem__card { padding: 5px 11px 5px 5px; gap: 8px; }
.mem.is-narrow.mem--l .mem__card { padding: 5px 5px 5px 11px; }
.mem.is-narrow .mem__title { font-size: 12.5px; }
.mem.is-narrow .mem__meta { font-size: 9.5px; }
.mem.is-narrow .mem__m { width: 22px; height: 22px; }
/* Mibs 碗：玻璃碗分前后两层（背面在弹珠下面，正面的口沿和高光压在弹珠上面）；碗底下一行小字落款 */
.story__bowl { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.story__bowl--front { z-index: 2; }
.story__bowl--back::after { content: ''; position: absolute; left: 6%; right: 6%; top: 100%; height: 18px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.35), rgba(0,0,0,0)); }
.story__bowl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.story__bowl-cap { position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; color: var(--night-text-2); --logo-glint: var(--night); }
.story__bowl-cap svg { color: var(--night-text); opacity: .8; }
.story__texts { position: relative; z-index: 2; width: min(960px, calc(100% - 2 * var(--pad-x))); height: 100%; pointer-events: none; }
.story__t { position: absolute; left: 0; right: 0; top: 13vh; text-align: center; font-size: clamp(20px, 2.4vw, 40px); line-height: 1.35; letter-spacing: -0.02em; font-weight: 500; opacity: 0; color: var(--night-text); }
.story__t--big { top: 13vh; font-size: clamp(34px, 5.4vw, 96px); font-weight: 640; letter-spacing: -0.04em; line-height: 1.05; }
.story__progress { position: absolute; left: 50%; bottom: 14px; width: 120px; height: 2px; transform: translateX(-50%); background: rgba(255,250,240,.12); border-radius: 2px; overflow: hidden; }
.story__progress i { position: absolute; inset: 0; background: var(--grad-signature); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* 段落之间的过渡带：本身透明，只提供滚动距离；颜色由底层 .backdrop 随滚动连续插值（js/bgfx.js） */
.to-night { height: 0; } .to-day { height: 12vh; pointer-events: none; }
.story__t { will-change: transform, opacity; }
.story__scene { will-change: transform, opacity; }
/* 中文大字：只在标点和空格处换行，不把「原地失忆」拆成「原 / 地失忆」 */
html[lang='zh-CN'] .story__t { word-break: keep-all; line-break: strict; }