/* ============================================================
   landing.css — 「AI 异能」六屏落地页布局与样式
   结构/文案: specs/pages/landing.md §3 ｜ 布局: §5 ｜ a11y: §7
   DEC-008 H5 升级：满幅出血照片 / 深色收尾行动卡片 / 进度圆点 / chevron 呼吸动效
   取值一律引用 base.css 中的 tokens；无 scroll-snap、无滚动渐显
   ============================================================ */

/* ---- 平滑滚动（spec §4.2：CSS 渐进增强，无 JS 时锚点跳转仍可用）---- */
html {
  scroll-behavior: smooth;
}

/* ---- 屏幕通用（spec §5）----
   回退链必须：先 100vh 再 100dvh 覆盖（微信旧内核不支持 dvh）。
   纵向居中用 auto margin 而非 justify-content: center——
   内容超出屏高时 auto 折叠为 0，顶部内容仍可滚动到达，禁止硬性裁切。 */
.screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  /* 物理属性兜底（Chromium <87 不识别逻辑属性），逻辑属性随后覆盖 */
  padding: clamp(var(--space-8), 10vh, var(--space-12)) clamp(var(--space-4), 6vw, 6rem);
  padding-block: clamp(var(--space-8), 10vh, var(--space-12));
  padding-inline: clamp(var(--space-4), 6vw, 6rem);
}

.screen > :first-child {
  margin-top: auto;       /* 物理兜底 */
  margin-block-start: auto;
}

.screen > :last-child {
  margin-bottom: auto;    /* 物理兜底 */
  margin-block-end: auto;
}

/* 阅读宽度容器：故事/价值屏收窄，信任屏放宽以容纳四列 */
.inner {
  width: min(100%, 46rem);
  margin-left: auto;      /* 物理兜底 */
  margin-right: auto;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* ---- 小节标（spec §5，DEC-008）：story/trust/value/faq 左上角 01/02/03/04，纯装饰 ---- */
.sec-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
  color: var(--color-accent-ink);
}

.sec-label::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--color-border); /* 发丝短线 */
}

/* 中间四屏锚定上三分之一（spec §5，DEC-008）：内容起始约落在屏高 1/3 线，
   消除死居中的空旷感；下方 auto 折叠，小屏/大字号时自然溢出滚动不裁切 */
#story .inner,
#trust .inner,
#value .inner,
#faq .inner {
  margin-top: max(var(--space-8), 18vh);
  margin-block-start: max(var(--space-8), 18vh);
}

/* ---- 第一屏 · 封面（spec §3.1 满幅出血版，DEC-008）----
   移动端：照片满幅出血（左右贴边 = 视口宽），高约 62dvh，底部渐变融入纸底；上缘锚定防头顶裁切（2026-09-17 随修，见 .hero-photo） */
#hero {
  padding: 0;             /* 出血：四周留白归零，文案列自携内边距 */
  gap: var(--space-6);
}

.hero-grid {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.hero-media {
  position: relative;     /* 承载底部渐变叠加层 */
}

.hero-photo {
  width: 100%;            /* 满幅：容器无内边距 → 渲染宽度 === 视口宽 */
  height: 62vh;           /* 回退链（spec §5） */
  height: 62dvh;
  object-fit: cover;      /* 显式高度 + cover 防 CLS（spec §7） */
  /* 上缘锚定（spec §3.1 随修，2026-09-17）：形象照头顶留白仅 5–7%，50% 50% 均分裁切
     812 档上裁 4% 贴头皮、667 短屏上裁 12% 裁进额头；顶对齐后裁切全部落在下缘——
     该区在底部渐变（transparent 55% → 纸底）内渐隐，视觉无损。桌面列无纵向裁切（横向 50% 保持居中） */
  object-position: top;
}

/* 照片底部线性渐变融入纸底（spec §3.1） */
.hero-media::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, var(--color-bg) 100%);
  pointer-events: none;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) clamp(var(--space-4), 6vw, 4rem) 0;
  text-align: center;     /* 首屏标题居中（spec §5 对齐策略） */
}

.hero-copy h1 {
  font-size: clamp(var(--font-size-hero-min), 2vw + 2rem, var(--font-size-4xl));
  line-height: 1.15;      /* DEC-008：行高收紧 */
  letter-spacing: var(--letter-spacing-display);
  text-wrap: balance;
}

