/*
 * 首页七屏：一页就是一夜（入夜 → 深夜 → 天亮前）。
 * 背景：每屏一段静态渐变，首尾颜色相接，滚动时看到的就是连续过渡，不需要 JS 重绘。
 * 动效：只用 site.css 里的 .reveal / .slide-in / .draw-x / .draw-y / .pop，以及本文件的呼吸光环和天亮前微光。
 */

/* ---------- 每屏通用 ---------- */
.scene {
  position: relative;
  z-index: var(--z-content);
  padding-block: var(--section-pad);
  overflow: hidden;
}
.scene-inner { position: relative; z-index: 1; }
.scene-index {                         /* "03 / 07 ——— 方法" */
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.scene-index .t-num { color: var(--c-amber); }
.scene-index-line { flex: 1; max-width: 12rem; height: 1px; background: var(--c-amber-a30); }
.scene-title { max-width: 16em; }
.scene-lead { margin-top: var(--sp-5); max-width: var(--measure); }

/* 背景链：入夜 #0E1220 → 深夜 #07090F → 天亮前 #16121A */
.s-dusk     { background: var(--c-dusk); }
.s-falling  { background: linear-gradient(180deg, var(--c-dusk) 0%, #0A0D18 55%, var(--c-night) 100%); }
.s-night    { background: var(--c-night); }
.s-turning  { background: linear-gradient(180deg, var(--c-night) 0%, #0D0C14 60%, #120F18 100%); }
.s-predawn  { background: linear-gradient(180deg, #120F18 0%, var(--c-predawn) 45%, var(--c-predawn) 100%); }
.home .site-footer {                    /* 首页页脚：上沿是一条琥珀地平线，微光越过地平线再淡掉 */
  background:
    radial-gradient(55% 45% at 50% 0%, rgba(233, 184, 114, 0.045), transparent 80%),
    var(--c-predawn);
  border-top-color: var(--c-amber-a22);
}

/* ---------- 第 1 屏 入夜 ---------- */
.s1 {
  display: flex; align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 6rem 5rem;
  margin-top: -4rem;                    /* 顶栏压在首屏上（手机顶栏 4rem，电脑 5rem） */
}
.s1 .scene-inner {
  display: grid; gap: var(--sp-6);
  align-items: center;
  width: 100%;
}
.hero-ring-wrap {                       /* 第 1 步补：手机上 68vw → 52vw，给新加的说明行腾位置，按钮仍在第一屏里 */
  position: relative;
  justify-self: center;
  width: min(52vw, 20rem);
  aspect-ratio: 1;
}
.hero-halo {                            /* 环后面的柔光，只动 opacity 和 scale */
  position: absolute; inset: -30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(233, 184, 114, 0.16), rgba(233, 184, 114, 0.05) 55%, transparent 72%);
}
.hero-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-ring .ring-main { stroke: var(--c-amber); }
.hero-ring .ring-faint { stroke: var(--c-amber-a12); }
.hero-ring .ring-tick { stroke: var(--c-amber-a22); }
.hero-ring .ring-dot { fill: var(--c-amber); }

.motion .hero-breath {
  animation: breath var(--dur-breath) infinite;
  transform-origin: 50% 50%;
}
.motion .hero-halo { animation: halo var(--dur-breath) infinite; }
/* 一个周期 10 秒：前 40%（4 秒）放大，后 60%（6 秒）收回；缓入缓出 */
@keyframes breath {
  0%   { transform: scale(0.94); opacity: 0.78; animation-timing-function: var(--ease-in-out); }
  40%  { transform: scale(1);    opacity: 1;    animation-timing-function: var(--ease-in-out); }
  100% { transform: scale(0.94); opacity: 0.78; }
}
@keyframes halo {
  0%   { transform: scale(0.9);  opacity: 0.55; animation-timing-function: var(--ease-in-out); }
  40%  { transform: scale(1.04); opacity: 1;    animation-timing-function: var(--ease-in-out); }
  100% { transform: scale(0.9);  opacity: 0.55; }
}

.hero-copy { display: grid; gap: var(--sp-5); justify-items: start; }
.hero-brand { color: var(--c-muted); letter-spacing: 0.24em; font-size: var(--fs-small); }
.hero-title { max-width: 11em; }
.hero-title .line { display: block; }
.hero-desc {                            /* 第 1 步补：定位语下面一行说明，说清楚这是什么 */
  max-width: 30em;
  font-size: var(--fs-body); line-height: 1.85;
  color: var(--c-text-soft);
}
.hero-actions { margin-top: var(--sp-3); }
.hero-actions { display: grid; width: 100%; max-width: 21rem; }
.hero-actions .btn { width: 100%; }

.scroll-cue {
  display: none;                         /* 手机上不显示，免得压住按钮 */
  position: absolute; left: 50%; bottom: var(--sp-6); z-index: 1;
  justify-items: center; gap: var(--sp-3);
  transform: translateX(-50%);
  color: var(--c-faint);
}
.scroll-cue-line { width: 1px; height: 2.5rem; background: var(--c-amber-a30); transform-origin: top; }
.motion .scroll-cue-line { animation: cue var(--dur-cue) var(--ease-in-out) infinite; }
@keyframes cue {
  0%   { transform: scaleY(0); opacity: 1; }
  60%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

@media (min-width: 37.5em) {
  .hero-actions { display: flex; width: auto; max-width: none; }
  .hero-actions .btn { width: auto; }
}
@media (min-width: 56.25em) {
  .s1 { margin-top: -5rem; }
  .hero-copy { gap: var(--sp-6); }
  .hero-desc { font-size: var(--fs-lead); }
  .scroll-cue { display: grid; }
  .s1 .scene-inner { grid-template-columns: 1.15fr 1fr; gap: var(--sp-8); }
  .hero-ring-wrap { order: 2; width: min(40vw, 34rem); justify-self: end; }
  .hero-copy { order: 1; }
  .hero-brand { display: none; }        /* 电脑上导航已有横版 logo，品牌名小字不再重复 */
}
@media (min-width: 75em) {
  .hero-ring-wrap { width: min(38vw, 38rem); margin-right: calc(var(--gutter) * -0.5); }
}

/* ---------- 第 2 屏 躺下以后 ---------- */
.night-lines { display: grid; gap: var(--sp-7); margin-top: var(--sp-8); }
.night-line { display: grid; gap: var(--sp-2); }
.night-time { color: var(--c-faint); }
.night-text { font-size: var(--fs-h2); font-weight: var(--fw-light); line-height: 1.6; letter-spacing: 0.05em; color: var(--c-text); }
.night-note { margin-top: var(--sp-8); }
@media (min-width: 56.25em) {
  .s2 .scene-inner { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-8); align-items: start; }
  .night-lines { margin-top: 0; padding-top: var(--sp-9); }
  .night-line { grid-template-columns: 6rem 1fr; align-items: baseline; gap: var(--sp-5); }
  .night-line:nth-child(2) { margin-left: 3rem; }
  .night-line:nth-child(3) { margin-left: 6rem; }
  .night-note { margin-top: var(--sp-7); margin-left: calc(6rem + 6rem + var(--sp-5)); }  /* 和第三句的文字对齐 */
}

/* ---------- 第 3 屏 方法：CBT-I 的常见组成 ---------- */
.method-grid { display: grid; gap: var(--sp-8); margin-top: var(--sp-7); }
.method-text { display: grid; gap: var(--sp-6); align-content: start; }
.cite { margin-top: var(--sp-3); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--c-faint); line-height: 1.7; }

.mf { position: relative; display: grid; gap: var(--sp-5); }
.mf-root { display: flex; align-items: baseline; gap: var(--sp-4); }
.mf-root-name { font-size: var(--fs-h1); font-weight: var(--fw-light); letter-spacing: 0.06em; color: var(--c-amber); line-height: 1; }
.mf-tree { position: relative; padding-left: var(--sp-6); }
.mf-spine { position: absolute; left: 0; top: 0; bottom: 1.6rem; width: 1px; background: var(--c-amber-a55); }
.mf-branches { display: grid; gap: var(--sp-5); }
.mf-branch { position: relative; display: grid; grid-template-columns: 2.25rem 1fr; align-items: center; gap: var(--sp-3); }
.mf-branch-line { height: 1px; background: var(--c-amber-a55); margin-left: calc(var(--sp-6) * -1); width: calc(100% + var(--sp-6)); }
.mf-branch-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-4); }
.mf-branch-label b { font-weight: var(--fw-regular); font-size: var(--fs-h3); color: var(--c-text); letter-spacing: 0.06em; }
.mf-branch-label i { font-style: normal; font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--c-faint); }
.mf-dot { position: absolute; left: calc(2.25rem - 4px); top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--c-amber); }
.mf-apart {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  border: 1px dashed var(--c-line-strong); border-radius: var(--r-sm);
}
.mf-apart b { font-weight: var(--fw-regular); color: var(--c-text-soft); letter-spacing: 0.06em; }
.mf-apart .neq { color: var(--c-amber); font-size: var(--fs-h3); line-height: 1; }
.mf-caption { margin-top: var(--sp-4); max-width: 30em; }
.method-course { padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
@media (min-width: 56.25em) {
  .method-grid { grid-template-columns: 6fr 5fr; gap: var(--sp-9); align-items: start; }
  .mf { padding-top: var(--sp-2); }
}

/* ---------- 第 4 屏 依据 ---------- */
.evidence-cards { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); }
.evidence-more { margin-top: var(--sp-7); }
@media (min-width: 56.25em) {
  .evidence-cards { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .evidence-cards .source-card { grid-template-rows: 1fr auto; }
  /* 第 1 步补：三张顶部对齐（原来中间那张下移 32px，像没对齐）。节奏只靠依次滑入的时间差 */
}

/* ---------- 第 5 屏 怎么练：四个节点一条线 ---------- */
.steps { position: relative; display: grid; gap: var(--sp-7); margin-top: var(--sp-8); padding-left: var(--sp-7); }
.steps::before {                         /* 串起四个节点的线：手机竖线，电脑横线；用 scale 画出 */
  content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px;
  background: var(--c-amber-a55);
  transform-origin: center top;
}
.motion .steps::before { transform: scaleY(0); transition: transform var(--dur-draw) var(--ease-out); }
.motion .is-in .steps::before { transform: none; }
.step { position: relative; display: grid; gap: var(--sp-2); }
.step-dot {
  position: absolute; left: calc(var(--sp-7) * -1); top: 0.55rem;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--c-night); box-shadow: inset 0 0 0 1px var(--c-amber);
}
.step-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--c-amber); }
.step-num { color: var(--c-amber); }
.step-title { font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: 1.6; color: var(--c-text); letter-spacing: 0.06em; }
.step-text { color: var(--c-text-soft); max-width: 20em; }
.steps-note { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-7); }
@media (min-width: 56.25em) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); padding-left: 0; padding-top: var(--sp-7); }
  .steps::before { left: 6px; right: 0; top: 6px; bottom: auto; width: auto; height: 1px; transform-origin: left center; }
  .motion .steps::before { transform: scaleX(0); }
  .step-dot { left: 0; top: calc(var(--sp-7) * -1); }
}

