/* =========================================================
   第 4 屏「往哪去」v1：扁平图形 · 一屏一幕
   只用 tokens.css 的变量；所有规则在 .m-future 作用域下
   ========================================================= */
.m-future {
  --fu-ai: #5CF2C8;            /* AI / 机器的青，和第二屏 .k-ai 同一个值 */
  --fu-stripe: color-mix(in srgb, var(--gold-lit) 10%, transparent);
  --fu-line: color-mix(in srgb, var(--text) 22%, transparent);
  position: relative; z-index: 9;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.8 var(--sans);
  border-top: 1px solid var(--hairline);
}
.m-future *, .m-future *::before, .m-future *::after { box-sizing: border-box; }
.m-future p, .m-future h2, .m-future h3, .m-future ol, .m-future ul, .m-future li { margin: 0; padding: 0; }
.m-future ol, .m-future ul { list-style: none; }
.m-future a { color: inherit; }
.m-future i, .m-future em, .m-future u, .m-future cite { font-style: normal; text-decoration: none; }

/* ---------- 每一幕 ---------- */
.m-future .fu-scene {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: stretch;
  padding: clamp(84px, 12vh, 120px) var(--gutter) clamp(40px, 7vh, 72px);
  scroll-snap-align: start;
}
.m-future .fu-scene + .fu-scene { border-top: 1px solid var(--hairline); }
.m-future .fu-wrap {
  position: relative; width: 100%; max-width: 1180px; margin: 0 auto;
  display: flex; flex-direction: column;
}

/* 小标签 */
.m-future .fu-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 22px;
}
.m-future .fu-eyebrow > span { color: var(--gold-lit); }
.m-future .fu-row-label {
  font: 500 11px/1 var(--mono); letter-spacing: .16em; color: var(--gold-lit);
  margin-bottom: 16px;
}

/* 标题：一行一个遮罩，上滑进场 */
.m-future .fu-rise { overflow: hidden; }
.m-future .fu-rise > span {
  display: block; transform: translateY(108%);
  transition: transform 1.2s var(--ease-out);
  transition-delay: calc(var(--n, 0) * .12s + .05s);
}
.m-future .fu-rise > span:nth-child(2) { --n: 1; }
.m-future .fu-scene.on .fu-rise > span { transform: none; }

.m-future .fu-head {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px); align-items: end;
  padding-bottom: clamp(24px, 4vh, 40px);
}
.m-future .fu-title {
  font: 900 clamp(30px, 3.9vw, 56px)/1.22 var(--serif-cn); letter-spacing: .02em;
}
.m-future .fu-title > span:nth-child(2) { color: var(--rust-lit); }
.m-future .fu-body {
  color: var(--dim); font-size: 15px; max-width: 30em; padding-bottom: .5em;
  opacity: 0; transform: translateY(10px);
  transition: opacity 1s ease .35s, transform 1.2s var(--ease-out) .35s;
}
.m-future .fu-scene.on .fu-body { opacity: 1; transform: none; }

/* 画面区：占满这一幕剩下的高度 */
.m-future .fu-fig {
  position: relative; flex: 1; min-height: 0;
  border-top: 1px solid var(--hairline);
  padding-top: clamp(24px, 4vh, 44px);
}
.m-future .fu-split {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
}

/* 右侧的引用和事实 */
.m-future .fu-notes { display: grid; gap: 22px; align-content: end; }
.m-future .fu-notes li {
  padding-left: 16px; border-left: 1px solid var(--fu-line);
  opacity: 0; transform: translateY(12px);
  transition: opacity .9s ease, transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i) * .16s + .7s);
}
.m-future .fu-scene.on .fu-notes li { opacity: 1; transform: none; }
.m-future .fu-notes p { font: 600 15px/1.7 var(--serif-cn); color: var(--text); }
.m-future .fu-notes p b { font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--gold-lit); margin-right: 10px; }
.m-future .fu-notes cite { display: block; margin-top: 6px; font: 400 11px/1.5 var(--mono); letter-spacing: .06em; color: var(--faint); }
.m-future .fu-notes a { border-bottom: 1px solid var(--hairline); transition: color .3s ease, border-color .3s ease; }
.m-future .fu-notes a:hover { color: var(--gold-lit); border-color: var(--gold-lit); }

/* 待定 / 待核对 小金标 */
.m-future .fu-pending {
  display: inline-block; margin-left: 8px; padding: 3px 7px; vertical-align: 1px;
  font: 500 10px/1 var(--mono); letter-spacing: .1em; color: var(--gold-lit);
  background: repeating-linear-gradient(-45deg, var(--fu-stripe) 0 4px, transparent 4px 8px);
  border: 1px dashed color-mix(in srgb, var(--gold-lit) 55%, transparent);
}
.m-future .fu-pending-note { margin-top: 18px; font: 400 11px/1.6 var(--mono); color: var(--faint); }
.m-future .fu-pending-note .fu-pending { margin: 0 10px 0 0; }

