/* ==========================================================================
   第三屏 · 满屏红底：入场大标题 → 钉住的手机分步演示
   文案左右交替，底部步骤条随步推进，最后一步两侧出现大字并给出 Restart
   ========================================================================== */

.walkthrough {
  background: var(--c-primary);
  color: var(--c-ink);
  overflow: clip;
}

/* 入场大标题：随页面自然滚走 */
.walkthrough__intro {
  margin: 0;
  padding: clamp(90px, 26svh, 220px) 0 clamp(60px, 16svh, 150px);
  text-align: center;
  font-size: clamp(34px, 5.5vw, 96px);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -0.03em;
}

/* ---------- 钉住的舞台 ---------- */
.walkthrough__stage {
  position: relative;
  height: 100svh;
  display: grid;
  place-items: center;
}

/* ---------- 左右交替的文案 ---------- */
.wt-captions {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.wt-caption {
  position: absolute;
  top: 50%;
  width: clamp(200px, 29.6vw, 460px);
  transform: translateY(calc(-50% + var(--cap-shift, 0px)));
  opacity: 0;
  will-change: opacity, transform;
}
.wt-caption--l { left: var(--grid-margin); }
.wt-caption--r { right: var(--grid-margin); }

.wt-caption__rule {
  display: block;
  height: 1px;
  background: rgba(5, 8, 7, 0.34);
  margin-bottom: clamp(14px, 2.2svh, 26px);
}

.wt-caption__title {
  margin: 0 0 clamp(8px, 1.2svh, 16px);
  font-size: clamp(19px, 2vw, 34px);
  font-weight: var(--fw-medium);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.wt-caption__body {
  margin: 0;
  max-width: 22em;
  font-size: clamp(12px, 1.18vw, 19px);
  line-height: 1.35;
  color: rgba(5, 8, 7, 0.86);
}

/* 最后一步：两个大词分居手机两侧 */
.wt-caption--big { left: 0; right: 0; width: auto; transform: none; }
.wt-caption__word {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(24px, 3.7vw, 62px);
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.wt-caption__word--l { left: 27%; transform: translate(-50%, -50%); }
.wt-caption__word--r { left: 73%; transform: translate(-50%, -50%); }

/* ---------- 手机 ---------- */
.wt-phone {
  position: relative;
  width: clamp(168px, 16.1vw, 268px);
  aspect-ratio: 9 / 19.33;
  border-radius: clamp(20px, 2.4vw, 40px);
  background: #1c1f1e;
  padding: 0.32em;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
  font-size: clamp(11px, 1.05vw, 17px);
  overflow: hidden;
  z-index: 2;
}

.wt-phone__notch {
  position: absolute;
  left: 50%;
  top: 0.55em;
  width: 30%;
  height: 0.95em;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #17110f;
  z-index: 5;
}

.wt-phone__screens { position: relative; width: 100%; height: 100%; }

.wt-screen {
  position: absolute;
  inset: 0;
  border-radius: calc(clamp(20px, 2.4vw, 40px) - 0.32em);
  overflow: hidden;
  background: var(--c-ink);
  color: var(--fg);
  opacity: 0;
  display: grid;
  align-content: start;
  will-change: opacity, transform;
}

/* 屏内是生成的机制界面图，铺满整块屏 */
.wt-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  border-radius: inherit;
}

/* ---------- 底部步骤条 ---------- */
.wt-steps {
  position: absolute;
  left: var(--grid-margin);
  bottom: clamp(18px, 4svh, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 15px);
  font-size: clamp(10px, 0.86vw, 14px);
}

.wt-steps__item { display: flex; align-items: center; gap: 0.6em; opacity: 0.5; }
.wt-steps__item.is-on { opacity: 1; }

.wt-steps__item i {
  display: grid; place-items: center;
  width: 2.15em; height: 2.15em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-style: normal;
  font-size: 0.92em;
}
/* 只有当前步显示名字 */
.wt-steps__item b {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-weight: var(--fw-medium);
  transition: max-width var(--dur-fast) var(--ease-std);
}
.wt-steps__item.is-current b { max-width: 8em; }

/* ---------- 重播 ---------- */
.wt-restart {
  position: absolute;
  left: 50%;
  bottom: clamp(46px, 9svh, 96px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: clamp(11px, 0.9vw, 15px);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-std);
}
.wt-restart.is-on { opacity: 0.85; }
.wt-restart::before {
  content: "";
  width: 1.15em; height: 1.15em;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}

@media (max-width: 1023px) {
  .wt-caption { width: 30vw; }
  .wt-caption__word--l { left: 20%; }
  .wt-caption__word--r { left: 80%; }
}

/* 窄屏：手机居中会跟文案叠在一起，改成上下分区。
   关键是别用两个各自独立的 svh 锚点去对位——真机浏览器的 svh 与实际可视高度
   并不一致，两边一错开就压上了。这里让文案容器直接排在手机后面走文档流，
   容器内部再绝对定位做交叉淡入，位置就跟 svh 怎么解析无关了。 */
@media (max-width: 743px) {
  .walkthrough__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(16px, 3.5svh, 34px);
    padding: 4svh var(--grid-margin) 0;
  }

  .wt-phone {
    order: 1;
    flex: 0 0 auto;
    width: auto;
    height: 42svh;
    max-width: 52vw;
    font-size: clamp(9px, 2.6vw, 14px);
  }

  /* 从 absolute inset:0 改回文档流，成为手机的下一个兄弟 */
  .wt-captions {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    flex: 0 0 auto;
    min-height: 21svh;          /* 给最长的一条文案留位，免得高度跳动 */
  }

  .wt-caption,
  .wt-caption--big {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    transform: translateY(var(--cap-shift, 0px));
    text-align: center;
  }

  .wt-caption__rule { display: none; }
  .wt-caption__title { font-size: clamp(19px, 5.6vw, 28px); }
  .wt-caption__body { margin-inline: auto; font-size: clamp(12px, 3.4vw, 16px); }

  /* 末屏两个大词：窄屏没有左右空间，当两行居中排 */
  .wt-caption__word {
    position: static;
    display: block;
    transform: none;
    text-align: center;
    white-space: normal;
    font-size: clamp(22px, 7.4vw, 38px);
    line-height: 1.12;
  }

  .wt-steps { font-size: 9px; gap: 5px; bottom: clamp(78px, 12svh, 110px); }
  .wt-restart { display: none; }
}