/* ---------- 第 6 屏 我们：慢速视差 ---------- */
.s6 .scene-inner { display: grid; gap: var(--sp-7); }
.about-mark {                            /* 手机：放在右侧边外，只露出左半圈作背景（被 .scene 的 overflow 裁掉） */
  position: absolute; z-index: -1;
  right: -55vw; top: -1rem;
  width: 90vw; aspect-ratio: 1;
  pointer-events: none;
}
.about-mark svg { width: 100%; height: 100%; overflow: visible; }
.about-mark .ring-main { stroke: var(--c-amber-a12); }
.about-mark .ring-dot { fill: var(--c-amber-a30); }
/* 第 1 步补：宽度按正文字号算（原来 30em 按 16px 算只有 480px，第一句末尾"办。"掉行）。
   36em × 20px = 720px 封顶，第一句 25 个字一行放得下 */
.about-text { display: grid; gap: var(--sp-5); font-size: var(--fs-lead); max-width: 36em; }
.about-text p { line-height: 2; color: var(--c-text-soft); }
.about-text p:first-child { color: var(--c-text); }
.about-text .t-amber-line { color: var(--c-text); }
@media (min-width: 56.25em) {
  .s6 .scene-inner { grid-template-columns: 4fr 8fr; gap: var(--sp-8); align-items: start; }
  .about-head { position: relative; }
  .about-mark {                          /* 电脑：放进左栏标题下面，整圈可见，不碰序号 */
    position: relative; z-index: 0; right: auto; top: auto;
    width: min(100%, 15rem); margin-top: var(--sp-8);
  }
}