/* 叶子停靠点（看不见，只用来定位） */
.m-future .fu-anchor { position: absolute; width: 1px; height: 1px; pointer-events: none; }

/* ---------- 贴着视口的一层：叶子、进度点 ---------- */
.m-future .fu-fly { position: sticky; top: 0; height: 0; z-index: 6; pointer-events: none; }
.m-future .fu-fly-in { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; height: 100svh; overflow: hidden; }
.m-future .fu-leaf {
  position: absolute; left: 0; top: 0; margin: -14px 0 0 -14px;
  opacity: 0; will-change: transform;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--fire-4) 55%, transparent));
}
.m-future .fu-leaf .l1 { fill: var(--fire-4); }
.m-future .fu-leaf .l2 { fill: var(--fire-2); }
.m-future .fu-leaf .l3 { fill: var(--fire-5); }

.m-future .fu-dots { position: sticky; top: 0; height: 0; z-index: 7; }
.m-future .fu-dots > div {
  position: absolute; right: calc(var(--gutter) * .45); top: 50vh; top: 50svh; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 4px;
}
.m-future .fu-dots button {
  position: relative; width: 26px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer;
}
.m-future .fu-dots button::before {
  content: ""; position: absolute; right: 4px; top: 50%; height: 1px; width: 10px;
  background: var(--fu-line); transition: width .5s var(--ease-out), background .4s ease;
}
.m-future .fu-dots button.on::before { width: 20px; background: var(--gold-lit); }
.m-future .fu-dots button span {
  position: absolute; right: 34px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font: 400 11px/1 var(--mono); letter-spacing: .08em; color: var(--dim);
  padding: 6px 10px; background: var(--bg); border: 1px solid var(--hairline);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.m-future .fu-dots button:hover span, .m-future .fu-dots button:focus-visible span { opacity: 1; }
.m-future .fu-dots button:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

/* =========================================================
   幕 0 封面：左边解说词，右边一张会往前走的手绘地图
   这一幕很高（每站一段滚动距离），里面的内容贴住视口不动
   ========================================================= */
.m-future .fu-s0 {
  --stops: 8; --step: 78vh;
  display: block; padding: 0; min-height: 0;
  height: calc(100vh + (var(--stops) - 1) * var(--step));
  height: calc(100svh + (var(--stops) - 1) * var(--step));
}
.m-future .fu-s0-stick {
  position: sticky; top: 0; height: 100vh; height: 100svh; display: flex;
  padding: clamp(84px, 12vh, 120px) var(--gutter) clamp(28px, 5vh, 56px);
}
.m-future .fu-snap { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; pointer-events: none; }
.m-future .fu-cover-grid { flex-direction: row; align-items: stretch; gap: clamp(24px, 4vw, 64px); }
.m-future .fu-cover-copy { flex: 0 0 36%; min-width: 0; display: flex; flex-direction: column; justify-content: center; position: relative; }
.m-future .fu-cover { font: 900 clamp(48px, 6.4vw, 104px)/1.08 var(--serif-cn); letter-spacing: .04em; }
.m-future .fu-cover-lede { margin-top: clamp(10px, 2vh, 22px); font: 900 clamp(18px, 1.8vw, 26px)/1.5 var(--serif-cn); letter-spacing: .03em; }
.m-future .fu-cover-lede > span { --n: 2; }
.m-future .fu-cover-lede > span:nth-child(2) { --n: 3; color: var(--rust-lit); }

/* ---- 解说词：一次只显示当前这一站 ---- */
.m-future .fu-guide {
  position: relative; display: grid; margin-top: clamp(20px, 4vh, 44px);
  padding-top: clamp(16px, 2.6vh, 24px); border-top: 1px solid var(--hairline);
}
.m-future .fu-guide > li {
  grid-area: 1 / 1; opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .45s ease, transform .6s var(--ease-out);
}
.m-future .fu-guide > li.on { opacity: 1; transform: none; pointer-events: auto; transition: opacity .8s ease .15s, transform 1s var(--ease-out) .15s; }
.m-future .fu-guide .when { font: 500 11px/1 var(--mono); letter-spacing: .14em; color: var(--faint); }
.m-future .fu-guide .when b { margin-right: 12px; font: italic 400 20px/1 var(--serif-en); letter-spacing: 0; color: var(--gold-lit); }
.m-future .fu-guide h3 { margin: 10px 0 8px; font: 900 clamp(22px, 2.3vw, 32px)/1.3 var(--serif-cn); letter-spacing: .02em; }
.m-future .fu-guide .say { color: var(--dim); font-size: 15px; line-height: 1.85; max-width: 26em; }
.m-future .fu-guide .ix { margin-top: 12px; padding-left: 14px; border-left: 1px solid var(--fu-ai); font: 600 14px/1.7 var(--serif-cn); color: var(--text); max-width: 25em; }
.m-future .fu-guide .ix b { display: block; font: 500 10px/1.6 var(--mono); letter-spacing: .16em; color: var(--fu-ai); }
.m-future .fu-guide .who { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
.m-future .fu-guide .who span { display: inline-flex; align-items: center; gap: 7px; font: 400 12px/1 var(--mono); color: var(--dim); white-space: nowrap; }
.m-future .fu-ic { width: 22px; height: 22px; flex: none; object-fit: contain; border-radius: 5px; }

.m-future .fu-walk { display: flex; align-items: center; gap: 16px; margin-top: clamp(16px, 3vh, 30px); }
.m-future .fu-next {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 16px; background: none; border: 1px solid var(--fu-line); color: var(--text);
  font: 500 12px/1 var(--mono); letter-spacing: .14em;
  transition: border-color .3s ease, color .3s ease;
}
.m-future .fu-next i { transition: transform .5s var(--ease-out); }
.m-future .fu-next:hover { border-color: var(--gold-lit); color: var(--gold-lit); }
.m-future .fu-next:hover i { transform: translateX(5px); }
.m-future .fu-next:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.m-future .fu-count { font: 400 11px/1 var(--mono); letter-spacing: .14em; color: var(--faint); }

/* ---- 地图 ---- */
.m-future .fu-map {
  position: relative; flex: 1; min-width: 0; overflow: hidden; cursor: pointer;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 88%, transparent 100%);
}
.m-future .fu-map-world { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
.m-future .fu-map-world svg { display: block; width: 100%; height: auto; overflow: visible; }
.m-future .fu-map-tip {
  position: absolute; right: 0; bottom: 6%; font: 500 10px/1 var(--mono); letter-spacing: .16em; color: var(--faint);
  transition: opacity .6s ease;
}
.m-future .fu-map.walked .fu-map-tip { opacity: 0; }

/* 地图里的笔触：都是线，手抖的感觉靠 #fu-wobble 滤镜 */
.m-future .fu-map .road { fill: none; stroke: color-mix(in srgb, var(--text) 8%, var(--bg)); stroke-width: 54; stroke-linecap: round; stroke-linejoin: round; }
.m-future .fu-map .road-edge { fill: none; stroke: color-mix(in srgb, var(--hair-lit) 55%, transparent); stroke-width: 58; stroke-linecap: round; }
.m-future .fu-map .road-mid { fill: none; stroke: color-mix(in srgb, var(--text) 30%, transparent); stroke-width: 2; stroke-dasharray: 10 16; stroke-linecap: round; }
.m-future .fu-map .road-done { fill: none; stroke: var(--fire-4); stroke-width: 3; stroke-linecap: round; opacity: .9; }
.m-future .fu-map .ink { fill: none; stroke: var(--text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.m-future .fu-map .ink.ai { stroke: var(--fu-ai); }
.m-future .fu-map .ink.fire { stroke: var(--fire-4); }
.m-future .fu-map .ink.gold { stroke: var(--gold-lit); }
.m-future .fu-map .ink.thin { stroke-width: 1.4; }
.m-future .fu-map .f-ai { fill: var(--fu-ai); stroke: none; }
.m-future .fu-map .f-fire { fill: var(--fire-4); stroke: none; }
.m-future .fu-map .f-paper { fill: var(--text); stroke: none; }
.m-future .fu-map .f-bg { fill: var(--bg); }
.m-future .fu-map text { fill: var(--text); font: 900 20px var(--serif-cn); }
.m-future .fu-map text.mono { font: 500 12px var(--mono); letter-spacing: .08em; fill: var(--dim); }
.m-future .fu-map text.t-ai { fill: var(--fu-ai); }
.m-future .fu-map .bit { fill: none; stroke: color-mix(in srgb, var(--text) 26%, transparent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.m-future .fu-map .bit.f { fill: color-mix(in srgb, var(--fire-3) 38%, transparent); stroke: none; }

/* 站点：没走到时是淡的，走到了亮起来 */
.m-future .fu-map .stop { opacity: .28; transition: opacity .9s ease; }
.m-future .fu-map .stop.seen { opacity: 1; }
.m-future .fu-map .stop .pin { fill: var(--bg); stroke: var(--dim); stroke-width: 2; transition: stroke .5s ease, fill .5s ease; }
.m-future .fu-map .stop.seen .pin { stroke: var(--fire-4); fill: var(--fire-4); }
.m-future .fu-map .stop .date { font: italic 400 26px var(--serif-en); fill: var(--gold-lit); }
.m-future .fu-map .stop .name { font: 900 21px var(--serif-cn); fill: var(--text); }
.m-future .fu-map .stop .doodle { transform-box: fill-box; transform-origin: 50% 80%; transform: scale(.9); transition: transform 1s var(--ease-out); }
.m-future .fu-map .stop.seen .doodle { transform: none; }
/* 当前这一站的小动作 */
.m-future .fu-map .stop.now .blink { animation: fu-blink 1.4s ease-in-out infinite; }
.m-future .fu-map .stop.now .blink.b2 { animation-delay: .2s; }
.m-future .fu-map .stop.now .blink.b3 { animation-delay: .4s; }
.m-future .fu-map .stop.now .float { animation: fu-float 3.2s ease-in-out infinite; }
.m-future .fu-map .stop.now .lid { animation: fu-lid 3.6s var(--ease-out) infinite; transform-box: fill-box; transform-origin: 0% 100%; }
@keyframes fu-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes fu-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fu-lid { 0%, 100% { transform: rotate(0deg); } 45%, 70% { transform: rotate(-9deg); } }

/* 小三角 */
.m-future .fu-map .walker .l1 { fill: var(--fire-4); }
.m-future .fu-map .walker .l2 { fill: var(--fire-2); }
.m-future .fu-map .walker .l3 { fill: var(--fire-5); }
.m-future .fu-map .walker .shadow { fill: #000; opacity: .35; }

/* =========================================================
   幕 1 来路：四站
   ========================================================= */
.m-future .fu-stations {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 40px);
}
/* 一条地平线穿过四个站 */
.m-future .fu-road { display: flex; flex-direction: column; justify-content: center; padding-bottom: 4vh; }
.m-future .fu-stations::before {
  content: ""; position: absolute; left: 0; right: 0; top: 150px; height: 1px;
  background: var(--fu-line); transform: scaleX(0); transform-origin: left;
  transition: transform 1.8s var(--ease-out) .3s;
}
.m-future .fu-scene.on .fu-stations::before { transform: scaleX(1); }
.m-future .fu-stations > li {
  position: relative; padding-top: 0;
  opacity: 0; transform: translateY(16px);
  transition: opacity .9s ease, transform 1.2s var(--ease-out);
  transition-delay: calc(var(--i) * .22s + .45s);
}
.m-future .fu-scene.on .fu-stations > li { opacity: 1; transform: none; }
.m-future .fu-stations em {
  display: block; font: italic 400 clamp(22px, 2.2vw, 30px)/1 var(--serif-en); color: var(--dim);
}
.m-future .fu-stations b {
  display: block; height: 100px; margin-top: 6px;
  font: 900 clamp(52px, 5.6vw, 84px)/100px var(--serif-cn); color: var(--text);
}
.m-future .fu-stations > li:last-child b { color: var(--rust-lit); }
.m-future .fu-stations > li::before {
  content: ""; position: absolute; left: 0; top: 146px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--dim);
}
.m-future .fu-stations > li:last-child::before { opacity: 0; }
.m-future .fu-stations > li > p { margin-top: 40px; color: var(--dim); font-size: 14px; line-height: 1.8; max-width: 19em; }
.m-future .fu-stations > li .fu-anchor { left: 4px; top: 148px; }
.m-future .fu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.m-future .fu-chips li {
  font: 400 11px/1 var(--mono); letter-spacing: .04em; color: var(--dim);
  padding: 6px 8px; border: 1px solid var(--hairline);
}

/* =========================================================
   幕 2 门槛：两排台阶，一级级沉下去
   ========================================================= */
.m-future .fu-stairs { display: grid; gap: clamp(20px, 4vh, 40px); }
.m-future .fu-stair-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: end; }
.m-future .fu-stair-row .fu-row-label { margin: 0 0 6px; }
.m-future .fu-stair-row ol {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  height: clamp(110px, 17vh, 170px); align-items: end;
  border-bottom: 1px solid var(--fu-line);
}
.m-future .fu-stair-row li {
  position: relative; height: 100%;                       /* 起初三级一样高 */
  border-left: 1px solid var(--fu-line); border-top: 1px solid var(--fu-line);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--text) 7%, transparent), transparent);
  transition: height 1.6s var(--ease-out);
  transition-delay: calc(var(--i) * .14s + .5s);
}
.m-future .fu-stair-row li:last-child { border-right: 1px solid var(--fu-line); border-top-color: var(--fire-4); }
.m-future .fu-scene.on .fu-stair-row li { height: var(--h); }
.m-future .fu-stair-row li span {
  position: absolute; left: 12px; bottom: calc(100% + 8px); white-space: nowrap;
  font: 400 11px/1.5 var(--mono); letter-spacing: .04em; color: var(--faint);
}
.m-future .fu-stair-row li span b { display: block; font: 600 15px/1.4 var(--serif-cn); letter-spacing: .02em; color: var(--text); }
.m-future .fu-stair-row li:last-child span b { color: var(--fire-5); }
.m-future .fu-stair-row .fu-anchor { right: -20px; top: -6px; }
.m-future .fu-s2 .fu-stairs { padding-top: 44px; }
.m-future .fu-s2 .fu-stair-row + .fu-stair-row { padding-top: 44px; }

/* =========================================================
   幕 3 工作流：平台 → 我的年轮
   ========================================================= */
.m-future .fu-grow {
  display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 56px); align-items: center;
}
.m-future .fu-plat ul { display: grid; gap: 8px; }
.m-future .fu-plat li {
  padding: 11px 14px; border: 1px solid var(--hairline);
  font: 400 13px/1 var(--mono); letter-spacing: .06em; color: var(--dim);
  opacity: 0; transform: translateX(-12px);
  transition: opacity .8s ease, transform 1s var(--ease-out);
  transition-delay: calc(var(--i) * .1s + .4s);
}
.m-future .fu-plat li.more { border-style: dashed; color: var(--faint); }
.m-future .fu-scene.on .fu-plat li { opacity: 1; transform: none; }
.m-future .fu-plat-foot { margin-top: 14px; font-size: 13px; color: var(--faint); }

