/* ═══════════════════════════════════════════════════════════
   相册「展陈版式」层（年轮 / 立牌 / 扇面）
   底色一律奶粉浅色；照片是画面里唯一的颜色
   依赖 theme-light.css 的令牌：--bg-0 --a1 --a2 --text --muted --faint --glow-*
   ═══════════════════════════════════════════════════════════ */

/* ── 版式切换：透明文字按钮 ── */
.stream-wrap { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.modes {
  display: flex; align-items: center; gap: 3px; padding: 4px;
  border-radius: 0; align-self: flex-start;
  background: transparent; border: 0; box-shadow: none;
}
.modes .cap { font-size: 11px; letter-spacing: .06em; color: var(--faint); padding: 0 10px 0 8px; }
.modes button {
  font: inherit; font-size: 12.5px; padding: 6px 14px; border-radius: 999px;
  border: 0; background: transparent; color: #381044; font-weight: 700; cursor: pointer;
  transition: color .18s, background .18s;
}
.modes button:hover { text-decoration: underline; text-underline-offset: 5px; }
.modes button.on {
  color: #381044; font-weight: 900;
  background: transparent; box-shadow: none;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px;
}
.modes button:focus-visible { outline: 2px solid var(--a1); outline-offset: 2px; }
/* 「年轮」不再是本站式，而是通往独立年轮页 /rings.html 的入口（避免站内两套年轮打架） */
.modes .modes-entry {
  font-size: 12.5px; padding: 6px 14px; border-radius: 999px; text-decoration: none;
  color: #381044; font-weight: 700; border: 0; background: transparent;
  transition: color .18s, background .18s, border-color .18s;
}
.modes .modes-entry:hover { text-decoration: underline; text-underline-offset: 5px; }
.modes .modes-entry:focus-visible { outline: 2px solid var(--a1); outline-offset: 2px; }

/* ── 舞台 ── */
/* 底下那条固定导航条（地图/相册/上传/我的）会浮在视口底部约 90px 处，
   舞台必须让开它，否则年轮/扇面最下面那圈会被压住。 */
.stream.as-stage { padding: 0; height: calc(100vh - 288px); min-height: 460px; }
@media (max-width: 900px) { .stream.as-stage { height: calc(100vh - 360px); min-height: 380px; } }
/* 网格版式是滚动页：末尾留一条空档，免得最后一行被那条固定导航条压住 */
.stream:not(.as-stage) { padding-bottom: 104px; }

/* ⚠️ `.stream.as-stage` 原来写的是 `overflow: hidden`，已去掉（先生 2026-10-03 凌晨
   "把方框去了" / "这边挡住了"）。
   为什么必须去：扇面的支点在 `top: var(--pivot, 96%)`（几乎贴舞台底边），
   照片从底部甩出一道弧线往上去 —— **弧顶比舞台还高**。
   实测（1440×900，扇面）：舞台顶边 128、最高一张照片的顶边 **−143** ——
   也就是说弧顶比舞台高出 271px，`overflow: hidden` 把它整段裁掉，
   读者看到的就是"最上面那几张斜照片被切掉了"。
   去掉之后照片可以自然溢出到舞台之外（舞台本身没有边框了，溢出去也不难看）。 */

.lay-stage {
  position: relative; width: 100%; height: 100%; overflow: visible;
  touch-action: none; cursor: grab;
  /* ⚠️ 边框与底色渐变已按先生的话去掉（"把方框去了"）。
     原来这里是 `border: 1px solid rgba(166,79,99,.10)` + 一层 radial 底色渐变 ——
     就是那个把照片"框住"的方框。现在舞台变成**看不见的手势区**：
     照片直接浮在纸面上，没有矩形边界。
     `border-radius` 一并去掉（没有边框与底色了，圆角无从体现）。 */
  background: none; border: 0; border-radius: 0;
}
.lay-stage.dragging { cursor: grabbing; }
/* ── 手机拖拽（2026-10-03 修"拖不动立牌"）──
   ① 牌盒自己也声明 touch-action:none：个别浏览器不认父级的 none，认元素自己的；
   ② 图片一律不接收指针：长按不会触发系统"存储图像"弹层、原生图片拖动（它们会发 pointercancel 把拖拽打断）；
   ③ 舞台上禁止选中文字。 */
.lay-tile { touch-action: none; }
.lay-stage { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.lay-stage img { pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.lay-stage.m-ring::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(166, 79, 99, .05), rgba(166, 79, 99, 0) 62%);
}
.lay-stage.m-tilt::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; pointer-events: none;
  background: linear-gradient(180deg, rgba(166, 79, 99, 0) 0%, rgba(166, 79, 99, .05) 100%);
}
/* 立牌的地平线：2026-09-24 先生要求去掉那根 1px 粉线（照片直接站在地面渐变上，更干净）。
   原来这里是 .lay-stage.m-tilt::after 画的一条 1px 渐变线；`.lay-stage.m-tilt::before`（地面渐变）保留。 */
