/* ================= 人物宣传视觉 · 环形剧场 =================
   结构：外层 .tt-scroll 提供**有限长度**的滚动区（--tt-vh，默认 470vh），
        内部 .tt-sticky 固定在视口里当舞台。
   最后一张之后继续向下滚就正常离开展厅；反向滚也能退出，**不做无限滚轮拦截**。

   真 3D 靠 .tt-scene 的 perspective + .tt-card 的 translate3d/rotateY。
   中央 60–68vh；相邻 80%·25°；外侧 60%·40°（外层再收一档）。
   几何量（横向半步长、一个 z 单位多少 px）由 JS 写在 --tt-half / --tt-unit 上，
   卡片只写 transform，不每帧读 DOM。

   ⚠️ 命中区域按**变换后的真实位置**算：被挡在后面（|d|>2）的卡片
   用 visibility:hidden + pointer-events:none 真正移出命中测试，
   不是只把透明度调 0（小程序展览踩过"看得见却点不到"）。 */

.tt-section{
  position:relative;
  background:var(--black-absolute);
  border-bottom:1px solid var(--border);
  z-index:5;
}
/* 有限长度的滚动区：只负责提供"滚多少"，本身不显示内容 */
.tt-scroll{height:var(--tt-vh,470vh);position:relative}

.tt-sticky{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
  /* 离厅时整体后退淡出，由 JS 写 transform/opacity */
  transform-origin:50% 60%;
  will-change:transform,opacity;
}

/* 极淡的局部色光：跟着当前海报换色。只落在背景上，作品本身保持原色。 */
.tt-light{
  position:absolute;
  inset:-10% -10% 0;
  z-index:0;
  pointer-events:none;
  transition:background .7s var(--ease-out);
}

/* ---------- 舞台 ---------- */
.tt-scene{
  position:absolute;
  inset:0;
  z-index:1;
  perspective:1500px;
  perspective-origin:50% 48%;
  touch-action:pan-y;
  cursor:grab;
  /* ⚠️ 这一条是"看得见却点不到"的解药：
     卡片 rotateY + scale 之后，**轴对齐的边框盒**比实际画出来的海报大，
     相邻卡片的边框盒会盖住中央海报的左右区域，elementFromPoint 就命中了相邻卡片，
     于是点中央没反应。把命中区裁到按钮自身盒内（留 0.5px 避免边界抖动），
     命中测试才和眼睛看到的一致。 */
  clip-path:inset(0.5px);
}
.tt-scene.is-dragging{cursor:grabbing}
.tt-stage{
  position:absolute;
  inset:0;
  /* ⚠️ 舞台自己**绝不参与命中测试** —— 这是"看得见却点不到"的第二个根因，
     而且是这一轮才查出来的：.tt-stage 是 preserve-3d 容器，它的平面在 z=0，
     而两侧海报被 translateZ 推到了 z<0（更远）。同一个 3D 渲染上下文里，
     舞台平面就排在它们**前面**，它盖满整个视口 → elementFromPoint 永远返回
     div.tt-stage，侧边海报一张都点不到（中央那张 z=0、又排在DOM后面，所以能点，
     症状就成了"只有中间的能点"）。
     实测：同一个点，舞台 pointer-events:auto 时命中 div.tt-stage，
     设成 none 之后立刻命中 button.tt-card（i=1）。
     卡片自己的 pointer-events 由 applyCard 逐帧写（够得着的 auto、够不着的 none），
     所以这里关掉舞台不会影响任何一张海报的可点性；拖动监听在 .tt-scene 上，
     空白处照样能拖。 */
  pointer-events:none;
  /* ⚠️ 用 grid 让所有卡片叠在同一个单元格里居中 ——
      这样卡片上**不需要 margin**（flex 居中会让 margin:auto 触发 transform 覆盖），
      也不需要 translate(-50%,-50%)（那会把卡片再左移半张）。 */
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
  --tt-tight:0;
  /* 队列展开系数：进厅时由 0.42 涨到 1（弧线由窄变宽）。
     注意它**只影响横向铺开**，不影响每张海报的朝向 —— 朝向那部分更早结束，
     视觉上就是"先展开、再转正"。 */
  --tt-spread:1;
}
.tt-card{
  grid-area:1/1;
  margin:0;
  padding:0;
  border:0;
  background:none;
  transform-origin:50% 50%;
  will-change:transform,opacity,filter;
  /* ⚠️ 把命中区裁到按钮自身盒内：卡片 rotateY+scale 之后**轴对齐的边框盒**
     比实际画出来的海报大得多（实测中央那张的盒子能盖住旁边的侧边海报），
     elementFromPoint 就会命中中央卡，于是**点侧边海报没反应**。
     只裁 0.5px 是为了避开边界抖动。 */
  clip-path:inset(0.5px);
}
.tt-card img{
  display:block;
  /* 高度由 JS 给的 --tt-center-h 决定；宽度按各自原始比例算（不拉伸） */
  height:var(--tt-center-h,560px);
  width:auto;
  max-width:none;
  background:var(--graphite);
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;      /* 拖动时不触发图片原生拖拽；点击交给 button */
}
/* 低分辨率作品：按原图像素封顶，不做假高清。
   ⚠️ 用 max-height 卡在 CSS 像素上（清单里给了 lowRes 标记）。 */
.tt-card[data-lowres] img{max-height:560px}