.m-future .fu-rings { position: relative; max-width: 460px; width: 100%; justify-self: center; }
.m-future .fu-rings svg { display: block; width: 100%; height: auto; overflow: visible; }
.m-future .fu-rings .in { stroke: var(--fu-line); stroke-dasharray: 3 5; }
.m-future .fu-rings .ring {
  fill: none; stroke: var(--fu-line); stroke-width: 1;
  transform-origin: 210px 210px; transform: scale(.2); opacity: 0;
  transition: transform 1.6s var(--ease-out), opacity 1s ease;
}
.m-future .fu-rings .r1 { stroke: var(--fire-4); transition-delay: .6s; }
.m-future .fu-rings .r2 { transition-delay: .95s; }
.m-future .fu-rings .r3 { transition-delay: 1.3s; }
.m-future .fu-rings .r4 { transition-delay: 1.65s; stroke-dasharray: 2 6; }
.m-future .fu-scene.on .fu-rings .ring { transform: none; opacity: 1; }
.m-future .fu-rings .lab { opacity: 0; transition: opacity .9s ease; }
.m-future .fu-rings .lab circle { fill: var(--gold-lit); }
.m-future .fu-rings .lab text { fill: var(--text); font: 600 14px var(--serif-cn); }
.m-future .fu-rings .l1 { transition-delay: 1s; }
.m-future .fu-rings .l2 { transition-delay: 1.35s; }
.m-future .fu-rings .l3 { transition-delay: 1.7s; }
.m-future .fu-rings .l4 { transition-delay: 2.05s; }
.m-future .fu-scene.on .fu-rings .lab { opacity: 1; }
.m-future .fu-rings .me { fill: var(--dim); font: 500 12px var(--mono); letter-spacing: .2em; }
.m-future .fu-a3 { left: 50%; top: 48%; }
.m-future .fu-rings-cap { margin-top: 10px; text-align: center; font: 500 11px/1 var(--mono); letter-spacing: .16em; color: var(--faint); }

