/* 颜色、字体、缓动等设计变量在 tokens.css，这里只写首屏的样式 */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* =========================================================
   首屏：滚动轨道 + 吸顶舞台
   ========================================================= */
/* 前 400vh 走五段，最后 100vh 是「叶子被刮走」的过场（见 js/dance.js） */
.tree-track { position: relative; height: 600vh; height: 600svh; }

.stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 67% 38%, #1E1D22 0%, rgba(17, 18, 22, 0) 70%),
    var(--bg);
  --intro-ground: 0;
  --intro-frame: 0;
}
/* 暗角 */
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(120% 95% at 55% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

.view { position: absolute; inset: 0; }

/* 地平线：上面看得见，下面看不见 */
.soil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0, transparent var(--ground-y, 60%),
    rgba(24, 30, 54, .22) var(--ground-y, 60%), rgba(8, 10, 17, .85) 100%);
  opacity: var(--intro-ground);
}
.ground {
  position: absolute; left: 0; right: 0; top: var(--ground-y, 60%); height: 1px;
  background: linear-gradient(to right, transparent 0, transparent 36%, rgba(243, 237, 228, .1) 52%, rgba(243, 237, 228, .1) 82%, transparent 100%);
  transform: scaleX(var(--intro-ground));
  transform-origin: var(--tree-x, 64%) 0;
}

/* 超大标题：放在树后面，被树冠挡住一部分 */
.headline {
  position: absolute; left: var(--gutter); top: clamp(88px, 17vh, 190px);
  font: 900 clamp(36px, 4.8vw, 92px)/1.12 var(--serif-cn);
  letter-spacing: -.01em;
  color: var(--text);
  transition: opacity .8s ease, transform 1s var(--ease-out);
}
.headline .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.headline .ln > span {
  display: inline-block; transform: translateY(108%);
  transition: transform 1.3s var(--ease-out);
}
.headline .ln + .ln > span { color: var(--rust-lit); transition-delay: .14s; }
.t-text .headline .ln > span { transform: none; }
.stage:not([data-stage="intro"]) .headline { opacity: 0; transform: translateY(-24px); }
.headline.is-short { font-size: clamp(40px, 6vw, 112px); }
.headline .from {
  display: block; margin-top: 18px;
  font: 400 14px/1.4 var(--serif-cn); letter-spacing: .14em; color: var(--faint);
  opacity: 0; transition: opacity 1s ease .6s;
}
.headline .from::before { content: "—— "; }
.t-text .headline .from { opacity: 1; }

/* 评审用的方案切换面板 */
.review {
  position: fixed; top: 14px; right: 14px; z-index: 50; max-width: 268px;
  font: 12px/1.45 var(--sans); color: var(--text);
  background: rgba(18, 18, 22, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--hairline); border-radius: 10px; padding: 10px 12px;
}
.review summary { cursor: pointer; list-style: none; font: 500 11px/1 var(--mono); letter-spacing: .14em; color: var(--gold-lit); }
.review summary::-webkit-details-marker { display: none; }
.review p { margin: 12px 0 6px; font-size: 11px; color: var(--faint); letter-spacing: .1em; }
.review .row { display: flex; flex-wrap: wrap; gap: 6px; }
.review .col { display: flex; flex-direction: column; gap: 4px; }
.review button {
  appearance: none; font: inherit; text-align: left; cursor: pointer;
  background: transparent; color: var(--dim);
  border: 1px solid var(--hairline); border-radius: 6px; padding: 5px 8px;
}
.review button:hover { color: var(--text); }
.review button.on { color: var(--text); border-color: rgba(221, 187, 114, .7); background: rgba(221, 187, 114, .1); }

/* 每一段的背景大字：只描边，几乎看不见，但撑起画面 */
.bigword {
  position: absolute; left: var(--tree-x, 64%); top: 46%;
  transform: translate(-50%, -50%) scale(.96);
  font: 900 clamp(180px, 30vw, 520px)/1 var(--serif-cn);
  color: transparent;
  -webkit-text-stroke: 1px rgba(243, 237, 228, .1);
  white-space: nowrap; pointer-events: none;
  opacity: 0;
  transition: opacity .9s ease, transform 1.4s var(--ease-out);
}
.bigword.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bigword[data-key="ai"] { font-family: var(--serif-en); font-style: italic; font-weight: 400; -webkit-text-stroke-color: rgba(221, 187, 114, .16); }