.hero-copy p {
  max-width: 34em;
  margin-left: auto;      /* 物理兜底 */
  margin-right: auto;
  margin-inline: auto;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
  text-wrap: balance;     /* 与 value 屏同款：balance 管行宽、原子单元管语义（spec §3.1 随修） */
}

/* 首屏副标题双分支原子化（spec §3.1 随修，2026-08-27）：+2 字后自然断行探针实证
   375 拆"科技企|业"、1280 破折号孤悬次行行首。两条梦想分支连尾随标点（，/——）整体
   原子化——标点入盒（P1-2 教训：原子边界外的闭合标点失去行首禁则保护）；机制沿用
   value 屏 phrase/term：inline-block 盒间断点无条件 + max-width 允许 2× 字号盒内应急折行 */
.hero-copy .hero-path {
  display: inline-block;
  max-width: 100%;
}

/* ---- 滚动引导 chevron（spec §3.1/§4.4，DEC-008）：细线 SVG + 呼吸浮动 ----
   动画拆分：锚点承透明度呼吸（不动盒子，保证 Playwright 点击稳定性与
   锚点 animationName 断言），SVG 子元素承 translateY 3px 浮动 */
.scroll-hint {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-muted);
  text-decoration: none;
  animation: hint-breathe 2.2s ease-in-out infinite; /* ~2s 循环呼吸 */
}

.scroll-hint svg {
  display: block;
  animation: hint-float 2.2s ease-in-out infinite; /* 浮动（translateY 3px 级别） */
}

#hero .scroll-hint {
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}

.scroll-hint:hover {
  border-color: var(--color-accent);    /* 图形：accent */
  color: var(--color-accent-ink);       /* 文字：accent-ink（AA） */
}

/* 按压态（spec §5 触屏细节，DEC-008）：加深边框（transform 由动画占用） */
.scroll-hint:active {
  border-color: var(--color-accent-strong);
  color: var(--color-accent-ink);
}

@keyframes hint-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@keyframes hint-float {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }   /* translateY 3px 级别（spec §4.4） */
}

/* reduce 下回退：平滑滚动关闭 + chevron 静止（spec §4.2/§4.4）
   —— 必须置于 animation 声明之后（同特异性时后者胜） */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .scroll-hint,
  .scroll-hint svg {
    animation: none;
  }
}

/* ≥768：照片列贴右缘出血、通屏高，文案列居左（spec §3.1，DEC-008） */
@media (min-width: 768px) {
  #hero {
    gap: 0;               /* 通屏高：把高度让给照片列（≥90% 视口高） */
  }

  #hero .scroll-hint {
    margin-top: var(--space-2);
    margin-bottom: var(--space-3);
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr clamp(22rem, 40vw, 34rem); /* 40vw@1280=512px 整数，保证右缘精确贴边 */
    align-items: center;
  }

  .hero-media {
    grid-column: 2;       /* DOM 保持照片在前（移动端在上），桌面置于右列 */
    grid-row: 1;
    align-self: stretch;  /* 通屏高出血 */
  }

  .hero-photo {
    height: 100%;
  }

  .hero-media::after {
    background: linear-gradient(to bottom, transparent 82%, var(--color-bg) 100%);
  }

  .hero-copy {
    grid-column: 1;
    grid-row: 1;
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
    padding-left: clamp(var(--space-8), 7vw, 9rem); /* 文案列距左缘呼吸 */
    padding-right: var(--space-8);
  }
}

/* ---- 第二屏 · 故事（spec §3.2）----
   标题/正文左对齐（spec §5 对齐策略，DEC-008） */
#story h2 {
  font-size: var(--font-size-2xl);
  text-align: left;
}

.story-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: left;
}

.story-text p {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  /* 短段均衡断行（2026-09-18 文案随修 DEC-026）：18 字段落在 375 档普通断行产生"长。"一字孤尾，
     balance 令两行均衡（同 value 屏 §3.4 口径；Chromium 114+ 渐进增强，旧引擎回退普通断行） */
  text-wrap: balance;
}

/* 微强调：accent-ink（文字专用强调色，AA 达标），不改字号（spec §3.2） */
.story-text strong {
  color: var(--color-accent-ink);
  font-weight: 600;
}

/* ---- 第三屏 · 信任（spec §3.3 / §5）----
   <768 单列列表（每行图标 + 一行文本，不加卡片边框）；
   ≥768 四列 grid。项间以 --color-border 发丝线分隔（DEC-008） */
