/* ============================================================
   一页一景 · 按钮换页（pages.css）
   —— 任一时刻只有当前这一页存在：窗口不可滚动，翻页只由按钮/键盘/右轨触发
   —— 上一页在翻走后立刻不可见（同一时刻只显示一页）
   —— 长内容仍可在"页内"读（页内容是自己的滚动区），但滚动不再换页
   见 js/pages.js
   ============================================================ */

html, body {
  height: 100%;
  overflow: hidden;          /* 窗口彻底不滚：翻页只走按钮 */
}
body { position: relative; }

body > section.cover,
body > section.sky,
body > section.section,
body > section.ending {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;          /* 页内阅读用（不换页） */
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 460ms var(--ease-out), visibility 0s linear 460ms, transform 460ms var(--ease-out);
  transform: translateY(10px);
  -webkit-overflow-scrolling: touch;
}
body > section::-webkit-scrollbar { width: 0; height: 0; }

/* 当前页：回到文档流（只有它占位），完全可见；
   高度锁定一屏 + 页内滚动——比屏幕高的内容可读，不会被"夹断" */
body > section.page-active {
  position: relative;
  inset: auto;
  height: 100svh;
  min-height: 100svh;
  overflow-y: auto;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
}
/* 瞬切（转场时用，不播淡入淡出） */
body.page-instant > section { transition: none !important; }

/* 一屏一页之后，纵向留白收一点，把屏幕让给内容 */
body > section.section { padding: clamp(58px, 8vh, 96px) 28px; }
body > section.cover { padding: clamp(64px, 10vh, 132px) 28px clamp(48px, 7vh, 96px); }
body > section.sky { padding: clamp(56px, 8vh, 104px) 24px; }
body > section.ending { padding: clamp(56px, 9vh, 110px) 28px; }

@media (max-width: 768px) {
  body > section.section { padding: 54px 20px 64px; }
  body > section.cover { padding: 72px 20px 56px; }
  body > section.sky { padding: 52px 20px 64px; }
}

/* —— 站尾的「下一站」邀请（沿用首屏 CTA 的做法：无框、融入页面、同一套手感动效） —— */
.page-outro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin: clamp(36px, 6vh, 76px) auto 0;
  max-width: 640px;
  text-align: center;
}
.page-outro .rule {
  width: min(300px, 62%);
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.16;
}
.page-outro .outro-next {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  background: none;
  border: none;
  color: inherit;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  cursor: pointer;
  opacity: 0.92;
}
.page-outro .outro-next::before,
.page-outro .outro-next::after { content: none; display: none; }
.page-outro .outro-next:focus-visible { outline: 2px solid rgba(240, 136, 164, 0.5); outline-offset: 8px; border-radius: 6px; }
.page-outro .outro-next:focus-visible .cta-halo { opacity: 0.85 !important; }
.page-outro .outro-prev {
  background: none;
  border: none;
  padding: 6px 10px;
  color: inherit;
  opacity: 0.38;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: opacity 240ms var(--ease-out);
}
.page-outro .outro-prev:hover { opacity: 0.72; }
.page-outro .outro-prev[hidden] { display: none; }
.sky .page-outro .rule { opacity: 0.24; }

@media (max-width: 860px) {
  .page-outro { gap: 12px; margin-top: 30px; }
  .page-outro .outro-next { font-size: var(--text-xs); letter-spacing: 0.18em; padding: 12px 18px; }
}

/* 无 JS 时不做分页（所有页面正常显示，避免空白） */
html.no-js body > section {
  position: static;
  inset: auto;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

@media print {
  .page-rail, .page-outro { display: none !important; }
  body > section { position: static !important; opacity: 1 !important; visibility: visible !important; }
}