#scene {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; outline: none;
  cursor: grab; touch-action: pan-y;
}
#scene.dragging { cursor: grabbing; }
#scene:focus-visible { box-shadow: inset 0 0 0 1px var(--gold); }

/* 三角形框：开场时沿边描出来 */
.frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.frame .tri {
  fill: none; stroke: rgba(221, 187, 114, .42); stroke-width: 1;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--intro-frame));
}
.frame .strata { stroke: rgba(243, 237, 228, .07); stroke-dasharray: 2 6; opacity: var(--intro-frame); }
.frame .band { fill-opacity: 0; transition: fill-opacity .8s ease; }
.frame .band.on { fill-opacity: .07; }

/* 层级标签：只显示当前亮起的层 */
.ruler { position: absolute; inset: 0; pointer-events: none; }
.rl {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap; color: var(--c);
  opacity: 0; transition: opacity .6s ease;
}
.rl::before { content: ""; width: 0; height: 1px; background: currentColor; transition: width .8s var(--ease-out); }
.rl b { font: 600 15px/1 var(--serif-cn); letter-spacing: .06em; }
.rl i { font: 400 10px/1 var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.rl.on { opacity: 1; }
.rl.on::before { width: 32px; }
.stage[data-stage="intro"] .rl,
.stage[data-stage="ai"] .rl:not(.rl--ai) { opacity: 0; }
.rl--ai { flex-direction: column; gap: 6px; }
.rl--ai::before { display: none; }
.rl--ai b { font: italic 400 20px/1 var(--serif-en); letter-spacing: .02em; }

/* =========================================================
   文字层
   ========================================================= */
.brand {
  position: absolute; left: var(--gutter); top: clamp(20px, 4vh, 36px); z-index: 6;
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--dim); letter-spacing: .04em;
}
.brand em { font: italic 400 15px/1 var(--serif-en); margin-left: 6px; color: var(--faint); }
.brand-mark {
  width: 14px; height: 12px; background: var(--gold);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.cards {
  position: absolute; left: var(--gutter); bottom: clamp(96px, 15vh, 150px); z-index: 6;
  width: min(440px, 38vw);
  display: grid;
}
.card {
  grid-area: 1 / 1; align-self: end;
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .9s var(--ease-out);
  pointer-events: none;
}
.card.on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .18s; }
.card[data-key="intro"] { opacity: 0; }
.t-text .card[data-key="intro"].on { opacity: 1; transform: none; transition-delay: .9s; }

.eyebrow {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
  font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 18px;
}
.eyebrow span:first-child { color: var(--c, var(--gold-lit)); }
.lede { font-size: 15px; line-height: 1.9; color: var(--dim); max-width: 25em; }

.years {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font: 400 clamp(26px, 2.4vw, 34px)/1 var(--serif-en);
  color: var(--text);
}
.years .to { width: 28px; height: 1px; background: var(--faint); }
.card h2 { margin-top: 18px; font: 600 clamp(22px, 2.1vw, 30px)/1.35 var(--serif-cn); }
.org { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--faint); }
.lesson {
  margin-top: 24px; padding-left: 16px; border-left: 2px solid var(--c, var(--gold));
  font: 600 clamp(17px, 1.5vw, 20px)/1.7 var(--serif-cn); color: var(--text);
}
.note { margin-top: 12px; font-size: 13.5px; line-height: 1.85; color: var(--dim); }