/* ---------- 第 7 屏 天亮前 ---------- */
.s7 { padding-bottom: var(--sp-9); }
.dawn {                                  /* 天亮前的微光：贴着本屏底边（页脚上沿就是地平线），进入视口后慢慢淡入 */
  position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 75%;
  background:
    radial-gradient(55% 70% at 50% 100%, rgba(233, 184, 114, 0.085), rgba(233, 184, 114, 0.025) 55%, transparent 80%),
    radial-gradient(80% 80% at 50% 100%, rgba(120, 82, 92, 0.10), transparent 75%);
  pointer-events: none;
}
.motion .dawn { opacity: 0; transition: opacity var(--dur-dawn) var(--ease-out); }
.motion .is-in .dawn, .motion .s7.is-in .dawn { opacity: 1; }
.s7 .scene-inner { display: grid; gap: var(--sp-8); }
.closing { display: grid; gap: var(--sp-5); justify-items: start; }
.closing .claim { margin-top: var(--sp-4); }
@media (min-width: 56.25em) {
  .s7 .scene-inner { grid-template-columns: 6fr 5fr; gap: var(--sp-9); align-items: end; }
}
.closing .scene-index { width: 100%; }
.s7 .disclaimer-title { color: var(--c-muted); }   /* 第 7 屏有微光，标签色对比度不够，改用次要文字色 */