#trust .inner {
  width: min(100%, 72rem);
  gap: var(--space-12);
}

#trust h2 {
  font-size: var(--font-size-2xl);
  text-align: left;
}

.trust-list {
  display: grid;
  gap: var(--space-6);
}

.trust-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* <768 单列：项间发丝线（DEC-008） */
.trust-list li + li {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.trust-list svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: var(--color-accent); /* 1.5px 单色细线，随 currentColor（图标用作图形性强调） */
}

.trust-list span {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

@media (min-width: 768px) {
  .trust-list {
    /* 768-1199 用 2×2：四列在此波段必折行（v2 视觉复审必改①，实测 768 全折 / 1024 折 2 项；
       "每项一行"优先于列数——四列挪到 ≥1200 组件局部断点，spec §5 已注明） */
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-12);
    row-gap: var(--space-6);
  }

  /* 各项顶部发丝线：与各自栏目等宽的分段刻度线（v2 视觉裁决：分段优于全线贯通，与 sec-label 短线同构） */
  .trust-list li {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
  }

  .trust-list li + li {
    padding-top: var(--space-3); /* 覆盖移动端 <li+li> 差异化的 padding，保持对齐 */
  }
}

/* ≥1200 不等宽四列已废止（DEC-015 编辑式分栏内列表恒 2×2——右列专著图占位后四列必折行，
   "每项一行"优先；1200 局部断点一并移除，spec §5 已同步） */

/* 专著佐证·媒体卡（spec §3.2/§3.3，DEC-011/012 → DEC-015 编辑式分栏 → DEC-017 卡片化 → DEC-018 贴边放大）：
   figure 本身即卡片——同宽（min(100%, 20rem)≈320px）、居中轴、bg-alt 暖白底、radius-lg、
   shadow-md（比名片卡 shadow-lg 轻：佐证 < 转化，"同一家族不同等级"）；
   DEC-018 图片贴卡片边缘（卡身无四边内边距、方角由 overflow+卡片圆角裁切），
   内边距移至图注区并以发丝线分隔（页面既有发丝线语言）；
   纯展示不做成链接，封底小二维码展示尺寸下不可扫描视为纹理 */
.book-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 20rem);
  margin: var(--space-8) auto 0;   /* <1200：内容下方居中，两屏同间距 */
  padding: 0;                      /* DEC-018 贴边 */
  overflow: hidden;                /* 方角图片由卡片 radius-lg 裁切 */
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.book-figure img {
  display: block;                  /* 消除行内基线间隙，贴边无缝 */
  width: 100%;
  height: auto;
}

.book-figure figcaption {
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);   /* 发丝线分隔图与图注（与 trust-list 同语言） */
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  text-align: center;
}

/* 编辑式图文分栏（DEC-015 → DEC-017 → DEC-018，spec §5）：≥1200 文字/列表在左、专著媒体卡在右。
   断点由 768 上调：1024–1199 段右栏会使信任项文本宽 < 最长文案 240px 必折行（复审必改红线）；
   DEC-018 右栏 20→22rem（352px 与名片卡等宽不超越——等级由 shadow/舞台表达，宽度守卫不变），
   1200 处信任项 span≈268px 余量 28px；story 容器 ≥1200 放宽 52rem 保正文列 > 卡列 */
@media (min-width: 1200px) {
  .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    column-gap: var(--space-12);
    align-items: start;
  }

  #story .inner {
    width: min(100%, 52rem);       /* DEC-018：分栏舞台加宽；<1200 维持 46rem 阅读度量 */
  }

  .book-figure {
    margin: 0;
    width: min(100%, 22rem);       /* DEC-018：桌面 352px */
  }
}

/* ---- 第四屏 · 价值主张（spec §3.4）----
   全页字体最大、留白最多：标题 3xl serif，正文 xl（全页正文最大档） */
#value .inner {
  width: min(100%, 48rem);
  gap: var(--space-12);
}

#value h2 {
  font-size: var(--font-size-3xl);
  line-height: 1.3;
  text-align: left;
}

.value-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: left;
}

.value-body p {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-relaxed);
  /* 短句均衡断行（spec §3.4）：18 字段落在 375px（≈16.5 字/行）普通断行留 2 字孤行
     （实测段末仅 40px）；balance 下两行各约 9 字。Chromium 114+ 渐进增强，旧引擎回退普通断行 */
  text-wrap: balance;
}

