/* ================================================================
   2. 基础布局（页面容器、分屏、网格系统）
   ================================================================ */

/* ── 隐藏滚动条（WebKit + Firefox） ── */
.scroll-container::-webkit-scrollbar {
  display: none; /* WebKit 浏览器隐藏滚动条 */
}

.scroll-container {
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
  height: 100vh; /* 撑满视口高度 */
  width: 100%; /* 撑满视口宽度 */
  overflow-y: scroll; /* 允许垂直滚动 */
}

/* ── 通用分屏区块 ── */
.page-section {
  width: 100%;
  position: relative;
  min-height: 100vh; /* 最小高度为视口高度 */
  display: flex; /* 弹性布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  /* 网格背景 */
  background-image: var(--grid-image);
  background-size: var(--grid-size) var(--grid-size);
  background-repeat: repeat;
}

/* ── 分屏区块首屏无上边距 ── */
.page-section:first-child {
  margin-top: 0;
}

/* ── 亚像素接缝修复（1px 重叠防止白线） ── */
.page-section + .page-section {
  margin-top: -1px; /* 向上偏移 1px 消除接缝 */
  padding-top: 1px; /* 用 padding 补偿偏移，避免累积误差 */
}

/* ── 第三屏特殊处理：排除 flex 布局（由 JS 控制高度） ── */
#page3 {
  display: block !important;
  min-height: 0;
  position: relative;
  z-index: 4;
  background-image: none !important; /* 第三屏不使用网格背景 */
  background-color: transparent !important;
  margin-top: -1px; /* 接缝修复 */
}

/* ── 第五屏特殊处理：内容撑开高度 ── */
#page5 {
  min-height: 100vh; /* 最小高度 */
  height: auto; /* 内容多时自动撑开 */
  z-index: 10;
}

/* ── 前景橡皮筋效果基础样式 ── */
.elastic-fg {
  will-change: transform; /* 提示浏览器优化 transform 动画 */
  -webkit-backface-visibility: hidden; /* 防止 3D 变换时的闪烁 */
  backface-visibility: hidden;
}