/* 物证实验室（CASE_FILE // 02-B）
   参考 jayuestudio.com 作品区：左编号、中标题与说明、右大图；跟着滚动切换，滚到哪件哪件亮、其余压暗。
   激活的那件播放一段静音循环短片（lab/l0N-*.mp4：1440×800 窗口按 2 倍收帧、成片 1800×1000 / 30fps / 7–11 秒；3D 桌面那段用同比例的 1620×900，报纸才放得下），同名 jpg 是从成片里取的封面。
   画面铺满右栏、不加衬底，只留一道细线；标题上沿对齐画面上沿，标签和链接沉到底、对齐画面下沿。
   （10-10 本人否掉的：画面外垫一圈同图模糊放大的柔光边——叠上深色视频成了一圈厚亮边；另两个候选：文字只顶对齐、加红角标和说明行。）
   10-09 本人先后否掉：物证袋（太戏、太乱）→ 三张卡片（截图被裁、白底跳）→ 悬停清单（不如参考站丝滑）。
   2026-10-29 借 byziwei 作品区再打磨（本人「都做 demo 我看下效果」）：编号从独立的左栏挪到标题上方、标题放大；
   说明下面加一张登记表（角色 / 状态 / 类型），填上原来说明和标签之间那一大块空；左边栏挂当前编号。
   放大镜、激活时盖章也做过样板，本人看了说「有点没必要」，去掉；又说「字这边有点太紧贴了」——编号栏拿掉后文字贴着左边栏，整组往右让出一段。 */

.lab__intro {
  max-width: 640px;
  margin: 28px 0 24px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-dim);
}

.lab-items { display: flex; flex-direction: column; }
/* 原来左边那条 150px 编号栏兼做留白；编号挪走后文字直接贴着左边栏，这里补回一段。
   第一版左边让了 7vw，本人说右边又太贴了（画面顶到右边、压到右下角浮窗），文字和画面的间距合适——整组往左挪一点，右边也留一段 */
@media (min-width: 1101px) {
  .lab-items { padding: 0 clamp(16px, 2vw, 32px) 0 clamp(24px, 3vw, 48px); }
}

.lab-item {
  display: grid;
  grid-template-columns: minmax(0, 4.2fr) minmax(0, 5.8fr);
  column-gap: 56px;
  align-items: stretch;
  padding: 72px 0;
}
.lab-item + .lab-item { border-top: 1px solid rgba(255, 255, 255, 0.06); }

/* 未激活的压暗，激活的亮起；过渡放慢一点，滚动时是渐变不是跳变 */
.lab-item__text,
.lab-item__media {
  transition: opacity 0.7s ease, filter 0.7s ease, transform 0.9s var(--ease-inout);
}
.lab-item:not(.is-active) .lab-item__text { opacity: 0.22; }
/* 未激活的只压暗、去色，不再缩小：缩到 0.975 后画框左右各缩进 9px，和上面分隔线、激活那件的边线对不齐 */
.lab-item:not(.is-active) .lab-item__media { opacity: 0.32; filter: grayscale(0.85); }

.lab-item__no {
  margin: -2px 0 16px;            /* 编号的顶边和画面上沿齐平 */
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}
.lab-item.is-active .lab-item__no { color: var(--accent); }

/* 文字栏和画面一样高：标题说明在上，标签和链接沉到底 */
.lab-item__text { display: flex; flex-direction: column; }
.lab-item__title {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(34px, 3.8vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--text);
}
.lab-item__desc {
  max-width: 480px;
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-dim);
}
/* 登记表：写法和项目页「项目资料」一样，左小标签、右值，行间细线 */
.lab-item__meta {
  max-width: 480px;
  margin: 2px 0 22px;
  border-top: 1px solid var(--border);
}
.lab-item__meta > div {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.lab-item__meta dt {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.lab-item__meta dd { margin: 0; font-size: 13px; letter-spacing: 0.04em; color: var(--text); }
/* 状态前的小点：已上线实心，内测中空心 */
.lab-item__meta dd.is-live::before,
.lab-item__meta dd.is-beta::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: 1px;
}
.lab-item__meta dd.is-live::before { background: var(--accent); }
.lab-item__meta dd.is-beta::before { box-shadow: inset 0 0 0 1px var(--accent); }
/* 底行：链接在左、技术标签在右，并成一行（一行一个太占高度，左栏会比画面高） */
.lab-item__foot {
  max-width: 480px;               /* 和上面的登记表同宽，右边线对齐 */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
}
.lab-item__tags {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}
.lab-item__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--accent-line);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.lab-item__link i { font-style: normal; color: var(--accent); transition: transform 0.3s var(--ease-inout); }
.lab-item__link:hover { color: var(--accent); border-color: var(--accent); }
.lab-item__link:hover i { transform: translateX(4px); }

