/* 看了么 · 封面墙
 * 铺满窗口不滚动，磁贴大小混合、彼此紧贴无缝；只有换图动画（翻转 / 滑盖）+ 图内缓慢平移。
 */

:root {
  color-scheme: dark;
  --tile-bg: #0a0d12;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #05070a;
  overflow: hidden;           /* 不需要滚动 */
}

.wall {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 6), 1fr);
  grid-template-rows: repeat(var(--rows, 3), 1fr);
  gap: 0;                     /* 图片之间紧贴，不留缝 */
}

.tile {
  position: relative;
  overflow: hidden;
  perspective: 1000px;
  contain: layout paint;
  background: var(--tile-bg);
}

.layers {
  position: absolute;
  inset: 0;
}

/* 注意：这里刻意不用 transform-style: preserve-3d。
   两个面各自 3D 变换（父级 perspective 提供景深），绘制顺序由 z-index 决定，
   这样滑盖动画能稳定地「新图压在旧图上面」。 */

.layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--tile-bg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: center center;
}

.layer.is-hidden {
  opacity: 0;
  visibility: hidden;
}

/* 隐藏的那一面停掉平移动画，省电 */
.layer.is-hidden img { animation-play-state: paused; }

.layer img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  max-width: none;
  max-height: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 「图太大铺不满磁贴」时缓慢平移，让整张海报都能看到 */
@keyframes pan-x {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--pan, 0px)), 0, 0); }
}

@keyframes pan-y {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(-1 * var(--pan, 0px)), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .layer img { animation: none !important; }
}

/* ── 全屏按钮 ───────────────────────────────────────────────
   平时隐形，鼠标/触摸一动才淡入，静止 3 秒淡出；手指碰不到鼠标的设备靠
   进页面后先亮 5 秒提示位置。?still=1（截图模式）由 JS 直接不显示。 */
.fs-btn {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 50;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: rgba(10, 13, 18, .55);
  color: rgba(255, 255, 255, .72);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease, background .2s ease, color .2s ease;
}

.fs-btn[hidden] { display: none; }

/* 只在「UI 醒着」的时候可点，避免隐形按钮截胡点击 */
body.ui-active .fs-btn,
.fs-btn:focus-visible {
  opacity: .9;
  visibility: visible;
  pointer-events: auto;
}

.fs-btn:hover { background: rgba(10, 13, 18, .82); color: #fff; }
.fs-btn:active { transform: scale(.94); }

.fs-btn svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 进全屏显示「收拢」图标，退出全屏显示「展开」图标 */
.fs-btn[data-state="enter"] .fs-exit,
.fs-btn[data-state="exit"] .fs-enter { display: none; }