/* =========================================================
   摄影作品 · 照片墙（js/wall.js）
   开屏往上翻开后，下面整屏是一面往下、往左、往右都没有尽头的照片墙（上面有顶，顶上往下拉回开屏）；点一张看大图
   排法：展墙错落（2026-10-10 定稿，参考 Wolfgang Tillmans 布展）
   照片一律方角（2026-10-10 用户：不要圆弧，方方正正）
   ========================================================= */
.photo-wall-page .site-footer { display: none; }                 /* 照片墙没有尽头，页脚放不下 */
.wall {
  position: relative; overflow: hidden;
  height: 100vh; height: 100svh;
  margin-top: calc(-1 * var(--header-h));                       /* 伸到顶部导航下面，照片从磨砂导航底下滑过 */
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  cursor: grab;
}
.wall.is-dragging { cursor: grabbing; }
.w-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.w-it { position: absolute; left: 0; top: 0; margin: 0; contain: layout style; }
.w-ph { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--c, #ddd); }
.w-ph img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; -webkit-user-drag: none; pointer-events: none; }
.w-ph img.is-on { opacity: 1; }
@media (hover: hover) { .w-it .w-ph img { transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); } .w-it:hover .w-ph img.is-on { transform: scale(1.03); } }
/* 第一次出现：从上面中间往外、往下一圈圈浮上来 */
.w-it.w-in .w-ph { animation: w-in .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
@keyframes w-in { from { opacity: 0; transform: translateY(18px) scale(.94); } }
.w-it.w-wait .w-ph { opacity: 0; }

/* 底部提示 + 回到开屏 */
.w-hint { position: absolute; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 3;
  margin: 0; padding: 9px 18px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: .06em; color: var(--color-blue);   /* 只写「拖动探索」，蓝字（2026-10-10） */
  background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  box-shadow: inset 1.5px 1.5px 1px rgba(255,255,255,.9), inset -1px -1px 1px rgba(255,255,255,.5), 0 6px 22px rgba(0,0,0,.10);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.w-hint.is-gone { opacity: 0; transform: translate(-50%, 10px); }
.w-up { position: absolute; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 3; width: 48px; height: 48px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--color-blue); -webkit-tap-highlight-color: transparent;
  background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  box-shadow: inset 1.5px 1.5px 1px rgba(255,255,255,.9), inset -1px -1px 1px rgba(255,255,255,.5), 0 6px 22px rgba(0,0,0,.10); }
.w-up svg { width: 20px; height: 20px; }
.w-up:active svg { transform: scale(.86); }

/* 展墙错落（参考 Wolfgang Tillmans 布展）：暖白的墙，照片像没装框的相纸贴在墙上，带一点点影子 */
.wall { background: #f0eee9 radial-gradient(75% 60% at 50% 35%, #f6f4ef 0%, #f0eee9 75%); }   /* 暖灰白的墙，不是纯白（2026-10-10 用户要求） */
.photo-wall-page { --color-bg: #f0eee9; }                          /* 顶部导航后面的渐隐层也用墙的颜色，不显白边 */
.w-ph { box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 20px rgba(0, 0, 0, .06); }

/* ---------- 看大图 ---------- */
.lb { position: fixed; inset: 0; z-index: 80; touch-action: none; -webkit-user-select: none; user-select: none; }
.lb[hidden] { display: none; }
.lb-bg { position: absolute; inset: 0; background: rgba(255, 255, 255, .97); opacity: 0; transition: opacity .45s ease; }
.lb.is-open .lb-bg { opacity: 1; }
.lb-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; box-shadow: 0 30px 80px rgba(0, 0, 0, .18); background: var(--c, #ddd); }
.lb-cap { position: absolute; left: 16px; right: 16px; bottom: max(24px, env(safe-area-inset-bottom)); margin: 0; text-align: center; opacity: 0; transition: opacity .4s ease .15s;
  font-family: var(--font-sans); font-size: 15px; line-height: 1.5; color: #6e6e73; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.lb.is-open .lb-cap { opacity: 1; }
.lb-btn { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  color: #1d1d1f; background: rgba(120, 120, 128, .12); opacity: 0; transition: opacity .3s ease; }
.lb.is-open .lb-btn { opacity: 1; }
.lb-btn svg { width: 20px; height: 20px; }
.lb-prev { left: 20px; } .lb-next { right: 20px; }
.lb-x { top: 24px; right: 20px; margin-top: 0; }
@media (hover: none), (max-width: 759px) { .lb-prev, .lb-next { display: none; } }   /* 手机上左右滑换张 */

@media (prefers-reduced-motion: reduce) {
  .w-it.w-in .w-ph { animation: none; }
  .w-ph img, .lb-bg, .lb-cap { transition: none; }
}