/* 画面：铺满右栏的 9:5，不加衬底；外面一道细线，深色画面不至于化进黑底里。
   比例跟着短片走：短片按 1440×800 的窗口录（10-10 本人定——1280 宽录出来页面被压窄，两边内容被切），所以是 9:5 而不是 16:10 */
.lab-item__media {
  position: relative;
  display: block;
  align-self: start;
  aspect-ratio: 9 / 5;
  overflow: hidden;
  border-radius: 2px;
  background: #0b0b0b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.lab-item__img,
.lab-item__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s ease, transform 0.9s var(--ease-inout);
}
.lab-item.is-active .lab-item__media:hover .lab-item__img,
.lab-item.is-active .lab-item__media:hover .lab-item__video { transform: scale(1.02); }

/* 左边栏挂当前编号：滚到实验室时出现，滚到哪件跳到哪个数 */
.lab-counter {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 51;
  width: var(--rail-w, 44px);
  translate: 0 -50%;
  writing-mode: vertical-rl;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--text-faint);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.lab-counter.is-on { opacity: 1; }
.lab-counter b { font-weight: 400; color: var(--accent); }
.lab-counter i { font-style: normal; margin: 6px 0; }

/* 短片叠在封面正上方。只有激活的那件会播（js/lab.js），播起来了才淡入盖住封面；切走时淡出、回到封面 */
.lab-item__video { opacity: 0; pointer-events: none; }
.lab-item__media.is-playing .lab-item__video { opacity: 1; }

/* 入场：区块进视口后整组浮现（growth.js 加 is-in） */
.section--lab .lab-items { opacity: 0; translate: 0 16px; }
.section--lab.is-in .lab-items { opacity: 1; translate: 0 0; transition: opacity 0.6s ease, translate 0.6s var(--ease-inout); }

/* ── 叠卷宗（js/lab.js 加 .is-stack，宽屏手机都开；2026-10-29 本人在「叠卷宗 / 定格画面」两版里定这版）：每件粘在顶栏下面，下一件滑上来整张盖住；
   停在哪由 js 按卡高写 top（卡比屏幕高就等下沿贴到屏幕底再停）；
   卡片用页面底色铺满才盖得住，上沿一道细线 + 向上的阴影，看得出是「压上来的一份」；被盖的那件按 --recede 缩小、变暗 ── */
.lab-items.is-stack .lab-item {
  position: sticky;
  top: 88px;
  background: var(--bg);
  transform-origin: 50% 0;
  transform: scale(calc(1 - var(--recede, 0) * 0.05));
  filter: brightness(calc(1 - var(--recede, 0) * 0.55));
}
.lab-items.is-stack .lab-item + .lab-item {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 -28px 50px -24px rgba(0, 0, 0, 0.85);
}

@media (max-width: 1100px) {
  .lab-item { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
}
@media (max-width: 860px) {
  .lab-item { grid-template-columns: 1fr; padding: 48px 0; row-gap: 18px; }
  .lab-item__no { margin-top: 0; }
  .lab-item__title { margin-top: 0; }
  .lab-counter { display: none; }
  .lab-item__foot { margin-top: 0; }
  /* 手机上不做压暗：一屏只看得到一件，压暗反而像没加载好 */
  .lab-item:not(.is-active) .lab-item__text,
  .lab-item:not(.is-active) .lab-item__media { opacity: 1; filter: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .section--lab .lab-items { opacity: 1; translate: 0 0; transition: none; }
  .lab-item__text, .lab-item__media, .lab-item__img, .lab-item__video { transition: none; }
}