/* ===========================================================================
   photo-gallery-3d · 样式（v2 侧立叠压透视引擎）
   与 v1 手风琴并行，互不依赖；命名空间 pg3-*。

   核心空间关系（全部由 JS 写内联 transform，这里只管观感）：
     主图     z=0    rotateY(0)        正面朝屏幕，尺寸最大
     右侧窄条  z<0    rotateY(-tilt)    侧立、面朝左（朝向主图）
     左侧窄条  z<0    rotateY(+tilt)    侧立、面朝右（朝向主图）
   ⚠ tilt 默认 50°（45~90 可调）：卡片平面与视线成角，透视（观察者在上方正中央）
     把它的两条竖边放到不同深度，近边放大、远边缩小 ⇒ 越往边缘透视越明显。
     tilt=90 时卡片与视线近乎平行，只靠透视露薄薄一片。
   =========================================================================== */

.pg3-stage, .pg3-stage *, .pg3-stage *::before, .pg3-stage *::after { box-sizing: border-box; }

.pg3-stage {
  --pg3-gold: #e9c072;
  --pg3-cream: #ffe9c4;
  --pg3-line: rgba(212, 175, 105, .45);
  --pg3-card-bg: rgba(8, 10, 18, .55);
  --pg3-radius: 12px;
  --pg3-persp: 1600px;
  --pg3-dur: 640ms;
  --pg3-ease: cubic-bezier(.22, .85, .24, 1);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-height: 0;
  padding: 16px 24px 10px;
  gap: 10px;
  overflow: hidden;
}

/* ---------- 透视容器 ---------- */
.pg3-view {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 0;
  perspective: var(--pg3-persp);
  perspective-origin: 50% 50%;
}
.pg3-rail {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* ---------- 单张（既是窄条也是主图，同一个元素换姿态） ---------- */
.pg3-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
  border-radius: var(--pg3-radius);
  overflow: hidden;
  background: var(--pg3-card-bg);
  border: 1px solid rgba(212, 175, 105, .20);
  cursor: pointer;
  will-change: transform, width, height;
  transition:
    transform var(--pg3-dur) var(--pg3-ease),
    width var(--pg3-dur) var(--pg3-ease),
    height var(--pg3-dur) var(--pg3-ease),
    border-color .3s ease,
    box-shadow .3s ease;
  /* ⚠ 背面保持可见：卡片转到 ±90° 时若被裁掉，边缘会整片消失 */
  backface-visibility: visible;
}

.pg3-card > img,
.pg3-card > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  /* 光度梯度：越靠外越暗（JS 写 --pg3-o / --pg3-sat） */
  opacity: var(--pg3-o, .55);
  filter: saturate(var(--pg3-sat, .7)) brightness(var(--pg3-bri, .92));
  transition: opacity .34s ease, filter .34s ease;
}

/* 当前大图 */
.pg3-card.on {
  cursor: grab;
  border-color: rgba(233, 192, 114, .5);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .72), 0 0 80px rgba(212, 175, 105, .10);
}
.pg3-card.on:active { cursor: grabbing; }
.pg3-card.on > img,
.pg3-card.on > video { opacity: 1; filter: none; }

/* 悬停：侧立窄条轻微「起立」提示可点（不改变真实角度，仅靠亮度） */
.pg3-card:not(.on):hover {
  border-color: rgba(233, 192, 114, .7);
  box-shadow: 0 0 24px rgba(233, 192, 114, .22);
}
.pg3-card:not(.on):hover > img { opacity: 1; filter: saturate(.95) brightness(1.06); }

/* ---------- 首帧/尺寸变化时禁动画 ---------- */
.pg3-rail.pg3-noanim .pg3-card { transition: none !important; }

/* ---------- 环形回收：这一帧不插值 ----------
   首尾相连时，每前进一张恰有一张卡从最左端跳到最右端（n 偶数时是正对面那张）。
   它要横穿整个舞台，若挂在过渡上就是一条横穿画面的流星 —— 引擎在写样式前给它挂上
   本类、强制重排后再摘掉，于是它瞬时落位。只影响位移/尺寸与图的光度，不影响悬停反馈。 */
.pg3-card.pg3-snap { transition: none !important; }
.pg3-card.pg3-snap > img,
.pg3-card.pg3-snap > video { transition: none !important; }

/* ---------- 远端档位（全叠 74 张时才出现） ----------
   这一档之后宽度/高度已经撞到 min / hmin 变成常量，每档只挪 2~8px：
   把过渡与 will-change 摘掉，免得 74 个元素每帧重排 width/height、各占一个合成层。
   ⚠ 只关位移与尺寸，边框/阴影的 hover 反馈保留。 */
.pg3-card.pg3-far {
  will-change: auto;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.pg3-card.pg3-far > img,
.pg3-card.pg3-far > video { transition: none; }

/* ---------- 翻页 / 计数 / 圆点 ---------- */
.pg3-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}
.pg3-nav button {
  width: 34px; height: 34px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  border: 1px solid rgba(205, 170, 100, .5);
  background: rgba(14, 16, 28, .6);
  color: var(--pg3-cream);
  font-size: 19px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background .18s, border-color .18s;
}
.pg3-nav button:hover { background: rgba(255, 217, 138, .24); border-color: rgba(233, 192, 114, .9); }
.pg3-nav button:disabled { opacity: .3; cursor: not-allowed; }

.pg3-idx {
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--pg3-cream);
  font-family: "STKaiti", "KaiTi", serif;
  min-width: 56px;
  text-align: center;
}

.pg3-dots { display: flex; gap: 7px; flex: 0 0 auto; }
.pg3-dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(205, 170, 100, .34);
  transition: background .18s, transform .18s;
}
.pg3-dots i.on { background: var(--pg3-gold); transform: scale(1.5); box-shadow: 0 0 10px rgba(233, 192, 114, .9); }

/* ---------- 单图 ---------- */
.pg3-stage.pg3-single .pg3-dots { display: none; }
/* 张数过多（> dotsMax）时隐藏页码点：74 个点会挤成一条虚线，改用 .pg3-idx 的「12 / 74」计数 */
.pg3-stage.pg3-dots-hide .pg3-dots { display: none; }

/* ---------- 移动端 ---------- */
@media (max-width: 820px) {
  .pg3-stage { padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .pg3-stage { --pg3-persp: 900px; }
}