/* ---------- 左上标题 / 底部信息 / 右上入口 ---------- */
.tt-head{
  position:absolute;
  left:var(--gutter);
  top:clamp(24px,5vh,64px);
  z-index:30;
  pointer-events:none;
}
.tt-no{
  display:block;
  margin-bottom:10px;
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--accent);
}
.tt-title{
  margin:0;
  font-family:var(--font-display-cn,'Noto Serif SC',serif);
  font-weight:700;
  font-size:clamp(22px,2.2vw,34px);
  letter-spacing:-.01em;
  color:var(--text-primary);
}
.tt-sub{
  margin:8px 0 0;
  font-family:var(--font-ui);
  font-size:10px;
  letter-spacing:.3em;
  color:var(--text-secondary);
}

.tt-foot{
  position:absolute;
  left:var(--gutter);
  right:var(--gutter);
  bottom:clamp(20px,4.5vh,52px);
  z-index:30;
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto auto;
  gap:clamp(14px,2vw,34px);
  align-items:center;
}
/* 文字信息固定在舞台底部，切换时短距离上下交替，**不跟着海报旋转** */
.tt-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:16ch;
}
.tt-name{
  font-size:15px;
  color:var(--text-primary);
  transition:opacity .28s var(--ease-out),transform .28s var(--ease-out);
}
.tt-count{
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--text-secondary);
}
.tt-count b{color:var(--accent);font-weight:500}
/* 切换时上下交替一次（加 .is-tick 触发），不旋转 */
.tt-meta.is-tick .tt-name{animation:tt-tick .34s var(--ease-out)}
@keyframes tt-tick{
  0%{opacity:.2;transform:translateY(7px)}
  100%{opacity:1;transform:translateY(0)}
}
.tt-nav{display:flex;gap:10px}
.tt-arrow{
  width:44px;height:44px;
  border:1px solid var(--border);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;
  color:var(--text-secondary);
  background:rgba(5,5,6,.5);
  transition:color .28s var(--ease-out),border-color .28s var(--ease-out);
}
.tt-arrow:hover,.tt-arrow:focus-visible{color:var(--text-primary);border-color:rgba(255,255,255,.34)}
.tt-hint{
  margin:0;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--text-secondary);
  opacity:.8;
}
.tt-all,.tt-skip{
  padding:11px 18px;
  border:1px solid var(--border);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--text-secondary);
  background:rgba(5,5,6,.5);
  white-space:nowrap;
  transition:color .28s var(--ease-out),border-color .28s var(--ease-out);
}
.tt-all:hover,.tt-skip:hover,.tt-all:focus-visible,.tt-skip:focus-visible{
  color:var(--text-primary);border-color:rgba(255,255,255,.34);
}
.tt-skip{color:var(--text-primary);border-color:rgba(255,255,255,.22)}

/* ================= 全部作品索引层 =================
   只负责快速查找，不承担主舞台的效果。 */
.tt-index{
  position:fixed;
  inset:0;
  z-index:90;
  display:none;
  background:rgba(3,3,4,.97);
  overflow:auto;
  padding:clamp(24px,4vh,56px) var(--gutter) clamp(40px,6vh,80px);
}
.tt-index.is-open{display:block}
.tt-index-head{
  display:flex;
  align-items:baseline;
  gap:20px;
  margin-bottom:clamp(20px,3.4vh,40px);
  padding-bottom:18px;
  border-bottom:1px solid var(--border);
}
.tt-index-title{
  margin:0;
  font-family:var(--font-display-cn,'Noto Serif SC',serif);
  font-weight:700;
  font-size:clamp(20px,2vw,30px);
  color:var(--text-primary);
}
.tt-index-count{
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--text-secondary);
}
.tt-index-close{
  margin-left:auto;
  padding:10px 16px;
  border:1px solid var(--border);
  font-size:12px;
  color:var(--text-secondary);
  transition:color .28s var(--ease-out),border-color .28s var(--ease-out);
}
.tt-index-close:hover{color:var(--text-primary);border-color:rgba(255,255,255,.34)}
.tt-index-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:clamp(16px,2vw,30px);
}
.tt-index-card{
  margin:0;padding:0;border:0;background:none;text-align:left;
  transition:transform .34s var(--ease-out);
}
.tt-index-card:hover,.tt-index-card:focus-visible{transform:translateY(-6px)}
.tt-index-card img{
  width:100%;
  height:auto;
  display:block;
  background:var(--graphite);
}
.tt-index-name{
  display:block;
  margin-top:10px;
  font-size:12px;
  line-height:1.6;
  color:var(--text-secondary);
  transition:color .28s var(--ease-out);
}
.tt-index-name i{
  font-style:normal;
  margin-right:7px;
  font-size:10px;
  letter-spacing:.16em;
  opacity:.6;
}
.tt-index-card:hover .tt-index-name{color:var(--text-primary)}

/* ================= 窄屏 =================
   环形剧场在窄屏上空间不够，退回"一张大图 + 左右箭头"，不做挤压的假 3D。 */
@media(max-width:900px){
  .tt-foot{
    grid-template-columns:auto auto;
    grid-template-areas:'meta nav' 'hint hint' 'all skip';
    justify-content:space-between;
    gap:12px;
  }
  .tt-meta{grid-area:meta}
  .tt-nav{grid-area:nav}
  .tt-hint{grid-area:hint}
  .tt-all{grid-area:all;text-align:center}
  .tt-skip{grid-area:skip;text-align:center}
  .tt-scene{perspective:1000px}
  .tt-index-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .tt-light{transition:none}
  .tt-meta.is-tick .tt-name{animation:none}
  .tt-index-card{transition:none}
}