/* =========================================================
   幕 4 差别：一屏一样的卡片，只有一张不同
   ========================================================= */
.m-future .fu-same {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1.1vw, 14px);
}
.m-future .fu-same .c {
  position: relative; aspect-ratio: 4 / 3; padding: 12% 12% 0;
  border: 1px solid var(--hairline);
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease, transform .9s var(--ease-out), border-color .4s ease;
  transition-delay: calc(var(--k) * .035s + .4s);
}
.m-future .fu-scene.on .fu-same .c { opacity: 1; transform: none; }
/* 一样的那些：一条标题杠 + 三个小方块，典型的生成式落地页 */
.m-future .fu-same .c::before {
  content: ""; display: block; height: 14%; width: 62%; background: var(--fu-line);
}
.m-future .fu-same .c::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 16%; height: 30%;
  background:
    linear-gradient(var(--fu-line), var(--fu-line)) 0 0 / 28% 100% no-repeat,
    linear-gradient(var(--fu-line), var(--fu-line)) 50% 0 / 28% 100% no-repeat,
    linear-gradient(var(--fu-line), var(--fu-line)) 100% 0 / 28% 100% no-repeat;
}
.m-future .fu-same:hover .c:not(.mine) { transition-delay: 0s; transform: rotate(-4deg) scale(.96); }
/* 不一样的那张 */
.m-future .fu-same .c.mine {
  border-color: var(--fire-4); border-radius: 44% 12% 44% 12%;
  background: color-mix(in srgb, var(--fire-3) 22%, transparent);
  transition-delay: 1.3s;
}
.m-future .fu-same .c.mine::before { width: 34%; height: 34%; border-radius: 50%; background: var(--fire-5); }
.m-future .fu-same .c.mine::after {
  left: 52%; right: 14%; bottom: 22%; height: 8%;
  background: var(--fire-4); box-shadow: 0 -12px 0 var(--fire-2);
}
.m-future .fu-same .fu-anchor { right: 6px; top: -4px; }

