/* 新疆旅行杂志 H5 —— 翻页式浏览
   窄屏(<768px):每屏单页;宽屏:每屏双页对开,封面独占。
   翻页过渡:当前屏向上滑出,下一屏自下方滑入(反向同理)。
   防白框闪烁:缓存屏常驻 viewer 默认隐藏(visibility 不影响 <object> 加载);
   .pg 未就绪为纸色占位,load 后转回原白底(app.js 加 .ready)。 */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #1f1c18;
  color: #ece6db;
  overflow: hidden;
  overscroll-behavior: none;
}

.viewer {
  position: fixed;
  inset: 0;
  touch-action: pinch-zoom; /* 放行双指捏合缩放,单指竖滑由 JS 翻页接管 */
  user-select: none;
  -webkit-user-select: none;
}

/* 一屏(一页或一个对开) */
.sheet {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 12px;
  visibility: hidden; /* 预载缓存屏隐藏待命;参与过渡/展示的屏见下方显隐规则 */
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* <object> 加载 SVG(可拉取外链 WebP;<img> 模式下浏览器禁外部子资源) */
/* 书页边缘柔光 = site_nav 资产真值(sheet_shadow(),家族口径),
   由 site/inject_gallery_nav.py 注入,不在此手写 */
.sheet .pg {
  display: block;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  border: 0;
  background: #f5f0e6; /* 未就绪纸色占位,避免纯白框闪烁(站点纸色) */
  pointer-events: none;
}
/* 单页 load 成功后转回原白底(视觉与旧版一致;SVG 自带底色,过渡期外看不出差别) */
.sheet .pg.ready { background: #fff; }
/* 双页对开:两页各自限半宽,中缝无缝 */
.sheet.pair .pg { max-width: 50%; }

/* 过渡定位态(JS 切换) */
.sheet.enter-from-bottom { transform: translateY(100%); transition: none; }
.sheet.enter-from-top    { transform: translateY(-100%); transition: none; }
.sheet.leave-to-top      { transform: translateY(-100%); }
.sheet.leave-to-bottom   { transform: translateY(100%); }
.sheet.center            { transform: translateY(0); }
/* 参与过渡/展示的屏点亮(其余缓存屏保持 hidden,不占视觉) */
.sheet.enter-from-bottom,
.sheet.enter-from-top,
.sheet.leave-to-top,
.sheet.leave-to-bottom,
.sheet.center { visibility: visible; }

/* 首页顶部提示(仅首屏显示) */
.top-note {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  font: 12px/1.7 system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: rgba(236, 230, 219, 0.75);
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: opacity 0.3s;
}
.top-note a { color: #fff; text-decoration: underline; }
.top-note.hidden { opacity: 0; pointer-events: none; }

/* 首页呼吸上滑箭头(首次翻页后移除) */
.swipe-hint {
  position: fixed;
  left: 50%;
  bottom: max(36px, calc(env(safe-area-inset-bottom) + 28px));
  transform: translateX(-50%);
  z-index: 11;
  pointer-events: none;
  animation: swipe-breathe 1.6s ease-in-out infinite;
}
.swipe-hint svg { display: block; }
@keyframes swipe-breathe {
  0%, 100% { transform: translate(-50%, 6px); opacity: 0.25; }
  50%      { transform: translate(-50%, -6px); opacity: 0.9; }
}

/* 页码指示 */.pager-hint {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  font: 12px/1.6 system-ui, sans-serif;
  letter-spacing: 0.1em;
  color: rgba(236, 230, 219, 0.45);
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 12px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 10;
}