/*
 * ③ 五步流程 + ④ 能力四段。
 * 流程：左边文字随滚动逐步点亮（产品同款状态圆点），右边粘住的画面从噪点里一步步显影，每一步叠一层玻璃界面。
 * 能力：每段一张真作品画面，上面浮着产品里的那一层（角色镜头、对话、审剧意见、看板）——画面在后、界面在前。
 */

/* ── 五步流程 ── */
.flow {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-xl);
  margin-top: var(--sp-section);
}

.flow-steps { list-style: none; margin: 0; padding: 0; }

.flow-step {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.28;
  transition: opacity var(--t-slow) var(--ease);
}

.flow-step.is-active { opacity: 1; }

.flow-num {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--c-primary-soft);
  font-variant-numeric: tabular-nums;
}

/* 状态圆点：灰 = 还没到，主色呼吸 = 正在这一步，绿 = 已经走过 */
.step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-text-4); transition: background 400ms; }
.flow-step.is-active .step-dot { background: var(--c-primary); animation: dot-pulse 1200ms ease-in-out infinite; }
.flow-step.is-done .step-dot { background: var(--c-success); }

@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 124, 246, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(139, 124, 246, 0); }
}

.flow-step h3 { margin-top: 16px; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.15; color: var(--c-text-strong); }
.flow-step p { max-width: 420px; margin-top: 18px; font-size: var(--fs-lead); color: var(--c-text-3); }
/* 两句各占一行，断在标点上；放不下时各自均匀折行 */
.flow-step p > span { display: block; text-wrap: balance; }

.flow-stage {
  position: sticky;
  top: calc(var(--header-h) + 6vh);
  height: min(70vh, 660px);
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
  background: var(--c-bg-deepest);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--c-hairline);
}

/* 画面：海报静帧做显影（模糊一张图很便宜），最后一步换成播放的片段 */
.stage-still,
.flow-stage video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stage-still {
  transform: scale(1.08);
  filter: blur(26px) saturate(0.5) brightness(0.7);
  transition: filter var(--t-fade) var(--ease), transform var(--t-fade) var(--ease);
}

.flow-stage video { opacity: 0; transition: opacity var(--t-slow) var(--ease); }

.stage-noise {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.55;
  mix-blend-mode: overlay;
  transition: opacity var(--t-fade) var(--ease);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.flow-stage[data-stage="1"] .stage-still { filter: blur(18px) saturate(0.6) brightness(0.75); }
.flow-stage[data-stage="2"] .stage-still { filter: blur(11px) saturate(0.7) brightness(0.8); }
.flow-stage[data-stage="3"] .stage-still { filter: blur(4px) saturate(0.9) brightness(0.85); transform: scale(1.03); }
.flow-stage[data-stage="4"] .stage-still { filter: none; transform: none; }
.flow-stage[data-stage="4"] video { opacity: 1; }
.flow-stage[data-stage="1"] .stage-noise { opacity: 0.42; }
.flow-stage[data-stage="2"] .stage-noise { opacity: 0.3; }
.flow-stage[data-stage="3"] .stage-noise { opacity: 0.14; }
.flow-stage[data-stage="4"] .stage-noise { opacity: 0; }

/* 顶上一条玻璃意图条：这部剧从哪一句话开始 */
.stage-intent {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 18px;
  border: 1px solid var(--c-hairline);
  /* 不用胶囊：画面窄时意图句折成两行，胶囊会变成两头尖的长条；单行时这个圆角看着仍像胶囊 */
  border-radius: 22px;
  background: rgba(13, 14, 20, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 15px;
  color: var(--c-text-strong);
}

/* 不截断：省略号会把「首集停在悬念上」吃掉，手机上只剩半句 */
.stage-intent .prompt-text { flex: 1; line-height: 1.5; }
.stage-intent .prompt-key { margin-top: 2px; }

/* 每一步叠一层：只显示当前这一步的 */
.stage-layer-ui {
  position: absolute;
  /* 让出意图条：它在窄画面上会折成两行 */
  inset: 104px 24px 64px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  pointer-events: none;
}

.flow-stage[data-stage="0"] [data-ui="0"],
.flow-stage[data-stage="1"] [data-ui="1"],
.flow-stage[data-stage="2"] [data-ui="2"],
.flow-stage[data-stage="3"] [data-ui="3"] { opacity: 1; transform: none; }

/* 玻璃小件：人物节点、分集、意见卡共用 */
.node,
.eps span,
.note,
.task,
.vg-tag {
  border: 1px solid var(--c-hairline);
  background: rgba(13, 14, 20, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.node {
  position: absolute;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 14px;
  color: var(--c-text-2);
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.node.is-main { border-color: rgba(139, 124, 246, 0.5); color: var(--c-text-strong); box-shadow: 0 0 30px -6px var(--c-primary-glow); }

.eps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-content: center; }
.eps span { padding: 14px 16px; border-radius: var(--r-md); font-size: 14px; color: var(--c-text-3); }
.eps .is-hl { grid-column: span 2; border-color: rgba(139, 124, 246, 0.5); background: rgba(139, 124, 246, 0.18); color: var(--c-text-strong); }

.notes { display: grid; align-content: end; justify-items: end; gap: 12px; }

.note {
  max-width: 360px;
  padding: 14px 18px;
  border-left: 2px solid var(--c-primary);
  border-radius: 4px var(--r-md) var(--r-md) 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text-2);
}

.panels { inset: 84px 24px 64px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; }
.panels i { border: 1px solid rgba(255, 255, 255, 0.42); border-radius: var(--r-sm); }

.stage-cap {
  position: absolute;
  left: 20px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(8, 9, 15, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: var(--fs-tiny);
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.86);
}

.stage-cap i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary); animation: dot-pulse 1200ms ease-in-out infinite; }
.flow-stage[data-stage="4"] .stage-cap i { background: var(--c-success); animation: none; }

/* ── ④ 能力：一段一句大字 + 一张画面，左右交替 ── */
.cap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--sp-xl);
}