/* =========================================================
   幕 5 位置：五层 = 树的剖面，青色的线从根往上
   ========================================================= */
.m-future .fu-strata-wrap {
  display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px); align-items: stretch;
}
.m-future .fu-strata { position: relative; padding-left: 22px; }
.m-future .fu-strata-head, .m-future .fu-layer, .m-future .fu-base {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.7fr) minmax(0, 1.1fr);
  gap: clamp(14px, 2.4vw, 32px); align-items: start;
}
.m-future .fu-strata-head { padding-bottom: 12px; font: 500 11px/1 var(--mono); letter-spacing: .14em; color: var(--faint); }
.m-future .fu-strata-head span:last-child { color: var(--fu-ai); }
.m-future .fu-layer, .m-future .fu-base {
  position: relative; padding: clamp(11px, 1.7vh, 16px) 0; border-top: 1px solid var(--hairline);
  opacity: 0; transform: translateY(14px);
  transition: opacity .8s ease, transform 1s var(--ease-out), background .4s ease;
  transition-delay: calc((4 - var(--i)) * .15s + .5s);      /* 从根往上一层层出现 */
}
.m-future .fu-scene.on .fu-layer, .m-future .fu-scene.on .fu-base { opacity: 1; transform: none; }
.m-future .fu-layer:hover, .m-future .fu-layer:focus-visible { background: color-mix(in srgb, var(--text) 4%, transparent); outline: none; }
.m-future .fu-layer .nm, .m-future .fu-base .nm { position: relative; }
.m-future .fu-layer .nm b, .m-future .fu-base .nm b { display: block; font: 900 17px/1.4 var(--serif-cn); letter-spacing: .04em; }
.m-future .fu-layer .nm em { display: block; font: 600 13px/1.6 var(--serif-cn); color: var(--rust-lit); }
.m-future .fu-layer .nm u { display: block; margin-top: 4px; font: 400 10px/1.4 var(--mono); letter-spacing: .08em; color: var(--faint); }
.m-future .fu-layer p, .m-future .fu-base p { font-size: 14px; line-height: 1.75; color: var(--dim); }
.m-future .fu-layer p.ai, .m-future .fu-base p.ai { color: var(--fu-ai); font: 400 12px/1.8 var(--mono); letter-spacing: .02em; }
.m-future .fu-layer .fu-anchor { left: -44px; top: 12px; }
.m-future .fu-prin { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.m-future .fu-prin i { font: 400 10px/1 var(--mono); letter-spacing: .04em; color: var(--faint); padding: 5px 7px; border: 1px solid var(--hairline); transition: color .3s ease, border-color .3s ease; }
.m-future .fu-layer:hover .fu-prin i, .m-future .fu-layer:focus-visible .fu-prin i { color: var(--gold-lit); border-color: color-mix(in srgb, var(--gold-lit) 45%, transparent); }
.m-future .fu-base { border-top-color: var(--fu-ai); background: color-mix(in srgb, var(--fu-ai) 7%, transparent); }
.m-future .fu-base .nm b { color: var(--fu-ai); }
.m-future .fu-base p { color: var(--faint); }
/* 青色的线：从地基往上穿过每一层 */
.m-future .fu-vein {
  position: absolute; left: 4px; top: 30px; bottom: 0; width: 1px; background: var(--fu-ai);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 2.2s var(--ease-out) 1.1s;
  box-shadow: 0 0 10px color-mix(in srgb, var(--fu-ai) 60%, transparent);
}
.m-future .fu-scene.on .fu-vein { transform: scaleY(1); }

.m-future .fu-ops {
  display: flex; flex-direction: column; gap: 12px; align-self: stretch;
  padding: 18px 18px 20px; border: 1px dashed var(--fu-line);
  opacity: 0; transition: opacity 1s ease 1.5s;
}
.m-future .fu-scene.on .fu-ops { opacity: 1; }
.m-future .fu-ops p { font-size: 14px; line-height: 1.75; color: var(--dim); }
.m-future .fu-ops .fu-row-label { margin-bottom: 2px; font: 500 11px/1 var(--mono); color: var(--gold-lit); }
.m-future .fu-ops ul { display: flex; flex-wrap: wrap; gap: 6px; }
.m-future .fu-ops ul li { font: 400 11px/1 var(--mono); letter-spacing: .04em; color: var(--dim); padding: 6px 8px; border: 1px dashed var(--fu-line); }
.m-future .fu-ops .fu-ops-sign {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hairline);
  font: 400 11px/1.6 var(--mono); letter-spacing: .1em; color: var(--fu-ai);
}