/* 语义单元原子化（spec §3.4 业主终审随修 + P1 大字体随修 + P1-2 标点入单元）：balance 只均衡
   行宽、不理解中文语义，375 档曾出现"最/好的""自己/的"及强调词"能/力"拆断；①② 前缀子句+尾短语
   双原子，"了"后（原子行内盒边界）成为唯一可断点（只包尾短语时 balance 会把"了"推到次行行首）。
   机制为原子行内盒：盒间断点无条件存在、不受 UAX #14 词类影响——keep-all 方案会连带抑制
   span 尾缘 ID÷ID 断点，探针实证 ① 退化为"两年后，"孤字行，否决（业主 P1 终审提议）；
   max-width: 100% 令大字体/系统字体缩放下单元超出行宽时内部应急换行，可读性优先于绝对
   不拆行（nowrap 旧案实测 2× 字体文档横向溢出 88px）。P1-2：原子边界外紧随的闭合标点
   失去行首禁则保护（实测 ③ "能力 / ？"问号孤行），③ 强调词与 value-note 强调语改为连
   紧随标点整体原子化（.value-term），strong/em 恢复普通行内——真正控制断行的是
   phrase/term，标点保持常规字重。inline-block/max-width 无版本门槛，旧微信 XWeb 同样生效 */
.value-body .value-phrase,
.value-body .value-term,
.value-note .value-term {
  display: inline-block;
  max-width: 100%;
}

.value-note {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  text-wrap: balance; /* 同上：57 字收口句多行均衡（2026-09-17 加长随修），避免"段路。"式短尾 */
}

/* "能力/人/作品"仅加粗不变色；此处为策划案明确要求的斜体高亮——
   文字强调用 accent-ink（视觉审查裁决：accent 3.08:1 低于 AA 4.5:1） */
.value-note em {
  font-style: italic;
  color: var(--color-accent-ink);
}

/* ---- 第五屏 · 常见问题（spec questions.md §8 / landing.md §3.5，DEC-020/DEC-023）----
   GEO 问答 L1：冻结 h2（webfont 精排）与构建注入条目（系统栈动态层）同屏有意分层
   （questions.md §9.1）；零转化召唤：hover 仅下划线（§8.1 MUST——无位移/变色动画） */
#faq h2 {
  font-size: var(--font-size-2xl);
  text-align: left;         /* 二~五屏左对齐（landing.md §5 对齐策略） */
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);      /* 条目间（questions.md §9.2 v1.4） */
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-list li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);      /* 条目内 标题↔摘要 */
}

/* 条目标题 = 动态层：系统衬线栈 + 600 + 0.02em（questions.md §9.1 P0-② 分层决策），
   不依赖 webfont 子集——任意文章标题不触发逐字混合回退；静态无下划线，hover/focus 才出现 */
.faq-list a {
  font-family: var(--font-family-serif-sys);
  font-size: var(--font-size-2xl);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: var(--line-height-relaxed);
  text-decoration: none;
}

.faq-list a:hover,
.faq-list a:focus-visible {
  text-decoration: underline;
}

/* 摘要 = 系统正文栈 muted（40 字派生，与 L2 条目同源 questions.md §3） */
.faq-list p {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

/* 屏尾次级出口「全部问题 →」单链 L2：sm 链接 accent-ink（questions.md §8.1） */
.faq-more {
  font-size: var(--font-size-sm);
  color: var(--color-accent-ink);
  /* 触控热区 ≥44px（spec §5，2026-09-18 手机端审查随修）：透明 padding 上下各 12px
     扩到 49px，负 margin 抵消流内占位——文字位置与间距视觉零变化，仅命中区扩大 */
  display: inline-block;
  padding: var(--space-3) 0;
  margin: calc(var(--space-3) * -1) 0;
}

/* desktop 档（>1024，design-tokens.md 三档断点）间距升档：条目间 --space-8、条目内 --space-4 */
@media (min-width: 1025px) {
  .faq-list {
    gap: var(--space-8);
  }

  .faq-list li {
    gap: var(--space-4);
  }
}

/* ---- 第六屏 · 行动号召（spec §3.6 深色收尾，DEC-008）----
   全页唯一深色屏；标题居中（spec §5 对齐策略） */
#cta {
  background-color: var(--color-surface-deep);
  color: var(--color-text-inverse);
  /* 屏底留白适配 iPhone 安全区（spec §3.6）；env() 不识别时回退 .screen 的 padding */
  padding-bottom: calc(clamp(var(--space-8), 10vh, var(--space-12)) + env(safe-area-inset-bottom));
  padding-block-end: calc(clamp(var(--space-8), 10vh, var(--space-12)) + env(safe-area-inset-bottom));
}