.cap + .cap { margin-top: var(--sp-section); }
/* 左右交替时画面始终占宽的那一栏 */
.cap.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cap.is-flip .cap-text { order: 2; }
.cap-text h3 { margin-top: 18px; font-size: clamp(32px, 3.8vw, 54px); line-height: 1.2; color: var(--c-text-strong); }
.cap-text p { max-width: 440px; margin-top: 18px; font-size: var(--fs-lead); color: var(--c-text-3); }
/* 两句各占一行，断在标点上；放不下时各自均匀折行 */
.cap-text p > span { display: block; text-wrap: balance; }

.vignette {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(70% 60% at 30% 20%, rgba(139, 124, 246, 0.16), transparent 70%), var(--c-bg-deepest);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--c-hairline);
}

.vg-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) saturate(0.85); }

/* 一致：同一部剧的三个镜头叠成一摞 */
.vg-shot {
  position: absolute;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.vg-shot video { width: 100%; height: 100%; object-fit: cover; }
.vg-shot:nth-child(1) { left: 6%; top: 9%; width: 60%; z-index: 1; }
.vg-shot:nth-child(2) { right: 5%; top: 16%; width: 42%; z-index: 2; }
.vg-shot:nth-child(3) { right: 16%; bottom: 9%; width: 44%; z-index: 3; }

/* 同一段片子取三种景别：远景原样，中景与特写都放大到同一个人（床上的女孩）——换了镜头还是同一个人 */
.vg-shot:nth-child(2) video { transform: scale(1.7); transform-origin: 22% 44%; }
.vg-shot:nth-child(3) video { transform: scale(2.8); transform-origin: 26% 30%; }

.vg-shot b {
  position: absolute;
  left: 10px;
  top: 8px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: rgba(8, 9, 15, 0.55);
  font-weight: inherit;
  font-size: var(--fs-tiny);
  letter-spacing: 0.12em;
  color: var(--c-text-2);
}

.vg-tag {
  position: absolute;
  left: 22px;
  bottom: 20px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--c-text-2);
}

.vg-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-success); }

/* 对话、审剧、看板：都是一块玻璃面板浮在画面上 */
.vg-chat, .vg-script, .vg-board {
  position: absolute;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-panel);
  background: rgba(13, 14, 20, 0.62);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--btn-edge), 0 30px 80px -30px rgba(0, 0, 0, 0.9);
}