/* =========================================================
   幕 6 收尾：叶子落地，长出新芽
   ========================================================= */
.m-future .fu-s6 .fu-wrap { justify-content: center; }
.m-future .fu-end { max-width: 860px; }
.m-future .fu-judge {
  font: 900 clamp(26px, 3.3vw, 46px)/1.5 var(--serif-cn); letter-spacing: .02em;
  opacity: 0; transform: translateY(14px);
  transition: opacity 1s ease .2s, transform 1.3s var(--ease-out) .2s;
}
.m-future .fu-scene.on .fu-judge { opacity: 1; transform: none; }
.m-future .fu-pick { display: flex; gap: 6px; margin-top: 16px; }
.m-future .fu-pick button {
  font: 400 11px/1 var(--mono); letter-spacing: .06em; color: var(--faint); cursor: pointer;
  padding: 7px 10px; background: none; border: 1px dashed var(--hairline);
  transition: color .3s ease, border-color .3s ease;
}
.m-future .fu-pick button:hover { color: var(--dim); }
.m-future .fu-pick button.on { color: var(--gold-lit); border-color: color-mix(in srgb, var(--gold-lit) 55%, transparent); }

.m-future .fu-sprout {
  position: relative; width: 288px; height: 180px; margin-top: clamp(20px, 4vh, 44px);
  border-bottom: 1px solid var(--fu-line);
}
.m-future .fu-sprout::after {            /* 地平线往两边伸出去 */
  content: ""; position: absolute; left: 100%; bottom: -1px; width: min(48vw, 620px); height: 1px;
  background: linear-gradient(to right, var(--fu-line), transparent);
}
.m-future .fu-sprout svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.m-future .fu-sprout path { fill: none; stroke: var(--hair-lit); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1.8s var(--ease-out); }
.m-future .fu-sprout .stem { transition-delay: .9s; }
.m-future .fu-sprout .t1 { transition-delay: 1.7s; }
.m-future .fu-sprout .t2 { transition-delay: 2s; }
.m-future .fu-scene.on .fu-sprout path { stroke-dashoffset: 0; }
.m-future .fu-sprout .lf { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); transition: opacity .8s ease, transform 1s var(--ease-out); }
.m-future .fu-sprout .f1 { fill: var(--fire-3); transition-delay: 2.3s; }
.m-future .fu-sprout .f2 { fill: var(--fire-5); transition-delay: 2.6s; }
.m-future .fu-scene.on .fu-sprout .lf { opacity: 1; transform: none; }
.m-future .fu-a6 { left: 144px; top: 68px; }