#cta .inner {
  width: min(100%, 40rem);
  gap: var(--space-6);
  align-items: center;
  text-align: center;
}

#cta h2 {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-inverse); /* 深底约 12:1（spec §7） */
  text-align: center;
}

/* 行动卡片：纸白底 + shadow-lg + radius-lg，居中承载转化四要素（DEC-008） */
.cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: min(100%, 22rem);
  padding: var(--space-8) var(--space-6);
  background-color: var(--color-bg);
  color: var(--color-text);          /* 卡片回浅色文字语境（覆盖深底继承） */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* 原生 <img> 微信名片码（长按识别依赖），渲染宽度 ≥200px（spec §3.6，DEC-011）；
   名片截图约 2:3 竖版自带白底——高度随固有比例自适应，原 accent 3px 粗边框改细边框 */
.cta-qr {
  width: 13rem;  /* 208px，两档视口下均满足 >=200px（渲染高度约 312px） */
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.wechat-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
}

@media (max-width: 767px) {
  /* v2 视觉复审必改②：flex 列 align-items:center 下 .wechat-line shrink-to-fit 塌缩，
     复制按钮无法占卡片满宽——与 copy-feedback 当初的修复同源 */
  .wechat-line {
    width: 100%;
  }
}

.wechat-id {
  font-size: var(--font-size-xl);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-display);
}

/* 复制按钮（spec §3.6，DEC-008）：accent-ink 实心胶囊、纸白字、高 ≥44px */
.cta-copy {
  min-height: 44px;      /* 触控目标（spec §5） */
  padding: var(--space-2) var(--space-8);
  font-size: var(--font-size-base);
  color: var(--color-text-inverse);
  background-color: var(--color-accent-ink);
  border: 0;
  border-radius: 999px;  /* 胶囊 */
  cursor: pointer;
}

/* 按压态（spec §5 触屏细节，DEC-008）：缩放 */
.cta-copy:active {
  transform: scale(0.97);
}

/* 反馈区预留一行高，避免文案出现/清空时布局跳动；
   width:100% 保证空文案时占位可见（flex 列 center 下 shrink-to-fit 会塌缩为 0 宽） */
.copy-feedback {
  width: 100%;
  min-height: 1.7em;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.cta-note {
  font-size: var(--font-size-base);
  color: var(--color-text-inverse);
}

/* DEC-034（2026-09-21 业主直裁）：身份句移除后备注为单句（17 全角字 375 档单行），
   双语义单元原子盒机制随内容退役——原 .cta-note .text-unit 规则与守卫用例同批清除 */

.cta-fallback {
  font-size: var(--font-size-sm);
  color: var(--color-text-inverse-soft); /* 深底小字约 7:1（spec §7） */
}

/* ICP 备案行（spec §3.6/§9 例外，DEC-011）：全页唯一页脚性元素，
   合规展示而非导航——同色弱化，下划线仅在 hover/focus 出现 */
.icp-line {
  margin: var(--space-8) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-inverse-soft);
  text-align: center;
}

.icp-line a {
  color: inherit;
  text-decoration: none;
}

.icp-line a:hover,
.icp-line a:focus-visible {
  text-decoration: underline;
}

/* 移动端：复制按钮占卡片满宽（spec §3.6） */
@media (max-width: 767px) {
  .cta-copy {
    width: 100%;
  }
}

/* ---- 进度圆点（spec §4.4，DEC-008）----
   纯装饰：fixed 右侧垂直居中、pointer-events 穿透、仅状态切换无过渡动画 */
.screen-dots {
  position: fixed;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;  /* 不拦截点击（spec §4.4） */
  z-index: 10;
}

.screen-dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 50%;
  background-color: var(--color-border);
  box-shadow: var(--shadow-sm); /* 满幅照片上保持可辨 */
}

.screen-dot[data-active="true"] {
  background-color: var(--color-accent); /* 图形用法：accent（tokens 分工） */
}