.card[data-key="design"]      { --c: var(--rust-lit); }
.card[data-key="interaction"] { --c: #C4936E; }
.card[data-key="product"]     { --c: #9AA7D6; }
.card[data-key="ai"]          { --c: var(--gold-lit); }

/* 待确认占位：一眼能看出哪里还没填 */
.tbd {
  display: inline-block; font: 500 13px/1.2 var(--sans); letter-spacing: .04em;
  color: var(--gold-lit); border: 1px dashed rgba(221, 187, 114, .55);
  padding: 5px 8px; vertical-align: middle;
}

/* 段落导航 */
.steps {
  position: absolute; left: var(--gutter); bottom: clamp(24px, 4.5vh, 44px); z-index: 6;
  display: flex; gap: 4px;
}
.steps button {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: 500 12px/1 var(--sans); color: var(--faint); letter-spacing: .06em;
  padding: 16px 14px 6px 0; min-width: 64px; text-align: left; position: relative;
  transition: color .4s ease;
}
.steps button i { font: 400 10px/1 var(--mono); font-style: normal; margin-right: 6px; opacity: .6; }
.steps button::before {
  content: ""; position: absolute; left: 0; right: 10px; top: 0; height: 1px;
  background: var(--hairline);
}
.steps button::after {
  content: ""; position: absolute; left: 0; right: 10px; top: 0; height: 1px;
  background: var(--text); transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease-out);
}
.steps button.on { color: var(--text); }
.steps button.on::after { transform: scaleX(1); }
.steps button:hover { color: var(--dim); }
.steps button:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

.hint {
  position: absolute; right: var(--gutter); bottom: clamp(24px, 4.5vh, 44px); z-index: 6;
  display: flex; align-items: center; gap: 12px;
  font: 500 11px/1 var(--mono); letter-spacing: .16em; color: var(--faint);
  opacity: 0; transition: opacity .8s ease;
}
.t-done .hint { opacity: 1; }
.t-done .hint.gone { opacity: 0; }
.hint-line { width: 40px; height: 1px; background: var(--faint); position: relative; overflow: hidden; }
.hint-line::after {
  content: ""; position: absolute; inset: 0; background: var(--gold-lit);
  animation: hintline 2.4s var(--ease-out) infinite;
}
@keyframes hintline { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* 胶片颗粒 */
.grain {
  position: absolute; inset: -50%; z-index: 7; pointer-events: none;
  opacity: .07; 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='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

.fallback { position: absolute; left: 46%; top: 12%; width: min(50vw, 600px); height: 76%; }
@media (max-width: 760px) { .fallback { left: 4%; width: 92%; top: 16%; height: 56%; } }

.next {
  min-height: 40vh; display: grid; place-items: center; padding: 64px var(--gutter);
  border-top: 1px solid var(--hairline); color: var(--faint); font-size: 14px; text-align: center;
}

/* =========================================================
   窄窗口与手机
   ========================================================= */
@media (max-width: 760px) {
  .stage { background: radial-gradient(90% 60% at 50% 40%, #1E1D22 0%, rgba(17, 18, 22, 0) 70%), var(--bg); }
  .headline { top: 64px; font-size: clamp(26px, 7.6vw, 44px); right: var(--gutter); }
  .bigword { font-size: 62vw; top: 40%; }
  .ground { background: linear-gradient(to right, transparent 0, rgba(243, 237, 228, .25) 20%, rgba(243, 237, 228, .25) 80%, transparent 100%); }
  .cards { width: auto; right: var(--gutter); bottom: 72px; }
  .card h2 { margin-top: 10px; font-size: 20px; }
  .years { font-size: 24px; }
  .lesson { margin-top: 12px; font-size: 16px; }
  .note, .org { display: none; }
  .eyebrow { margin-bottom: 10px; }
  .lede { font-size: 14px; line-height: 1.75; }
  .steps { right: var(--gutter); bottom: 14px; }
  .steps button { flex: 1; min-width: 0; padding-right: 6px; }
  .steps button i { display: none; }
  .hint { display: none; }
  .rl:not(.rl--ai) { display: none; }
  .rl b { font-size: 12px; }
  .rl i { display: none; }
  .rl.on::before { width: 14px; }
  .rl--ai b { font-size: 16px; }
}

/* =========================================================
   静态模式：减少动效 / 没有 WebGL
   ========================================================= */
.is-static .tree-track { height: auto; }
.is-static .stage { position: relative; height: auto; overflow: visible; }
.is-static .view { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.is-static .cards { bottom: auto; top: calc(100svh - 230px); }
.is-static .steps, .is-static .hint, .is-static .grain { display: none; }
.is-static .headline .ln > span { transform: none; transition: none; }
.is-static .card, .is-static .card[data-key="intro"].on { transition: none; }
.is-static .card[data-key="intro"] { opacity: 1; transform: none; }
.is-static .cards .card:not([data-key="intro"]) { display: none; }
.is-static .stage::after { position: absolute; height: 100svh; }
.static-list { display: none; }
.is-static .static-list {
  position: relative; z-index: 6;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 40px; padding: 48px var(--gutter) 80px;
  border-top: 1px solid var(--hairline);
}
.is-static .static-list .card { grid-area: auto; align-self: start; opacity: 1; transform: none; pointer-events: auto; }
.is-static .static-list .note { display: block; }
@media (max-width: 760px) {
  .is-static .cards { top: calc(100svh - 190px); }
}

/* =========================================================
   代码入侵（tree=code）
   ========================================================= */
/* 背景代码雨：在大字和标题后面；地面以下更浓 */
.coderain {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  opacity: 0; transition: opacity .4s linear;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.28) 0, rgba(0,0,0,.28) var(--ground-y, 60%), #000 calc(var(--ground-y, 60%) + 60px));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.28) 0, rgba(0,0,0,.28) var(--ground-y, 60%), #000 calc(var(--ground-y, 60%) + 60px));
}
.tree-code .rl--ai { display: none; }
.tree-code .bigword[data-key="ai"] { -webkit-text-stroke-color: rgba(92, 255, 176, .2); }
.tree-code .card[data-key="ai"] { --c: #5CFFB0; }

/* 「AI 介入」提示：挂在扫描圈旁边，像终端一样逐行打出来（位置由 JS 跟着树冠算） */
.ai-hud {
  position: absolute; left: 0; top: 0; z-index: 6;
  width: max-content; max-width: 300px; padding-left: 14px; border-left: 1px solid rgba(92, 255, 176, .5);
  font: 500 12px/1.9 var(--mono); letter-spacing: .06em; color: #5CFFB0;
  text-shadow: 0 0 10px rgba(92, 255, 176, .45);
  opacity: 0; transition: opacity .5s ease;
  pointer-events: none;
}
.ai-hud.on { opacity: 1; }
.ai-hud p { display: flex; gap: 8px; min-height: 1.9em; }
.ai-hud b { color: rgba(92, 255, 176, .6); font-weight: 400; }
.ai-hud .hud-k { font-size: 10px; letter-spacing: .2em; color: rgba(92, 255, 176, .55); min-height: 0; margin-bottom: 2px; }

/* 扫描圈：同心圆、虚线环、雷达扫描、瞄准框、几何符号 */
.scan { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; overflow: visible; }
.scan * { vector-effect: non-scaling-stroke; }
.scan circle, .scan path, .scan polyline { fill: none; stroke: #5CFFB0; stroke-width: 1; }
.scan .ring { stroke-opacity: .5; }
.scan .dash circle { stroke-opacity: .7; stroke-dasharray: 2 7; }
.scan .inner circle { stroke-opacity: .35; stroke-dasharray: 24 10; }
.scan .inner path, .scan .ticks { stroke-opacity: .8; }
.scan .brackets { stroke-opacity: .9; stroke-width: 1.4; }
.scan .ping { stroke: #7CF4FF; }
.scan .sweep path { fill: url(#none); fill: rgba(92, 255, 176, .1); stroke: none; }
.scan .orbit text { fill: #5CFFB0; font: 12px var(--mono); text-anchor: middle; dominant-baseline: middle; opacity: .8; }
.scan .leader { stroke-opacity: .55; }
@media (max-width: 760px) {
  .ai-hud { left: var(--gutter); top: 66%; font-size: 11px; max-width: 80vw; }
}

/* 代码入侵版：左侧大标题一直在；第二行的字会被代码一个个侵入 */
.stage.tree-code .headline { opacity: 1; transform: none; }
.headline .ch { font-style: normal; transition: color .5s ease, text-shadow .5s ease; }
.headline .ch.inf { color: #5CFFB0; text-shadow: 0 0 14px rgba(92, 255, 176, .45); }