.m-future .fu-believe { margin-top: clamp(22px, 4vh, 40px); display: grid; gap: 6px; }
.m-future .fu-believe p {
  font: 600 clamp(16px, 1.5vw, 20px)/1.8 var(--serif-cn); color: var(--dim); letter-spacing: .04em;
  opacity: 0; transition: opacity 1.2s ease;
}
.m-future .fu-believe p:nth-child(1) { transition-delay: 2.6s; }
.m-future .fu-believe p:nth-child(2) { transition-delay: 2.9s; }
.m-future .fu-scene.on .fu-believe p { opacity: 1; }

/* =========================================================
   900 左右的窗口
   ========================================================= */
@media (max-width: 1000px) {
  .m-future .fu-cover-grid { gap: 20px; }
  .m-future .fu-cover-copy { flex-basis: 40%; }
  .m-future .fu-guide .say { font-size: 14px; }
  .m-future .fu-layer, .m-future .fu-base { padding: 9px 0; }
  .m-future .fu-layer .nm u { display: none; }
  .m-future .fu-head { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .m-future .fu-body { max-width: 36em; }
  .m-future .fu-split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; }
  .m-future .fu-grow { grid-template-columns: minmax(0, .6fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; }
  .m-future .fu-strata-wrap { grid-template-columns: 1fr; gap: 20px; }
  .m-future .fu-ops { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
  .m-future .fu-ops .fu-row-label { width: 100%; }
  .m-future .fu-ops .fu-ops-sign { margin: 0; padding: 0; border: 0; width: 100%; }
  .m-future .fu-rings .lab text { font-size: 15px; }
}

/* =========================================================
   手机：每幕按内容高度排，图形竖着排
   ========================================================= */
@media (max-width: 760px) {
  .m-future .fu-scene { min-height: 0; padding: 72px var(--gutter) 56px; scroll-snap-align: none; }
  .m-future .fu-snap { scroll-snap-align: none; }
  .m-future .fu-s6 { min-height: 92svh; }
  .m-future .fu-dots { display: none; }
  .m-future .fu-s0 { --step: 70vh; min-height: 0; padding: 0; }
  .m-future .fu-s0-stick { padding: 64px var(--gutter) 16px; }
  .m-future .fu-cover-grid { flex-direction: column; gap: 10px; }
  .m-future .fu-cover-copy { flex: none; justify-content: flex-start; }
  .m-future .fu-s0 .fu-eyebrow { margin-bottom: 10px; }
  .m-future .fu-cover { font-size: 38px; }
  .m-future .fu-cover-lede { margin-top: 6px; font-size: 15px; }
  .m-future .fu-cover-lede > span { display: inline; }
  .m-future .fu-guide { margin-top: 12px; padding-top: 12px; min-height: 216px; }
  .m-future .fu-guide h3 { font-size: 20px; margin: 6px 0 4px; }
  .m-future .fu-guide .say { font-size: 13px; line-height: 1.7; }
  .m-future .fu-guide .ix { margin-top: 8px; font-size: 13px; }
  .m-future .fu-guide .who { margin-top: 8px; gap: 6px 12px; }
  .m-future .fu-walk { position: absolute; right: 0; top: 0; margin: 0; }
  .m-future .fu-next { padding: 8px 10px; font-size: 11px; }
  .m-future .fu-count { display: none; }
  .m-future .fu-map-tip { display: none; }
  .m-future .fu-title { font-size: 30px; }

  .m-future .fu-split, .m-future .fu-grow { grid-template-columns: 1fr; gap: 32px; }

  .m-future .fu-stations { grid-template-columns: 1fr; gap: 0; padding-left: 26px; }
  .m-future .fu-road { padding-bottom: 0; }
  .m-future .fu-stations::before { left: 4px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; transform: scaleY(0); transform-origin: top; }
  .m-future .fu-scene.on .fu-stations::before { transform: scaleY(1); }
  .m-future .fu-stations > li { padding-bottom: 30px; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; }
  .m-future .fu-stations > li::before { left: -26px; top: 8px; }
  .m-future .fu-stations > li:last-child::before { opacity: 1; border-color: var(--fire-4); }
  .m-future .fu-stations b { height: auto; margin: 0; font-size: 36px; line-height: 1.1; }
  .m-future .fu-stations em { font-size: 20px; }
  .m-future .fu-stations > li > p, .m-future .fu-chips { grid-column: 1 / -1; margin-top: 8px; max-width: none; }
  .m-future .fu-stations > li .fu-anchor { left: -22px; top: -10px; }

  .m-future .fu-stair-row { grid-template-columns: 1fr; }
  .m-future .fu-stair-row .fu-row-label { margin-bottom: 52px; }
  .m-future .fu-s2 .fu-stairs, .m-future .fu-s2 .fu-stair-row + .fu-stair-row { padding-top: 8px; }
  .m-future .fu-stair-row ol { height: 120px; }
  .m-future .fu-stair-row .fu-anchor { right: 10px; top: -22px; }
  .m-future .fu-stair-row li span { left: 6px; white-space: normal; font-size: 10px; }
  .m-future .fu-stair-row li span b { font-size: 13px; }

  .m-future .fu-plat ul { grid-template-columns: repeat(4, auto); justify-content: start; }
  .m-future .fu-rings { padding: 0 16%; }
  .m-future .fu-rings .lab text { font-size: 20px; }
  .m-future .fu-rings .me { font-size: 16px; }

  .m-future .fu-same { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .m-future .fu-same .c:nth-child(n+17) { display: none; }

  .m-future .fu-strata-head { display: none; }
  .m-future .fu-layer, .m-future .fu-base { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .m-future .fu-layer .nm b, .m-future .fu-layer .nm em { display: inline; }
  .m-future .fu-layer .nm em { margin-left: 10px; }
  .m-future .fu-layer .fu-anchor { left: auto; right: 14px; top: 10px; }
  .m-future .fu-ops { flex-direction: column; }
  .m-future .fu-judge { font-size: 24px; }
}

/* =========================================================
   减少动效：全部直接显示，叶子不飞
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .m-future *, .m-future *::before, .m-future *::after { transition: none !important; }
  .m-future .fu-rise > span, .m-future .fu-body, .m-future .fu-notes li,
  .m-future .fu-stations > li, .m-future .fu-plat li, .m-future .fu-same .c,
  .m-future .fu-layer, .m-future .fu-base, .m-future .fu-ops, .m-future .fu-judge, .m-future .fu-believe p,
  .m-future .fu-rings .lab { opacity: 1; transform: none; }
  .m-future .fu-rings .ring { opacity: 1; transform: none; }
  .m-future .fu-stations::before, .m-future .fu-vein { transform: none; }
  .m-future .fu-map .stop { opacity: 1; }
  .m-future .fu-map .stop .doodle { transform: none; }
  .m-future .fu-map .stop.now .blink, .m-future .fu-map .stop.now .float, .m-future .fu-map .stop.now .lid { animation: none; }
  .m-future .fu-stair-row li { height: var(--h); }
  .m-future .fu-sprout path { stroke-dashoffset: 0; }
  .m-future .fu-sprout .lf { opacity: 1; transform: none; }
  .m-future .fu-leaf { display: none; }
}

/* =========================================================
   静态模式（减少动效时由 module.js 加 .is-static）：封面不贴住，解说词全列出来，地图整张摊开
   ========================================================= */
.m-future.is-static .fu-s0 { height: auto; }
.m-future.is-static .fu-s0-stick { position: static; height: auto; }
.m-future.is-static .fu-cover-copy { justify-content: flex-start; }
.m-future.is-static .fu-guide { display: block; }
.m-future.is-static .fu-guide > li { opacity: 1; transform: none; pointer-events: auto; padding: 0 0 22px; }
.m-future.is-static .fu-walk, .m-future.is-static .fu-map-tip { display: none; }
.m-future.is-static .fu-map { -webkit-mask-image: none; mask-image: none; cursor: default; }
.m-future.is-static .fu-map-world { position: static; }