.vg-chat { right: 7%; bottom: 10%; width: min(400px, 76%); display: grid; gap: 12px; }
.bubble { margin: 0; padding: 12px 16px; border-radius: 18px; font-size: 14px; line-height: 1.6; }
.bubble.is-user { justify-self: end; max-width: 86%; border-bottom-right-radius: 6px; background: rgba(139, 124, 246, 0.2); color: var(--c-text-strong); }
.bubble.is-ai { display: grid; gap: 9px; border-bottom-left-radius: 6px; background: rgba(255, 255, 255, 0.05); }

.vg-state { display: flex; align-items: center; gap: 8px; color: var(--c-text-2); }
.vg-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-success); }

/* 面板里写真句子，不用灰条：灰条像没加载完的占位 */
.vg-reply { color: var(--c-text-2); }

.vg-script { left: 7%; top: 10%; width: min(440px, 80%); display: grid; gap: 14px; }
.vg-scene { font-size: 13px; letter-spacing: 0.08em; color: var(--c-text-2); }
.vg-line { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; font-size: 13px; color: var(--c-text-3); }
.vg-line b { font-weight: inherit; }
.vg-line span { color: var(--c-text-2); }
/* 被审剧标出的那句：主色描边，和下面的意见对上 */
.vg-line.is-flag span {
  justify-self: start;
  margin-left: -8px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(139, 124, 246, 0.18);
  box-shadow: inset 0 0 0 1px rgba(139, 124, 246, 0.5);
  color: var(--c-text-strong);
}
.vg-script .note { max-width: none; margin-top: 4px; }

.vg-board { left: 6%; right: 6%; bottom: 9%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vg-col { display: grid; align-content: start; gap: 10px; }
.vg-col b { font-weight: inherit; font-size: 13px; letter-spacing: 0.16em; color: var(--c-text-3); }

.task {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--c-text-2);
}

.task i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c-text-4); }
.task.is-done i { background: var(--c-success); }
.task.is-run i { background: var(--c-primary); animation: dot-pulse 1200ms ease-in-out infinite; }

/* ── 窄屏：画面吸顶、文字在下面滚过，仍是「滚到哪步换哪步」 ── */
@media (max-width: 860px) {
  .flow, .cap, .cap.is-flip { grid-template-columns: 1fr; gap: var(--sp-lg); }
  /* 吸顶时让出悬浮导航的高度（16 + 52 + 8） */
  .flow-stage { top: 76px; z-index: 2; height: 46vh; order: -1; }
  .flow-step { min-height: 56vh; }
  /* 意图句在手机上收小一号，最多折两行；底下的玻璃层从意图条下面开始 */
  .stage-intent { padding: 10px 14px; }
  .stage-intent .prompt-text { font-size: 14px; }
  .stage-layer-ui { inset: 100px 14px 52px; }
  /* 三列：第 4 集占满一行，去掉第 8 集正好排满三行，不压到底下的状态条 */
  .eps { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .eps span { padding: 9px 10px; font-size: 13px; }
  .eps .is-hl { grid-column: span 3; }
  .eps span:last-child { display: none; }
  .notes .note:first-child { display: none; }
  .cap.is-flip .cap-text { order: 0; }
  .vg-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px; }
  .task { padding: 7px 8px; font-size: 12px; }
  .vg-chat, .vg-script { padding: 14px; }
}

/* 减少动态效果：由 config.js 在 <html> 上加 reduce-motion（系统设置决定，?motion 可强制打开） */
.reduce-motion .flow-step.is-active .step-dot, .reduce-motion .stage-cap i, .reduce-motion .task.is-run i { animation: none; }

/* 画面变窄时面板会折行变高：两栏偏窄的那段用 4:3，手机用方画面，面板才不被裁掉（一致那段是三张叠片，不用改） */
@media (min-width: 861px) and (max-width: 1080px) {
  .vignette:not(.vg-cast) { aspect-ratio: 4 / 3; }
  .vg-script { gap: 10px; }
}

@media (max-width: 560px) {
  .vignette:not(.vg-cast) { aspect-ratio: 1 / 1; }
}