.lay-stage.m-fan::after {
  content: ''; position: absolute; left: 50%; bottom: -6%; width: 62%; height: 34%; transform: translateX(-50%);
  pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%, rgba(166, 79, 99, .09), rgba(166, 79, 99, 0) 70%);
}

/* ── 三个容器 ── */
.lay-rot {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(calc(var(--rot, 0) * 1deg)) scale(var(--zoom, 1));
  transition: transform .18s ease-out;
}
.lay-stage.dragging .lay-rot { transition: none; }

.lay-track {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  transform: translateX(var(--xoff, 0px));
  transition: transform .16s ease-out;
}
.lay-stage.dragging .lay-track { transition: none; }

.lay-fan {
  position: absolute; left: 50%; top: var(--pivot, 96%); width: 0; height: 0;
}

/* ── 照片牌 ── */
.lay-tile {
  position: absolute; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, .78);
  /* ⚠️ 2026-09-24 夜：裁切下沉到内层 .lay-clip（见 flip-detail.css）。
     牌盒改成 overflow:visible —— 悬停那两圈柔光要漫出牌面，
     被 overflow:hidden 裁在框里会变成压在照片上的一根白线（年轮那边同款坑）。 */
  border-radius: 10px; overflow: visible; cursor: pointer; background: #f7ece9 center/cover no-repeat;
  box-shadow: 0 6px 18px var(--glow, rgba(122, 74, 86, .18)), 0 1px 3px rgba(122, 74, 86, .14);
  opacity: 0; animation: layIn .55s cubic-bezier(.22, .7, .25, 1) var(--d, 0ms) forwards;
  /* ⛔ 这里**绝不能**写 will-change：71 张牌各开一层合成层，实测帧间隔 111ms→16.6ms 的差距就在这一行。
     要提升就提升"会动的那个容器"（下面 .lay-rot / .lay-track / .lay-fan）。 */
}
/* 只有真正会移动的容器配得上合成层（每页 1 层，而不是每张照片 1 层） */
.lay-rot, .lay-track, .lay-fan { will-change: transform; }
.lay-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
  opacity: 0; transform: scale(1.05); transition: opacity .5s ease, transform .9s ease;
}
.lay-tile img.in { opacity: 1; transform: none; }
.lay-tile:hover { box-shadow: 0 18px 44px var(--glow, rgba(122, 74, 86, .3)), 0 2px 6px rgba(122, 74, 86, .18); }
.lay-tile:focus-visible { outline: 2px solid var(--a1); outline-offset: 3px; }
@keyframes layIn { from { opacity: 0; } to { opacity: 1; } }

/* 年轮：围着各自的圈转，牌面始终保持水平 */
.t-ring {
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--th, 0deg) + var(--rot, 0) * 1deg))
    translateY(calc(-1 * var(--r, 0px)))
    rotate(calc((var(--th, 0deg) + var(--rot, 0) * 1deg) * -1))
    rotate(var(--tilt, 0deg));
}
/* 年轮刻度尺：不跟盘转，永远立在 12 点方向，从内圈排到外圈 */
.lay-axis { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 6; pointer-events: none; }
.lay-ringlab {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: baseline; gap: 4px; padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 252, 251, .9); border: 1px solid rgba(166, 79, 99, .18);
  color: var(--text); font-size: 11px; letter-spacing: .06em; white-space: nowrap;
  font-variant-numeric: tabular-nums; pointer-events: none;
  transform: translate(-50%, -50%) translateY(calc(var(--r, 0px) * var(--zoom, 1) * -1));
}
.lay-ringlab b { font-weight: 600; }
.lay-ringlab i { font-style: normal; font-size: 10px; color: var(--faint); }
/* 年轮本身的圈：也画在刻度层里，照片就从圈上转过去。
   它必须跟着 --zoom 一起缩放，否则滚轮放大时照片变大、圈纹丝不动（先生报过）。 */
.lay-ringline {
  position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(166, 79, 99, .19);
  transform: translate(-50%, -50%) scale(var(--zoom, 1));
}

