/* ============================================================
   图像摄影能力 —— 风景手风琴画廊 + 人像漂移照片墙
   v8：风景展开框 = 照片原生 2:3 竖比例（框随图走，无裁切无暗边）；人像平面渲染
   ============================================================ */

.photo-sub {
  margin: clamp(26px, 3vw, 44px) 0 14px;
  font-size: 14px;
  letter-spacing: .06em;
  color: rgba(235, 238, 246, .82);
}
.photo-sub b { color: #ffd76a; margin-right: 6px; }
.photo-sub:first-of-type { margin-top: clamp(18px, 2.4vw, 30px); }

/* ---------------- 风景 · 手风琴画廊 ----------------
   5 张等权面板，悬停展开；折叠态 cover 取景主体，
   展开态 contain 显示完整原图。全彩、无缩放模糊。 */
.acc-gallery {
  --acc-gap: 10px;
  --acc-radius: 14px;
  --acc-accent: #ffd76a;
  --acc-h: clamp(380px, 46vw, 560px);    /* 面板高度 */
  --acc-w: calc(var(--acc-h) * 2 / 3);   /* 展开框 = 原生 2:3 竖比例，与照片完全同框 */

  display: flex;
  flex-direction: row;
  gap: var(--acc-gap);
  width: 100%;
  height: var(--acc-h);
}

.acc-panel {
  position: relative;
  flex: 0 0 auto;
  /* 折叠宽 =（总宽 - 4 间隙 - 展开宽）/ 4；恒有一个 active → 值恒定，width 过渡即可平滑 */
  width: calc((100% - 4 * var(--acc-gap) - var(--acc-w)) / 4);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--acc-radius);
  cursor: pointer;
  padding: 0;
  margin: 0;
  border: 0;
  background: #0a0c13;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8);
  transition: width .6s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
  will-change: width;
  -webkit-tap-highlight-color: transparent;
}
.acc-panel:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--acc-accent), 0 10px 30px -18px rgba(0, 0, 0, .8);
}
.acc-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0a0c13;
  user-select: none;
  -webkit-user-drag: none;
}
/* 展开态：cover 满铺无边框（contain 的上下模糊暗边被用户视为边框，弃用）
.acc-panel__bg {
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center;
  filter: blur(22px) brightness(.5) saturate(1.1);
  transform: scale(1.12);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.acc-panel.is-active .acc-panel__bg { opacity: 1; }
.acc-panel.is-active img { object-fit: cover; }
/* 底部渐变只为压住标签文字，不压暗整图 */
.acc-panel__grad {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(7, 9, 16, .62) 100%);
  opacity: 0;
  transition: opacity .45s ease;
}
.acc-panel__label {
  position: absolute;
  left: 18px;
  bottom: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  z-index: 2;
}
.acc-panel__bar {
  flex: 0 0 auto;
  width: 3px;
  height: 26px;
  border-radius: 3px;
  background: var(--acc-accent);
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .5s ease .06s, transform .5s cubic-bezier(.22, 1, .36, 1) .06s;
  box-shadow: 0 0 12px rgba(255, 215, 106, .6);
}
.acc-panel__text {
  color: #fff;
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .5s ease .12s, transform .5s cubic-bezier(.22, 1, .36, 1) .12s;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}
.acc-panel.is-active { width: var(--acc-w); box-shadow: 0 18px 48px -20px rgba(0, 0, 0, .85); }
.acc-panel.is-active .acc-panel__grad { opacity: 1; }
.acc-panel.is-active .acc-panel__bar { opacity: 1; transform: translateX(0); }
.acc-panel.is-active .acc-panel__text { opacity: 1; transform: translateX(0); }

@media (max-width: 640px) {
  .acc-gallery { flex-direction: column; height: auto; }
  .acc-panel { width: 100%; height: 76px; transition: height .5s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease; }
  .acc-panel.is-active { width: 100%; height: min(calc((100vw - 44px) * 1.5), 78vh); }
}

/* ---------------- 人像 · 漂移照片墙 ----------------
   平面渲染：无 perspective / rotate3d / scale —— 消除 3D 重栅格化
   造成的模糊与高 GPU 占用。列位移用整数像素。 */
.drift-wall {
  position: relative;
  width: 100%;
  height: clamp(520px, 56vw, 680px);
  overflow: hidden;
  border-radius: 18px;
  --dw-gap: 14px;
  --dw-radius: 12px;
  --dw-dim: .88;
  opacity: 0;                         /* 缩略图就绪后由 .is-ready 淡入，避免空块 */
  transition: opacity .5s ease;
}
.drift-wall.is-ready { opacity: 1; }
.drift-wall__plane {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: row;
  gap: var(--dw-gap);
}
.drift-wall__track {
  display: flex;
  flex-direction: column;
  /* 间距已内含在 tile 高度里（imgH + GAP），此处不能再加 gap —— 双重间距会让
     实际节距变成 28px，边缘虚化的位置推算随块数累计漂移 */
  will-change: transform;
}
.drift-wall__tile {
  position: relative;
  display: block;
  width: 100%;
  flex: 0 0 auto;
  outline: none;
}
.drift-wall__inner {
  position: absolute;
  inset: calc(var(--dw-gap) / 2);
  display: block;
  border-radius: var(--dw-radius);
  overflow: hidden;
  background: #0b0d14;
  opacity: var(--dw-dim);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1),
              opacity .35s ease,
              filter .3s ease,
              box-shadow .35s ease;
}
.drift-wall__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* tile 高度 = 原图比例算出的高度，实际无裁切 */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.drift-wall__shade {
  position: absolute;
  inset: 0;
  background: #070910;
  opacity: .12;
  pointer-events: none;
  transition: opacity .35s ease;
}
.drift-wall__tile.is-active .drift-wall__inner {
  opacity: 1;
  transform: translateY(-8px);      /* 不做 scale：缩放会在 overflow:hidden 里裁掉照片四边 */
  box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .7);
}
.drift-wall__tile.is-active .drift-wall__shade { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .drift-wall__track { will-change: auto; }
}