/* 立牌：站在地平线上，略微侧身，像一排相纸 */
.t-tilt {
  transform-origin: bottom center;
  /* ⚠️ 视点必须**写在每张牌自己身上**。
     2026-09-24 祥为了省性能把 perspective 挪到容器（.lay-track）上——结果离画面中心越远的相纸，
     梯形畸变越重（右边的牌看着像被拉斜了），先生当场指出来。改回每张牌自带视点：
     每张只绕自己的轴轻轻侧身，形状不再随位置变化。 */
  transform:
    translate3d(var(--push, 0px), 0, 0)
    perspective(1700px) rotateY(var(--ry, -11deg)) rotateX(1.5deg) rotate(var(--lean, 0deg));
  /* 悬停让位的过渡（先生要的：约 300ms、柔和缓动、只动 transform、布局不动） */
  transition: transform 300ms cubic-bezier(.22, .7, .25, 1);
  bottom: calc(var(--base, 60%) + var(--y, 0px));
  left: var(--x, 0px);
  box-shadow: 0 26px 34px -20px rgba(122, 74, 86, .5), 0 2px 5px rgba(122, 74, 86, .16);
}
/* 悬停中的那一张：轻微上移 + 放大（origin 在底边，所以是"从脚下长起来"的感觉） */
.t-tilt.hot {
  transform:
    translate3d(0, -9px, 0)
    scale(1.045)
    perspective(1700px) rotateY(var(--ry, -11deg)) rotateX(1.5deg) rotate(var(--lean, 0deg));
  z-index: 3000 !important;              /* 抬起来的那张要压住左右邻居 */
  box-shadow: 0 34px 44px -20px rgba(122, 74, 86, .55), 0 3px 8px rgba(122, 74, 86, .2);
}
/* 省电档：动作再收敛一点（perf.js 会在手机/低配机上自动切到这档） */
html[data-quality="smooth"] .t-tilt { transition-duration: 200ms; }
html[data-quality="smooth"] .t-tilt.hot {
  transform:
    translate3d(0, -5px, 0)
    scale(1.02)
    perspective(1700px) rotateY(var(--ry, -11deg)) rotateX(1.5deg) rotate(var(--lean, 0deg));
}
/* 帧预算守卫降级档：这台机器跟不上就"只抬不放大"（layouts.js 实测帧间隔后自动加） */
.lay-stage.hover-lite .t-tilt { transition-duration: 180ms; }
.lay-stage.hover-lite .t-tilt.hot {
  transform:
    translate3d(0, -9px, 0)
    perspective(1700px) rotateY(var(--ry, -11deg)) rotateX(1.5deg) rotate(var(--lean, 0deg));
}
/* 减少动态效果时：不摆姿势，只留一个很短的反馈 */
@media (prefers-reduced-motion: reduce) {
  .t-tilt { transition-duration: 110ms; }
}
/* 只在"正在进行悬停动画"的那几张牌上提升合成层（由 layouts.js 加、过渡完就撤） */
.t-tilt.anim { will-change: transform; }
/* 立牌：整张照片按比例显示，**不裁切、不拉伸**（先生 2026-09-24 明确要求）。
   牌盒的宽高比已按照片真实比例算好，contain 只是兜底（万一比例还不准，宁可露底色也不切画面）。 */
.t-tilt img { object-fit: contain; }
/* 脚下的倒影很贵（实测约吃掉 20% 帧时间）：**只给当前在视口里的那几张牌**开，
   .vis 由 layouts.js 按可见窗口动态打（先生 2026-09-24 选的这一档）。 */
.t-tilt.vis {
  -webkit-box-reflect: below 8px linear-gradient(transparent 62%, rgba(122, 74, 86, .16));
}
.lay-year {
  position: absolute; left: var(--x, 0px); bottom: calc(var(--base, 60%) - 32px);
  font-size: 11px; letter-spacing: .1em; color: var(--faint); pointer-events: none; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lay-year::after {
  content: ''; position: absolute; left: 8px; top: 100%; width: 1px; height: 24px;
  background: linear-gradient(180deg, rgba(166, 79, 99, .32), rgba(166, 79, 99, 0));
}

/* 扇面：沿弧线排开，牌面顺弧微微侧过去 */
.t-fan {
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--th, 0deg) + var(--rot, 0) * 1deg))
    translateY(calc(-1 * var(--R, 320px)))
    rotate(calc((var(--th, 0deg) + var(--rot, 0) * 1deg) * -1))
    rotate(calc(var(--th, 0deg) * .62 + var(--lean, 0deg)));
}

/* ── 舞台上的小字（压在照片上也要读得清，所以给一颗奶粉底） ──
   ⚠️ `.lay-hint`（右下角「拖拽旋转 · 滚轮开合 · 点击看大图」那个方框）已按先生
      2026-10-03 凌晨的话**不再创建**（见 layouts.js 里被注释掉的那几行）。
      这两条样式留着是给 `.lay-note` 用的（"扇面取 N 张"那种真说明仍然要有），
      也方便日后想把提示放回来。
   ⚠️ 顺带记一笔：`.lay-note` 的规则在 `.lay-hint, .lay-note` 这条**后面**覆盖 left/right，
      所以两个元素共用一块底是没有问题的 —— 去掉 hint 不影响 note。 */
.lay-hint, .lay-note {
  position: absolute; bottom: 14px; z-index: 5000; pointer-events: none;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 252, 251, .78);
  border: 1px solid rgba(166, 79, 99, .10);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-variant-numeric: tabular-nums;
}
.lay-hint { right: 16px; font-size: 11.5px; letter-spacing: .06em; color: var(--muted); }
.lay-note { left: 16px; font-size: 11px; letter-spacing: .05em; color: var(--faint); }
.lay-note .dot { margin: 0 8px; opacity: .45; }