/* ============================================================
   版式层 —— 各屏形态各异，但字号字体一律取自 tokens.css
   本文件不出现 font-size 数值、不出现 font-family
   ============================================================ */

/* ------------------------------------------------------------
   插封 0-1 · Landing
   参考 variant 封面构图：上下 mono 信息框夹住一屏，中央分层——
   幽灵描边字 → 后景漂浮形 → 描边数字 → 主句 → 前景漂浮形，
   各层随鼠标以不同系数视差（JS 只输出 --mx / --my）。
   字号一律取自 tokens，本文件不写死字号。
   ------------------------------------------------------------ */
.cover-open {
  z-index: 1;
  flex-direction: column;
  justify-content: space-between;
  overflow: visible;
  isolation: isolate;
  cursor: crosshair;
}
.cover-open a { cursor: pointer; }

/* ---------- 上下 meta 信息框 ---------- */
.cover-meta {
  position: relative;
  z-index: 10;
  display: grid;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}
.cover-meta--top { grid-template-columns: repeat(3, 1fr); }
.cover-meta--bottom { grid-template-columns: 1fr auto auto; }

.cover-meta__cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* 漂浮形可能压到信息框：黑底上加一圈暗色光晕，
   纯黑背景上不可见，落在浅色有机形上才显形，保住小字可读性 */
.cover-meta {
  text-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.9);
}
.cover-meta__cell--center { text-align: center; align-items: center; }
.cover-meta__cell--end { text-align: right; align-items: flex-end; }
.cover-meta--bottom .cover-meta__cell--end { grid-column: -1; }

.cover-meta__active {
  color: var(--accent-cover);
  font-weight: var(--w-black);
}

.cover-meta__badge {
  width: fit-content;
  max-width: 100%;
  padding: 0.2rem 0.45rem;
  color: #000;
  background: var(--muted);
  line-height: 1.5;
  white-space: normal;
  text-shadow: none;
}

/* 链接：参考页的下划线扫入效果 */
.cover-meta a {
  position: relative;
  display: inline-block;
  width: fit-content;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.cover-meta a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: var(--rule);
  background: var(--accent-cover);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease-out);
}
.cover-meta a:hover { color: var(--fg); }
.cover-meta a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 中央画布与分层 ---------- */
.cover-open__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: auto;
}

/* 幽灵描边字：最大、最淡，反向轻微视差 */
.cover-open__ghost {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
  text-transform: uppercase;
  font-size: var(--fs-cover-ghost);
  font-weight: var(--w-black);
  line-height: 0.92;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
  transform: translate(calc(var(--mx, 0px) * -0.02), calc(var(--my, 0px) * -0.02));
}

/* 描边数字：居中压在主句后方 */
.cover-open__number {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  white-space: nowrap;
  font-size: var(--fs-cover-number);
  font-weight: var(--w-black);
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(229, 228, 226, 0.5);
  transform: translate(-50%, -50%)
             translate(calc(var(--mx, 0px) * 0.012), calc(var(--my, 0px) * 0.012));
}

/* 主句：金属渐变沿用全站主句样式，这层做正向视差 */
.cover-open__type {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(calc(var(--mx, 0px) * 0.03), calc(var(--my, 0px) * 0.03));
}
.cover-open__body {
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
}
/* 两行错位：首行偏左、次行偏右，形成参考页的斜线张力 */
.cover-open__line--a { margin-right: clamp(1.5rem, 11vw, 10rem); }
.cover-open__line--b { margin-left: clamp(1rem, 7vw, 6rem); }

/* ---------- 漂浮有机形（封面系共用：cover-open / cover-boundary） ---------- */
.cover-open__shapes,
.cover-boundary__shapes {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.cover-open__shapes[data-cover-layer="front"],
.cover-boundary__shapes[data-cover-layer="front"] { z-index: 5; }

/* 插封 2 的有机形比首屏小一档，压过正文 */
.cover-boundary__shapes .cover-blob {
  width: clamp(2.25rem, 4.5vw, 5.25rem);
  opacity: 0.7;
}

/* 插封 2：页面专用色 * 星标（替代有机花朵），沿用同一套漂浮/视差外壳 */
.cover-star {
  display: block;
  font-weight: var(--w-black);
  font-size: clamp(3.2rem, 7.5vw, 7.5rem);
  line-height: 1;
  user-select: none;
}

.cover-blob__wrap { position: absolute; }
.cover-blob {
  display: block;
  width: clamp(2.75rem, 5.6vw, 7rem);
  height: auto;
  fill: var(--accent-cover);
  opacity: 0.8;
}

@keyframes cover-blob-in {
  from { opacity: 0; }
  to { opacity: 0.8; }
}
@keyframes cover-star-in {
  from { opacity: 0; }
  to { opacity: 0.9; }
}
@keyframes cover-float-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(10px, -15px) rotate(5deg); }
}
@keyframes cover-float-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(-15px, 10px) rotate(-8deg) scale(1.05); }
}
@keyframes cover-float-3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(8px, 20px) rotate(12deg); }
}

/* ------------------------------------------------------------
   插封 0-2 · 身份档案
   底子沿用 Undertone // Archive Slider：流动渐变背景铺满全屏，
   上下框架线夹住五栏。五栏由「悬停展开」改为常显档案表
   （2026-09-13）：栏名 → 锚点大字 → 两行事实，悬停只轻微提亮。
   文字保留主题荧光绿（用户要求），栏下半压暗角保小字对比度。
   ------------------------------------------------------------ */
.cover-id {
  --cover-id-accent: #ABBE1D;
  z-index: 1;
  padding: 0; /* 框架贴满视口边，覆盖 .screen 的 gutter */
  overflow: hidden;
}
/* WebGL 不可用时的静态渐变兜底（灰银系，明度随主版同步压暗） */
.cover-id.is-bg-fallback {
  background:
    radial-gradient(120% 90% at 20% 15%, #4a4a4f 0%, transparent 55%),
    radial-gradient(100% 80% at 80% 80%, #0d0d0f 0%, transparent 60%),
    linear-gradient(135deg, #8f8f94 0%, #37373c 50%, #5f5f64 100%);
}
.cover-id__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
/* 顶部纯黑渐变（2026-09-06）：雾气画布满屏出画时会跟前页的纯黑底
   硬碰硬，顶部压一条同色渐变把衔接做软；压在画布上、框架文字下 */
.cover-id::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 14vh;
  pointer-events: auto;
}
.cover-id::before {
  top: 0;
  background: linear-gradient(to bottom, #000 0%, transparent 100%);
}
/* 底部向下一张黑底页面过渡：从归档区下方开始逐渐压暗，底部落到纯黑。 */
.cover-id::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 24vh;
  pointer-events: none;
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.86) 42%, transparent 100%);
}
.cover-id__frame {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 不写 height:100%——父级 .screen 只有 min-height，百分比会失效
     导致整个 frame 塌缩成内容高度；交给 flex 默认的 stretch 拉满 */
  flex: 1;
  min-height: 0;
}

/* ---------- 顶部 / 底部框架线：姓名 · 档案标注 / 邮箱 · 城市 ---------- */
.cover-id__top,
.cover-id__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 24px var(--gutter) 16px;
  color: var(--cover-id-accent);
}
.cover-id__bottom { padding: 16px var(--gutter) 24px; }

.cover-id__name {
  font-size: var(--fs-body);
  font-weight: var(--w-black);
  letter-spacing: 0.04em;
}
.cover-id__name .mono {
  margin-left: 0.8rem;
  color: inherit;
  opacity: 0.65;
}
.cover-id__meta { color: inherit; opacity: 0.8; }

.cover-id__mail {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.cover-id__mail a {
  color: inherit;
  font-size: var(--fs-body);
  text-decoration: none;
}

/* ---------- 五栏档案表 ---------- */
.cover-id__slider {
  flex: 0 0 auto;
  margin-block: auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.32);
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  /* 文字落在栏的下半：自上而下压一层暗角，雾气亮处也保住荧光绿小字的对比度 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.42) 100%);
}
.cover-id__col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  min-height: 42vh;
  padding: 26px 24px 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.32);
  color: var(--cover-id-accent);
  transition: background-color 0.4s ease;
}
.cover-id__col:last-child { border-right: none; }
@media (hover: hover) {
  .cover-id__col:hover { background-color: rgba(255, 255, 255, 0.045); }
}

.cover-id__label {
  display: flex;
  gap: 0.8rem;
  color: inherit;
  opacity: 0.85;
}
.cover-id__label span { opacity: 0.6; }

.cover-id__value {
  margin-top: auto;
  font-size: var(--fs-lead);
  font-weight: var(--w-black);
  line-height: 1.25;
  letter-spacing: 0.01em;
}
.cover-id__value::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 16px;
  background: currentColor;
}

.cover-id__facts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-meta);
  line-height: 1.7;
}

/* 复制邮箱：档案屏底栏与收尾屏共用的描边胶囊 */
.cover-id__copy,
.cover-end__copy {
  flex: none;
  padding: 0.2rem 0.7rem;
  border: var(--rule) solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  line-height: 1.6;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.25s ease;
}
.cover-id__copy:hover,
.cover-end__copy:hover,
.cover-id__copy.is-done,
.cover-end__copy.is-done { opacity: 1; }
.cover-id__copy:focus-visible,
.cover-end__copy:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* 手机：五栏转五行，左栏名、右锚点与事实，一屏读完 */
@media (max-width: 768px) {
  .cover-id__top, .cover-id__bottom { padding-left: 16px; padding-right: 16px; flex-wrap: wrap; }
  .cover-id__slider { grid-template-columns: 1fr; }
  .cover-id__col {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 2px 12px;
    min-height: 0;
    padding: 14px 16px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }
  .cover-id__col:last-child { border-bottom: none; }
  .cover-id__label { grid-row: 1 / 3; flex-direction: column; gap: 2px; }
  .cover-id__value { margin-top: 0; font-size: var(--fs-body); }
  .cover-id__value::after { display: none; }
  .cover-id__facts { gap: 0; line-height: 1.6; }
}

/* ------------------------------------------------------------
   插封 0-3 · 环境设计训练…
   原始布局：左栏文字，右侧 3D 画布。
   ------------------------------------------------------------ */
.cover-note {
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(19rem, 38vw);
  overflow: hidden;
}
.cover-note__text {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 8vh;
  min-width: 0;
}
.cover-note__body {
  position: relative;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}

/* 大标题：粗字重、紧行高、手动分行 */
.cover-note__title {
  font-size: var(--fs-title);
  font-weight: var(--w-bold);
  line-height: 1.25;
  letter-spacing: var(--ls-display);
  color: var(--fg);
}
.cover-note__title .line { display: block; }
.cover-note__title .ch {
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.9);
  transition: color 0.4s linear;
}
.cover-note__title .ch.is-lit { color: var(--fg); }

/* 中宽屏标题降半档防折行 */
@media (max-width: 1500px) {
  .cover-note__title { font-size: var(--fs-lead); }
}

/* 塔画布：铺满整页，3D 地网延伸到文字栏下方；
   塔身在固定相机取景下由 view offset 保持在右侧 */
.cover-note__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: default;
  overflow: hidden;
}
.cover-note__stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}
.cover-note__stage.is-ready canvas { opacity: 1; }
.cover-note__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}
.cover-note__stage.is-fallback img { opacity: 1; }
.dao-tag {
  position: absolute;
  right: 1rem;
  bottom: 0.8rem;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cover-note__stage canvas { transition: none; }
}

@media (max-width: 780px) {
  .cover-note__title .line { white-space: normal; }
}

/* ------------------------------------------------------------
   作品块 · 纯图像流，无标注
   三种版式按内容形态分配：
     full  场景照，容器裁切 + 内部位移视差
     whole 设计稿，完整显示不裁切，进场缩放
     inset 限宽居中，图本身带黑边或需读清细节
   ------------------------------------------------------------ */
/* 与 .screen 同样的左右留白：所有 plate 都落在同一条 --gutter 内容线上。
   不用负 margin 突破留白，也不让 inset / paper 额外限宽制造第二条内容线。 */
.work {
  position: relative;
  z-index: 1;
  background: var(--bg);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.plate { position: relative; overflow: hidden; }
.plate + .plate { margin-top: var(--stack); }

/* 两层：inner 负责进场（透明度＋缩放），media 负责视差（位移）。
   同一元素上跑两个 transform 动画会互相覆盖，必须分层。 */
.plate__inner { opacity: 0; }

/* 媒体默认：满宽、等比。
   aspect-ratio 是兜底占位——video 在挂上 src 前没有内在尺寸，高度会塌成 0，
   连带页面总高与 ScrollTrigger 的触发点全部算错。
   HTML 上的 width/height 属性是主力，这里再保一道。 */
.plate__media {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* 手动视频：保留声音与原始画面，按钮只承担播放／暂停，不暴露进度条。 */
.plate--manual-video .plate__inner { position: relative; }

.manual-video__toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(2.75rem, 4vw, 3.5rem);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.62);
  cursor: pointer;
  transform: translate(-50%, -50%);
  overflow: visible;
  z-index: 3;
  transition: background-color 0.25s var(--ease-out), opacity 0.2s var(--ease-out);
}

.manual-video__toggle:hover { background: rgba(0, 0, 0, 0.88); }
.manual-video__toggle:active { transform: translate(-50%, -50%) scale(0.94); }
.manual-video__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.manual-video__toggle.is-playing {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s, 0.8s;
}

.plate--manual-video .effect {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(2.75rem, 4vw, 3.5rem);
  aspect-ratio: 1;
  opacity: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) translate3d(0, 0, 0.01px);
  z-index: 1;
}

.plate--manual-video .effect.filter {
  filter: blur(7px) contrast(100) blur(0);
  mix-blend-mode: lighten;
}

.plate--manual-video .effect.filter::before {
  content: '';
  position: absolute;
  inset: -75px;
  z-index: -2;
  background: black;
}

.plate--manual-video .effect.filter::after {
  content: '';
  position: absolute;
  inset: 0;
  background: white;
  transform: scale(0);
  opacity: 0;
  z-index: -1;
  border-radius: 100vw;
}

.plate--manual-video .effect.active::after { animation: pill 0.3s ease both; }

@keyframes pill {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.manual-video__particles .particle,
.manual-video__particles .point {
  display: block;
  opacity: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform-origin: center;
}

.manual-video__particles .particle {
  --time: 5s;
  position: absolute;
  top: calc(50% - 8px);
  left: calc(50% - 8px);
  animation: particle calc(var(--time)) ease 1 -350ms;
}

.manual-video__particles .point {
  background: var(--color);
  opacity: 1;
  animation: point calc(var(--time)) ease 1 -350ms;
}

@keyframes particle {
  0% {
    transform: rotate(0deg) translate(calc(var(--start-x)), calc(var(--start-y)));
    opacity: 1;
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }

  70% {
    transform: rotate(calc(var(--rotate) * 0.5)) translate(calc(var(--end-x) * 1.2), calc(var(--end-y) * 1.2));
    opacity: 1;
    animation-timing-function: ease;
  }

  85% {
    transform: rotate(calc(var(--rotate) * 0.66)) translate(calc(var(--end-x)), calc(var(--end-y)));
    opacity: 1;
  }

  100% {
    transform: rotate(calc(var(--rotate) * 1.2)) translate(calc(var(--end-x) * 0.5), calc(var(--end-y) * 0.5));
    opacity: 1;
  }
}

@keyframes point {
  0% {
    transform: scale(0);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }

  25% { transform: scale(calc(var(--scale) * 0.25)); }
  38% { opacity: 1; }

  65% {
    transform: scale(var(--scale));
    opacity: 1;
    animation-timing-function: ease;
  }

  85% {
    transform: scale(var(--scale));
    opacity: 1;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.manual-video__icon {
  position: relative;
  z-index: 3;
  width: 42%;
  height: 42%;
  fill: currentColor;
}

.manual-video__icon--pause,
.manual-video__toggle.is-playing .manual-video__icon--play { display: none; }
.manual-video__toggle.is-playing .manual-video__icon--pause { display: block; }

/* full —— 满屏高度，左右对齐内容线；媒体超出容器上下，随滚动位移 */
.plate--full {
  height: 100vh;
  height: 100dvh;
}
.plate--full .plate__inner { position: absolute; inset: 0; }
.plate--full .plate__media {
  position: absolute;
  top: -20%;
  left: 0;
  height: 140%;
  aspect-ratio: auto;   /* 由容器定高，不再等比 */
  object-fit: cover;
}

/* whole —— 设计稿完整显示，一个像素都不裁 */

/* inset —— 内容线内完整显示 */
.plate--inset {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* paper —— 白底素材浮在黑底上，避免整屏闪白 */
.plate--paper {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 2.5rem 6rem rgba(0, 0, 0, 0.85);
}

/* quad —— 同类特写收拢成 2×2 一屏（亘古 02–05）。
   细缝沿用 Car 画幅册的 15px；视差作用在整块 plate 上（main.js 3b），不拆格。 */
.plate--quad .plate__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

/* 作品块首尾的呼吸 */
.work__lead-in { height: 12vh; }
.work__lead-out { height: 22vh; }

/* 三段调序后（2026-09-13）Car 之后接插封 3、动次打次之前是插封 3，
   两处原先为「车 → 动次打次」收紧的留白恢复默认值。 */
.work--vedio .plate--whole {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.work--vedio .plate--manual-video { max-width: none; }

@media (max-width: 640px) {
  .plate--full { height: 72vh; }
  /* 手机 2×2 太小看不清特写：改单列，四张合计仍约一屏 */
  .plate--quad .plate__inner { grid-template-columns: 1fr; gap: 8px; }

  /* 首屏：徽章保留在底栏右侧，错位幅度收窄防止主句被画布裁切 */
  .cover-meta--top { gap: 0.75rem; }
  /* 手机上顶栏只留姓名与状态，位置信息窄屏放不下且最不重要 */
  .cover-meta--top { grid-template-columns: auto auto; justify-content: space-between; }
  .cover-meta--top .cover-meta__cell:nth-child(2) { display: none; }
  /* 第三屏：左文右模改为上下堆叠，模型占下半屏 */
  .cover-note {
    grid-template-columns: 1fr;
    grid-template-rows: auto 52vh;
    gap: 2.5rem;
  }
  /* 手机上画布回到网格流：文字在上、塔（含地网）占下半屏；
     竖画布取景自动回中（dao-viewer.js 按宽高比判断） */
  .cover-note__stage {
    position: relative;
    inset: auto;
  }
  .cover-meta--bottom {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
  .cover-meta__badge { white-space: normal; }
  .cover-open__line--a { margin-right: clamp(0.75rem, 5vw, 1.5rem); }
  .cover-open__line--b { margin-left: clamp(0.5rem, 3.5vw, 1.25rem); }
}

/* ------------------------------------------------------------
   插封 1 · 我为什么这么做
   参考 variant.com「Figment | AI Creative Canvas」的构图与卡面，
   页色按用户要求降饱和转淡黄（2026-09-06）：奶油黄底 + 淡金网格 +
   陶土红主句；八张实心色块卡（绿/橙/黑/浅）配平面撞色插画，
   卡面无文字。屏间衔接走全站统一的离场漂移，无专属转场。
   字号仍全部来自 tokens。
   ------------------------------------------------------------ */
.cover-why {
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  /* 盖住全局直网格 .grid-bg，本页用自己的扰动网格。
     底色取「暖象牙/杏粉」：上承 RxT 黑底（顶部黑渐变），
     下接 Dream 白色美术馆——其墙平均色 #decbc3（杏粉象牙），
     旧版黄奶油 #f4ecc9 偏黄、与杏粉 Dream 不同相，滚动有色跳；
     改到同相暖色（#f4e8df，hue≈22°）后，下页象牙滑盖近乎顺色。
     亦更贴合参考 variant Figment 的「粉底」原色。 */
  background: #f4e8df;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* 主句换陶土红（参考页 h1 用 --c-brand，此处降饱和取陶土调） */
.cover-why .talk { color: #d05b3d; }

/* 四角 registration 十字 + 网格交点加号：蓝图定位件，点陶土红 */
.cover-why__corners {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.cover-why__corner {
  position: absolute;
  width: 11px;
  height: 11px;
}
.cover-why__corner::before,
.cover-why__corner::after {
  content: "";
  position: absolute;
  background: rgba(208, 91, 61, 0.5);
}
.cover-why__corner::before { left: 5px; top: 0; width: 1px; height: 11px; }
.cover-why__corner::after { left: 0; top: 5px; width: 11px; height: 1px; }
.cover-why__corner--tl { top: calc(var(--gutter) - 2px); left: calc(var(--gutter) - 2px); }
.cover-why__corner--tr { top: calc(var(--gutter) - 2px); right: calc(var(--gutter) - 2px); }
.cover-why__corner--bl { bottom: calc(var(--gutter) - 2px); left: calc(var(--gutter) - 2px); }
.cover-why__corner--br { bottom: calc(var(--gutter) - 2px); right: calc(var(--gutter) - 2px); }
.cover-why__plus {
  position: absolute;
  width: 9px;
  height: 9px;
}
.cover-why__plus::before,
.cover-why__plus::after {
  content: "";
  position: absolute;
  background: rgba(208, 91, 61, 0.32);
}
.cover-why__plus::before { left: 4px; top: 0; width: 1px; height: 9px; }
.cover-why__plus::after { left: 0; top: 4px; width: 9px; height: 1px; }

/* 扰动网格：SVG 湍流置换（#why-warp）把直线扭成手绘抖线，缓慢呼吸。
   放大 140% 是给置换位移和呼吸缩放留出溢出量，裁在 section 内 */
.cover-why__grid {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(#e5d1c3 var(--rule), transparent var(--rule)),
    linear-gradient(90deg, #e5d1c3 var(--rule), transparent var(--rule));
  background-size: clamp(80px, 8vw, 140px) clamp(80px, 8vw, 140px);
  background-position: center center;
  filter: url(#why-warp);
  opacity: 0.7;
  animation: why-breathe 20s ease-in-out infinite alternate;
}
@keyframes why-breathe {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.05) translate(-1%, -1%); }
}

/* 环绕卡片：0×0 容器居中，八卡按椭圆（rx 400 / ry 270）落位、各自倾角；
   起伏 bob 走 margin（不占 transform），悬停摆正放大（同参考页）。
   卡面实心色块轮换（同参考绿/橙/黑/浅），插画撞色、无文字标注 */
.cover-why__orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
}
.cover-why__card {
  position: absolute;
  width: 160px;
  height: 100px;
  margin: -50px 0 0 -80px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cover-why__card svg { display: block; width: 100%; height: 100%; }

.cover-why__card--1 { transform: translate(0, -270px) rotate(-10deg);    background: #1b7f4e; animation: why-float 6s ease-in-out infinite alternate; }
.cover-why__card--2 { transform: translate(283px, -191px) rotate(15deg); background: #f46927; animation: why-float 7s ease-in-out infinite alternate-reverse; }
.cover-why__card--3 { transform: translate(400px, 0) rotate(-5deg);      background: #0e0e0e; animation: why-float 5s ease-in-out infinite alternate; }
.cover-why__card--4 { transform: translate(283px, 191px) rotate(20deg);  background: #f46927; animation: why-float 8s ease-in-out infinite alternate-reverse; }
.cover-why__card--5 { transform: translate(0, 270px) rotate(-15deg);     background: #f2f2f2; animation: why-float 6s ease-in-out infinite alternate; }
.cover-why__card--6 { transform: translate(-283px, 191px) rotate(10deg); background: #f2f2f2; animation: why-float 7s ease-in-out infinite alternate-reverse; }
.cover-why__card--7 { transform: translate(-400px, 0) rotate(-20deg);    background: #f2f2f2; animation: why-float 5s ease-in-out infinite alternate; }
.cover-why__card--8 { transform: translate(-283px, -191px) rotate(5deg); background: #0e0e0e; animation: why-float 8s ease-in-out infinite alternate-reverse; }

.cover-why__card--1:hover { transform: translate(0, -270px) rotate(0deg) scale(1.15); }
.cover-why__card--2:hover { transform: translate(283px, -191px) rotate(0deg) scale(1.15); }
.cover-why__card--3:hover { transform: translate(400px, 0) rotate(0deg) scale(1.15); }
.cover-why__card--4:hover { transform: translate(283px, 191px) rotate(0deg) scale(1.15); }
.cover-why__card--5:hover { transform: translate(0, 270px) rotate(0deg) scale(1.15); }
.cover-why__card--6:hover { transform: translate(-283px, 191px) rotate(0deg) scale(1.15); }
.cover-why__card--7:hover { transform: translate(-400px, 0) rotate(0deg) scale(1.15); }
.cover-why__card--8:hover { transform: translate(-283px, -191px) rotate(0deg) scale(1.15); }

@keyframes why-float {
  0% { margin-top: -50px; }
  100% { margin-top: -66px; }
}

.cover-why__body {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter);
}

/* 标题字符由 JS 按滚动阅读顺序切换；不改变字号、字体或行距。
   指针邻近反馈只通过变量叠加，避免覆盖滚动填色。 */
.cover-why__char {
  display: inline-block;
  color: rgba(208, 91, 61, 0.36);
  transform: translateY(calc(var(--why-char-y, 0) * 1px))
    scale(var(--why-char-scale, 1));
  filter: brightness(var(--why-char-brightness, 1))
    drop-shadow(0 0 calc(var(--why-char-glow, 0) * 1px) rgba(208, 91, 61, 0.28));
  transition: transform 140ms ease-out, filter 180ms ease-out;
  will-change: transform, filter;
}
.cover-why__char.is-filled { color: #d05b3d; }

/* 指针只让背景网格在当前位置出现轻微局部变形；内容层保持稳定。 */
.cover-why__grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  filter: inherit;
  pointer-events: none;
  opacity: 0;
  mask-image: radial-gradient(circle at var(--why-grid-x, 50%) var(--why-grid-y, 50%), #000 0 18%, transparent 54%);
  -webkit-mask-image: radial-gradient(circle at var(--why-grid-x, 50%) var(--why-grid-y, 50%), #000 0 18%, transparent 54%);
  transform: scale(1.06);
  transform-origin: var(--why-grid-x, 50%) var(--why-grid-y, 50%);
  transition: opacity 0.22s ease-out;
}
.cover-why__grid.is-pointer-active::after {
  opacity: 0.55;
  transition-duration: 0s;
}

/* 窄屏：环绕整体缩放（同参考页断点策略），主句居中不变。 */
@media (max-width: 900px) {
  .cover-why__orbit { transform: scale(0.7); }
}
@media (max-width: 640px) {
  .cover-why__orbit { transform: scale(0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .cover-why__grid { animation: none; }
  .cover-why__card { animation: none; }
  .cover-why__grid::after { display: none; }
  .cover-why__char,
  .cover-why__char.is-filled { color: #d05b3d; }
  .cover-why__char {
    transform: none;
    filter: none;
    transition: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .cover-why__grid::after { display: none; }
}

/* ------------------------------------------------------------
   插封 2 · AI 的边界
   参考 PACT 的黑底网格与金属轮廓，但字号仍全部来自 tokens。
   ------------------------------------------------------------ */
.cover-boundary {
  --boundary-accent: #ABBE1D;
  --boundary-accent-rgb: 171, 190, 29;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
  /* 中心构图：文字整块居中，与左落的插封 3 区分 */
  justify-content: center;
  text-align: center;
}

.cover-boundary .cover-star {
  color: var(--boundary-accent);
  text-shadow:
    0 0 18px rgba(var(--boundary-accent-rgb), 0.6),
    0 0 60px rgba(var(--boundary-accent-rgb), 0.3);
}

.cover-boundary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.055) var(--rule), transparent var(--rule)),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.055) var(--rule), transparent var(--rule));
  background-size: clamp(4rem, 8vw, 8.75rem) clamp(4rem, 8vw, 8.75rem);
  opacity: 0.42;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 80%, transparent);
}

.cover-boundary::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 12%;
  right: -8%;
  width: min(54vw, 44rem);
  aspect-ratio: 1;
  border: var(--rule) solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.025), 0 0 8rem rgba(255, 255, 255, 0.08);
  opacity: 0.7;
  transform: rotate(-12deg) scale(1.08);
}

.cover-boundary__index {
  position: absolute;
  top: 8%;
  right: var(--gutter);
  z-index: 0;
  font-weight: var(--w-black);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: transparent;
  -webkit-text-stroke: var(--rule) rgba(255, 255, 255, 0.16);
  opacity: 0.7;
  pointer-events: none;
}

/* 后层有机形压在背景上、正文下（首屏那套 z2 是给居中大字用的） */
.cover-boundary__shapes { z-index: 0; }

.cover-boundary__body {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(100%, 62rem);
  min-width: 0;
  margin-inline: auto;
}

.cover-boundary__statement {
  margin-top: clamp(1.5rem, 4vh, 3.5rem);
  margin-inline: auto;
  max-width: min(100%, 58rem);
}

.cover-boundary__notes {
  display: grid;
  gap: clamp(1.25rem, 3vh, 2.5rem);
  max-width: min(100%, 57rem);
  margin-top: clamp(2.25rem, 7vh, 6rem);
  margin-inline: auto;
}

.cover-boundary__notes .line { display: block; }

/* 滚动点亮：默认整行白描边，随滚动从左往右填充亮起。
   --fill 由 main.js 按屏内行程逐行错峰写入。 */
.cover-boundary__statement .line,
.cover-boundary__notes .line {
  --fill: 0%;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
  background: linear-gradient(90deg,
    #f4f4f2 calc(var(--fill) - 8px),
    rgba(244, 244, 242, 0) var(--fill));
  -webkit-background-clip: text;
  background-clip: text;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .cover-boundary__statement .line,
  .cover-boundary__notes .line {
    color: #e8e8e8;
    -webkit-text-stroke: 0;
    background: none;
  }
}

/* ------------------------------------------------------------
   插封 3 · 我怎么做
   参考 davidecattaneo.it ABOUT：暗场曲线串节点（main.js 绘制），
   标题居上左，节点图铺满全屏，与插封 2 的中心构图区分。
   ------------------------------------------------------------ */
.cover-process {
  z-index: 1;
  align-items: flex-start;
  overflow: hidden;
  padding-top: clamp(12rem, 22vh, 18rem);
}

.cover-process__body {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(100%, 72rem);
  min-width: 0;
}

.cover-process__title { margin-top: clamp(2rem, 6vh, 5rem); }

/* 环绕有机形：与封面系同一套漂浮/视差机制（data-cover-shapes）。
   小一档、降不透明度——曲线与节点标注才是这屏的主角。 */
.cover-process__shapes {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.cover-process__shapes[data-cover-layer="front"] { z-index: 5; }
.cover-process__shapes .cover-blob {
  width: clamp(2.25rem, 4.5vw, 5.25rem);
  opacity: 0.6;
  fill: #ffffff; /* 这屏装饰用白色，荧光黄绿只留给曲线本身 */
}

.cover-process__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.cover-process__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 节点标注：外层定位（JS 按画布坐标写 left/top/transform），
   内层 .cover-process__label-in 负责随画线进度浮入，两不打架。 */
.cover-process__label {
  position: absolute;
  z-index: 1;
  white-space: nowrap;
  /* 画布上的节点标注比常规 mono 大一号，否则在整屏黑底里太弱 */
  font-size: var(--fs-body);
}

.cover-process__label-in {
  display: inline-block;
  color: #a6a6a2;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.55s var(--ease-out),
    color 0.55s var(--ease-out);
}

.cover-process__label.is-on .cover-process__label-in {
  opacity: 1;
  transform: translateY(0);
}
.cover-process__label.is-accent.is-on .cover-process__label-in { color: var(--fg); }

.cover-process__label i {
  font-style: normal;
  margin-right: 0.6em;
  color: #6c6c68;
  transition: color 0.55s var(--ease-out);
}

.cover-process__label.is-accent.is-on i { color: var(--accent-cover); }

.cover-process__count {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(3.5rem, 9vh, 7rem);
  color: var(--dim);
}

@media (max-width: 640px) {
  .cover-boundary {
    /* 移动端同样居中，只留少量底部呼吸 */
    padding-bottom: clamp(3rem, 8vh, 5rem);
  }

  .cover-boundary::after {
    top: 8%;
    right: -46%;
    width: 120vw;
  }

  .cover-boundary__index {
    top: 7%;
    right: var(--gutter);
  }

  .cover-boundary__notes { margin-top: 2rem; }

  /* 窄屏文字密，前景有机形也压回文字下方，保住可读性 */
  .cover-boundary__shapes[data-cover-layer="front"] { z-index: 0; }

  .cover-process {
    padding-top: 18vh;
    padding-bottom: 18vh;
  }

  .cover-process__title { margin-top: 2.5rem; }
  .cover-process__count { right: var(--gutter); bottom: 2.5rem; }

  /* 窄屏前景有机形压回曲线下方，保住标注可读性 */
  .cover-process__shapes[data-cover-layer="front"] { z-index: 0; }
}

/* 亘古沿用通用 plate */

/* 亘古后续素材（05-14）沿用通用 plate */
.work--gugu .plate__inner { opacity: 1; }

/* cover-note pin 时需不透明底盖住 pin-spacer 后的 RxT；
   参考档案屏的冷灰雾感，但整体压暗一档，保住白描边文字的对比度。 */
.cover-note {
  isolation: isolate;
  background:
    radial-gradient(85% 75% at 15% 58%, rgba(99, 101, 108, 0.16) 0%, rgba(56, 58, 64, 0.08) 38%, transparent 72%),
    radial-gradient(70% 82% at 70% 47%, rgba(91, 93, 100, 0.14) 0%, transparent 70%),
    radial-gradient(65% 58% at 100% 84%, rgba(71, 73, 80, 0.1) 0%, transparent 76%),
    linear-gradient(135deg, #25262b 0%, #1e1f23 45%, #18191d 100%);
}

.cover-note__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------
   Dream · 入口、转场和磁带舞台
   舞台满屏出血（见 .work--dream 的 padding 归零）；各层只改变
   可见性，不改变尺寸。
   ------------------------------------------------------------ */
.work--dream {
  overflow: clip;
  position: relative;
  z-index: 2;
  /* 磁带舞台满屏出血：Dream 是沉浸式全屏页（同插封），不用 .work 的
     --gutter 左右留白。白色场景视频压在黑边距上会把黑框「读」成页边距
     （其他作品画面深、黑边距与黑底融在一起看不出来） */
  padding-left: 0;
  padding-right: 0;
}

/* 磁带页与下一页之间不留大空隙（2026-09-06）：收窄 Dream 的离场留白 */
.work--dream .work__lead-out { height: 8vh; }

.dream {
  position: relative;
  /* 磁带已不随滚动横移（2026-09-06）：本页收回正好一屏，
     滚动是普通的页面滚动，下一页自然紧跟，不再撑出长钉屏 */
  min-height: 100vh;
  min-height: 100dvh;
}

.dream__viewport {
  position: sticky;
  top: 0;
  /* 让出底部作品黑条，锁屏满屏时构图完整不被遮（2026-09-13） */
  height: calc(100vh - var(--work-bar-h));
  height: calc(100dvh - var(--work-bar-h));
  min-height: 22rem;
  overflow: hidden;
  isolation: isolate;
  background: #050505;
}

.dream__stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #050505;
  touch-action: pan-y;
}

.dream__entry,
.dream__intro,
.dream__reel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s var(--ease-inout), visibility 0s linear 0.7s;
}

.dream__entry {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition-delay: 0s;
}

.dream__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050505;
}

/* 入口（01 白纸场景）与推镜（02）满屏铺满：16:9 视频在 16:10/竖屏上
   只做边缘小幅裁切（画面主体居中），白色内容不再浮在黑框里，
   白纸盖屏转场的落定态才是真正的满屏白纸。
   磁带帧（.dream__window 内）保持 contain——窗口本身即 16:9，无黑边 */
.dream__media--entry,
.dream__media--intro {
  object-fit: cover;
}

/* 支持状态机使用 data 状态或语义化状态类。 */
.dream[data-dream-state="intro-02"] .dream__entry,
.dream.is-intro .dream__entry,
.dream[data-dream-state="reel-03"] .dream__entry,
.dream[data-dream-state="reel-04"] .dream__entry,
.dream[data-dream-state="reel-05"] .dream__entry,
.dream[data-dream-state="reel-06"] .dream__entry,
.dream.is-reel .dream__entry {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.dream[data-dream-state="intro-02"] .dream__intro,
.dream.is-intro .dream__intro {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.dream[data-dream-state="reel-03"] .dream__reel,
.dream[data-dream-state="reel-04"] .dream__reel,
.dream[data-dream-state="reel-05"] .dream__reel,
.dream[data-dream-state="reel-06"] .dream__reel,
.dream.is-reel .dream__reel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.dream.is-transitioning .dream__entry,
.dream.is-transitioning .dream__intro,
.dream.is-transitioning .dream__reel,
.dream[data-dream-transition="active"] .dream__entry,
.dream[data-dream-transition="active"] .dream__intro,
.dream[data-dream-transition="active"] .dream__reel {
  transition-duration: 0.9s;
}

.dream__reel {
  display: block;
  isolation: isolate;
  background:
    radial-gradient(ellipse 62% 55% at 20% 18%, rgba(184, 168, 255, 0.2) 0%, transparent 65%),
    radial-gradient(ellipse 52% 42% at 78% 78%, rgba(255, 196, 135, 0.16) 0%, transparent 66%),
    linear-gradient(135deg, #1a1530 0%, #0d0a1f 100%);
}

/* 磁带舞台的星点与光晕只属于 reel 状态，画面沿横轨连续移动。 */
.dream__reel::before,
.dream__reel::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.dream__reel::before {
  background:
    radial-gradient(circle at 8% 16%, rgba(255, 250, 240, 0.5) 0 0.06rem, transparent 0.12rem),
    radial-gradient(circle at 24% 72%, rgba(255, 250, 240, 0.34) 0 0.05rem, transparent 0.11rem),
    radial-gradient(circle at 43% 22%, rgba(255, 250, 240, 0.42) 0 0.06rem, transparent 0.12rem),
    radial-gradient(circle at 61% 84%, rgba(255, 250, 240, 0.28) 0 0.05rem, transparent 0.1rem),
    radial-gradient(circle at 78% 18%, rgba(255, 250, 240, 0.4) 0 0.06rem, transparent 0.12rem),
    radial-gradient(circle at 92% 62%, rgba(255, 250, 240, 0.3) 0 0.05rem, transparent 0.1rem),
    radial-gradient(ellipse 35% 28% at 70% 20%, rgba(255, 212, 224, 0.12), transparent 72%);
  opacity: 0.72;
  animation: dream-reel-atmosphere 26s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.dream__reel::after {
  inset: -14%;
  background:
    radial-gradient(ellipse 34% 24% at 30% 30%, rgba(184, 168, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 28% 26% at 72% 72%, rgba(255, 196, 135, 0.14), transparent 70%),
    radial-gradient(ellipse 24% 22% at 56% 46%, rgba(255, 212, 224, 0.1), transparent 72%);
  filter: blur(1.5rem);
  opacity: 0.58;
  mix-blend-mode: screen;
  animation: dream-reel-glow 30s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.dream.is-in-view.is-reel .dream__reel::before,
.dream.is-in-view.is-reel .dream__reel::after {
  animation-play-state: running;
  will-change: transform, opacity;
}

.dream__reel-track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-self: start;
  width: max-content;
  height: 100%;
  gap: 0;
  transform: translate3d(0, 0, 0);
  /* 轨道只由点击月亮驱动（滚动已不参与），位移走平滑过渡 */
  transition: transform 0.9s var(--ease-inout);
  will-change: transform;
}

.dream__frame {
  position: relative;
  flex: 0 0 var(--dream-frame-width, 100%);
  inset: auto;
  width: var(--dream-frame-width, 100%);
  height: min(74%, calc(100% - 2rem));
  max-width: none;
  max-height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 36px 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, #f0e2c8 0%, #d9c9a8 100%);
  background-color: #f0e2c8;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: none;
}

/* 上下齿孔是非交互装饰层，不改变帧索引或舞台尺寸。 */
.dream__frame::before,
.dream__frame::after {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 3;
  height: 0.9rem;
  pointer-events: none;
  content: "";
  background: repeating-linear-gradient(
    90deg,
    transparent 0 0.95rem,
    #2a1f3d 0.95rem 2.2rem,
    transparent 2.2rem 3.2rem
  );
  opacity: 0.88;
}

.dream__frame::before { top: 0.5rem; }
.dream__frame::after { bottom: 0.5rem; }

.dream__frame.is-active,
.dream__frame[data-active="true"] {
  z-index: 1;
}

.dream__window {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, calc((74vh - 72px) * 16 / 9));
  width: min(100%, calc((74dvh - 72px) * 16 / 9));
  height: auto;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 100%;
  overflow: hidden;
  background: #050505;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 1.25rem 3.125rem rgba(0, 0, 0, 0.45);
  filter: brightness(0.5) saturate(0.72);
  transition:
    filter 0.9s var(--ease-inout),
    box-shadow 0.9s var(--ease-inout),
    transform 0.9s var(--ease-inout);
}

.dream__window .dream__media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050505;
}

.dream__window::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255, 196, 135, 0.22), transparent 38%),
    radial-gradient(ellipse at 100% 100%, rgba(184, 168, 255, 0.2), transparent 38%),
    radial-gradient(ellipse at 100% 0%, rgba(255, 212, 224, 0.14), transparent 30%);
  mix-blend-mode: screen;
  opacity: 0.5;
  transition: opacity 0.9s var(--ease-inout);
}

.dream__frame.is-active .dream__window,
.dream__frame[data-active="true"] .dream__window {
  filter: brightness(1) saturate(1);
  box-shadow:
    0 0 0 1px rgba(255, 196, 135, 0.35),
    0 0 3.125rem rgba(255, 196, 135, 0.22),
    0 1.25rem 3.125rem rgba(0, 0, 0, 0.45);
}

.dream__frame.is-active .dream__window::after,
.dream__frame[data-active="true"] .dream__window::after { opacity: 1; }

.dream__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='dream-noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23dream-noise)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.1;
  animation: dream-reel-grain 0.32s steps(2, end) infinite;
}

.dream__cloud {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: 38%;
  max-width: 22rem;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  filter: blur(0.5rem);
  mix-blend-mode: screen;
  transition: none;
}

.dream__cloud--left {
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(244, 232, 212, 0.92) 0%,
    rgba(244, 232, 212, 0.55) 25%,
    rgba(244, 232, 212, 0.15) 60%,
    transparent 100%
  );
}

.dream__cloud--right {
  right: 0;
  background: linear-gradient(
    270deg,
    rgba(244, 232, 212, 0.92) 0%,
    rgba(244, 232, 212, 0.55) 25%,
    rgba(244, 232, 212, 0.15) 60%,
    transparent 100%
  );
}

.dream.is-transitioning .dream__cloud {
  display: none;
}

.dream__timeline {
  position: absolute;
  bottom: var(--gutter);
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: max-content;
  max-width: calc(100% - 2rem);
  box-sizing: border-box;
  padding: 0.75rem 1.1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 250, 240, 0.16);
  border-radius: 999px;
  background: rgba(13, 10, 31, 0.58);
  box-shadow:
    0 0.75rem 2rem rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(0.75rem);
  transform: translateX(-50%);
  pointer-events: none;
}

.dream__moon {
  position: relative;
  display: block;
  flex: 0 0 0.9rem;
  width: 0.9rem;
  height: 0.9rem;
  overflow: hidden;
  border-radius: 50%;
  background: #f4e8d4;
  opacity: 0.48;
  box-shadow: 0 0 0 1px rgba(255, 250, 240, 0.2);
}

/* 月亮即帧切换按钮：只在磁带态可点 */
.dream.is-reel .dream__moon {
  pointer-events: auto;
  cursor: pointer;
}

.dream__moon::after {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: #17112f;
  content: "";
}

.dream__moon--1::after { transform: translateX(-42%); }
.dream__moon--2::after { transform: translateX(-20%); }
.dream__moon--3::after { transform: translateX(20%); }
.dream__moon--4::after { transform: translateX(42%); }

.dream[data-dream-state="reel-03"] .dream__moon--1,
.dream[data-dream-state="reel-04"] .dream__moon--2,
.dream[data-dream-state="reel-05"] .dream__moon--3,
.dream[data-dream-state="reel-06"] .dream__moon--4 {
  opacity: 1;
  background: #ffc487;
  box-shadow:
    0 0 0 1px rgba(255, 196, 135, 0.6),
    0 0 0.9rem rgba(255, 196, 135, 0.45);
}

@keyframes dream-reel-atmosphere {
  from { transform: translate3d(-1%, -1%, 0) scale(1); }
  to { transform: translate3d(1.5%, 1%, 0) scale(1.04); }
}

@keyframes dream-reel-glow {
  from { transform: translate3d(-3%, 1%, 0) scale(0.98); opacity: 0.45; }
  to { transform: translate3d(3%, -2%, 0) scale(1.04); opacity: 0.7; }
}

@keyframes dream-reel-grain {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-1%, 1%, 0); }
  50% { transform: translate3d(1%, -1%, 0); }
  75% { transform: translate3d(1%, 1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ------------------------------------------------------------
   Fashion · 3D 卡片橱窗（参考 variant.com / Obsidiana showcase）
   11 张 2:3 白底肖像压成 3D 透视横排，同一屏铺开、可切换
   （组件样式见文末 .show3d；此处只把本段改成满屏出血宿主）。
   ------------------------------------------------------------ */
.work--fashion {
  overflow: clip;
  background: #000;
  padding: 0;
}

/* ------------------------------------------------------------
   Car · 16:9 画幅页册（与 原版本参考/6.html 完全同构）
   黑底限宽容器，画幅页纵向成册、15px 细缝分隔；
   每页恒为 16:9——video 页满铺裁切，iframe 页内嵌自足交互画幅。
------------------------------------------------------------ */
.car-deck {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px 0;
}

.car-deck__page {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
}

.car-deck__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
  display: block;
}

.car-deck__page--video .car-deck__media {
  object-fit: cover;
}

.car-deck__page--html .car-deck__media {
  overflow: hidden;
}


/* 统一移动端内容线：不用独立页边距，轨道仍由内容线裁切。 */
@media (max-width: 640px) {
  .dream__viewport { min-height: 18rem; }

  .dream__frame {
    height: min(74%, calc(100% - 1rem));
    padding: 28px 24px;
  }

  .dream__window {
    width: min(100%, calc((74vh - 56px) * 16 / 9));
    width: min(100%, calc((74dvh - 56px) * 16 / 9));
  }

  .dream__timeline {
    bottom: 1.5rem;
    gap: 0.65rem;
    max-width: calc(100% - 1rem);
    padding: 0.65rem 0.9rem;
  }

  .dream__moon {
    flex-basis: 0.78rem;
    width: 0.78rem;
    height: 0.78rem;
  }

  .dream__cloud { width: 48%; }

}

/* 用户减弱动态效果时，所有新增内容恢复普通流，确保每件素材可见。 */
@media (prefers-reduced-motion: reduce) {
  .plate__inner {
    opacity: 1;
    transform: none !important;
  }

  .plate__media { transform: none !important; }

  /* 首屏：漂浮形静止可见，视差位移全部归零（数字保留居中位移） */
  .cover-blob {
    animation: none !important;
    opacity: 0.8;
  }
  .cover-star {
    animation: none !important;
    opacity: 0.9;
  }
  /* 减弱动效：插封 2 文字不做滚动点亮，直接实心可见 */
  .cover-boundary__statement .line,
  .cover-boundary__notes .line { --fill: 100%; }
  .cover-open__ghost,
  .cover-open__type { transform: none; }
  .cover-open__number { transform: translate(-50%, -50%); }

  /* 档案列表：行直接可见，不做逐行进场位移 */
  .archive__row {
    opacity: 1;
    transform: none;
    transition: color 0.3s ease;
  }
  /* 背景瀑布流静止 */
  .archive__bg-row {
    animation: none;
    will-change: auto;
  }
  /* 状态窗滑轨直接落位 */
  .archive__thumbs-track { transition: none; }

  .dream {
    min-height: 0;
  }

  .dream__viewport {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .dream__stage {
    height: auto;
    overflow: visible;
    cursor: default;
  }

  .dream__entry,
  .dream__intro,
  .dream__reel {
    position: relative;
    inset: auto;
    display: block;
    height: auto;
    min-height: 0;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none;
    transition: none;
  }

  .dream__intro,
  .dream__reel { margin-top: var(--stack); }

  .dream__media {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .dream__reel {
    display: grid;
    gap: var(--stack);
  }

  .dream__reel-track {
    display: grid;
    gap: var(--stack);
    width: 100%;
    height: auto;
    transform: none !important;
  }

  .dream__reel,
  .dream__reel::before,
  .dream__reel::after,
  .dream__frame,
  .dream__window,
  .dream__window::after,
  .dream__grain,
  .dream__cloud,
  .dream__timeline,
  .dream__moon {
    animation: none !important;
    transition: none !important;
  }

  .dream__reel::before,
  .dream__reel::after { transform: none; }

  .dream__frame,
  .dream__frame.is-active,
  .dream__frame[data-active="true"] {
    position: relative;
    inset: auto;
    display: block;
    height: auto;
    max-height: none;
    width: 100%;
    margin: 0;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none;
    transition: none;
  }

  .dream__window {
    filter: none;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.4),
      0 1.25rem 3.125rem rgba(0, 0, 0, 0.45);
  }

  .dream__window::after { opacity: 0.5; }
  .dream__grain { opacity: 0.08; }

  .dream__cloud {
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .manual-video__toggle.is-playing {
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }

  .manual-video__particles .particle,
  .manual-video__particles .point { animation: none; }

  /* 画幅页册本身无自驱动动画；video 播放与 iframe 交互由各自内容处理。 */
}

/* ============================================================
   海报档案页（poster.html）已改为内联 <style> 的 3D 卡片画廊，
   此处不再保留旧版归档页样式。 */

/* ============================================================
   作品 · 每日海报 — 档案台（.archive）
   构图参考 nicolaromei.com/the-archive：整屏三栏档案台——
   左：档案列表（编号 / 名称 / 查看），垂直居中，细分隔线；
   中：当前海报大幅居中（本站海报为 3:4 竖版）；
   右：小注 + 竖排缩略条（当前项 ± 邻近项的滚动窗口）；
   顶：系列标注与计数；底：操作提示。
   悬停列表某行 → 中央大图与缩略条同步切换。黑底白字适配。
   ============================================================ */
.work--archive {
  background: var(--bg);
  padding: 0;
  /* 档案台让出底部作品黑条：section 仍占满一屏，内容区收短一截 */
  padding-bottom: var(--work-bar-h);
}

.archive {
  position: relative;
  display: grid;
  grid-template-columns: minmax(14rem, 19rem) 1fr minmax(6.5rem, 10rem);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "top   top   top"
    "list  stage side"
    "foot  foot  foot";
  align-items: center;
  gap: 0 var(--gutter);
  width: 100%;
  min-height: calc(100svh - var(--work-bar-h));
  padding: clamp(1.5rem, 4vh, 3rem) var(--gutter);
  box-sizing: border-box;
}

/* —— 背景：四行海报瀑布流，无限左移循环 ——
   每行同一份内容复制两份，translateX 无缝循环；四行时长微差 + 延迟错位，
   产生缓慢流动感。海报明度压暗，边缘再叠渐变保内容可读。 */
.archive__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  filter: brightness(0.22) saturate(0.8);
  pointer-events: none;
}

/* 边缘再压一层渐变，保证顶部标注 / 左列表 / 底部提示可读 */
.archive__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0.85)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0.7));
  z-index: 1;
}

/* 四行上下均匀铺开，中段留空给中央海报 */
.archive__bg-rows {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
}

/* 每行同一份内容复制两份，translateX(-50% → 0) 无缝向左循环 */
.archive__bg-row {
  flex: none;
  height: clamp(88px, 13vh, 140px);
  display: flex;
  gap: clamp(0.4rem, 0.9vh, 0.7rem);
  width: max-content;
  animation: archive-flow var(--flow-duration, 100s) linear infinite;
  animation-delay: var(--flow-delay, 0s);
  will-change: transform;
}

.archive__bg-tile {
  flex: none;
  height: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 3px;
  overflow: hidden;
}

.archive__bg-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes archive-flow {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.archive__top {
  grid-area: top;
  align-self: start;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.archive__count { color: var(--dim); }

/* —— 左：档案列表 —— */
.archive__list {
  grid-area: list;
  align-self: center;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.archive__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(0.7rem, 1.2vw, 1.2rem);
  /* 行距随视口高度收放：档案台让出底部黑条后，23 行仍在一屏内 */
  padding: clamp(0.15rem, 0.45vh, 0.38rem) 0.25rem;
  border-bottom: var(--rule) solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  cursor: pointer;
  /* 逐行进场：JS 进视口加 .is-in */
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out),
    color 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out);
}

.archive__row.is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) {
  .archive__row:hover,
  .archive__row.is-active {
    color: var(--fg);
  }
  .archive__row:hover .archive__go,
  .archive__row.is-active .archive__go {
    color: var(--accent-cover);
    transform: translateX(3px);
  }
}

.archive__row.is-active {
  border-bottom-color: rgba(255, 255, 255, 0.32);
}

.archive__idx {
  color: var(--dim);
  transition: color 0.35s var(--ease-out);
}
.archive__row:hover .archive__idx,
.archive__row.is-active .archive__idx { color: var(--accent-cover); }

.archive__name {
  font-size: var(--fs-mono);
  font-weight: var(--w-black);
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.archive__go {
  color: var(--dim);
  white-space: nowrap;
  transition: color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

/* —— 中：当前海报大图（双层：主图层 + 转场放大层） —— */
.archive__stage {
  grid-area: stage;
  justify-self: center;
  align-self: center;
  position: relative; /* 让内部 absolute 的 stage-next 以它为定位锚，overflow:hidden 才生效 */
  z-index: 1;
  margin: 0;
  width: clamp(240px, 46vh, 35vw);
  aspect-ratio: 3 / 4;
  background: #0e0e0e;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 0 40px -8px rgba(245, 221, 68, 0.16),
    0 40px 90px -30px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

.archive__stage-img,
.archive__stage-next {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 转场层：新海报以正方形蒙版从中心展开（clip-path 动起来像光圈打开）
   全程被父级 overflow:hidden 限制在卡片内，绝不溢出。 */
.archive__stage-next {
  position: absolute;
  inset: 0;
  clip-path: inset(50%); /* 初始只剩中心一点，JS 驱动展开 */
  pointer-events: none;
  will-change: clip-path;
}

/* —— 右：小注 + 缩略条 —— */
.archive__side {
  grid-area: side;
  justify-self: end;
  align-self: center;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(2rem, 5vh, 3.5rem);
}

.archive__note {
  color: var(--dim);
  text-align: left;
  flex: none;
  white-space: nowrap;
}

/* 缩略条 = 状态窗：5 格可见，整条滑轨随当前项步进滑动。
   渐隐用独立覆盖层而不是 mask——mask 的透明区不吃指针事件，
   会点不中边缘格子的缩略图。 */
.archive__thumbs {
  --thumb-w: clamp(2.6rem, 3.4vw, 3.4rem);
  --thumb-gap: 0.7rem;
  position: relative;
  height: calc(var(--thumb-w) * 4 / 3 * 5 + var(--thumb-gap) * 4);
  overflow: hidden;
}

.archive__thumbs::before,
.archive__thumbs::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 18%;
  z-index: 2;
  pointer-events: none;
}
.archive__thumbs::before {
  top: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0));
}
.archive__thumbs::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0));
}

.archive__thumbs-track {
  display: flex;
  flex-direction: column;
  gap: var(--thumb-gap);
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}

.archive__thumb {
  flex: none;
  width: var(--thumb-w);
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  overflow: hidden;
  background: #0e0e0e;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}

.archive__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive__thumb.is-active {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.85);
}
.archive__thumb:hover { opacity: 0.9; }

/* —— 底：操作提示 —— */
.archive__foot {
  grid-area: foot;
  align-self: end;
  justify-self: center;
  z-index: 1;
}

.archive__hint { color: var(--dim); }

@media (max-width: 900px) {
  .archive {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "top"
      "stage"
      "side"
      "list"
      "foot";
    gap: clamp(1.5rem, 4vh, 2.5rem) 0;
    padding-top: var(--stack);
    padding-bottom: var(--stack);
    min-height: 0;
  }
  .archive__top { flex-direction: column; gap: 0.4rem; }
  .archive__stage { width: min(70vw, 340px); }
  .archive__side { flex-direction: row-reverse; align-items: center; justify-content: space-between; width: 100%; }
  /* 窄屏 side 与缩略条同行：短句放开 nowrap，避免撑出横向溢出 */
  .archive__note { white-space: normal; }
  /* 触屏无 hover：横向状态窗，同桌面一样步进滑动 */
  .archive__thumbs {
    --thumb-w: clamp(2.2rem, 8.5vw, 2.8rem);
    height: auto;
    width: calc(var(--thumb-w) * 5 + var(--thumb-gap) * 4);
  }
  .archive__thumbs::before,
  .archive__thumbs::after {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 16%;
    height: auto;
  }
  .archive__thumbs::before { background: linear-gradient(90deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0)); }
  .archive__thumbs::after {
    left: auto;
    right: 0;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0));
  }
  .archive__thumbs-track { flex-direction: row; }
  .archive__hint { display: none; }
}

/* ============================================================
   作品 · 3D 透视卡片橱窗（通用组件 .show3d）
   形态参考 variant.com / Obsidiana showcase：满屏暗场，5 张竖版卡片
   排成 3D 透视横排，居中前置、两侧后退变暗模糊。作品流内纯图像——
   卡片自带内容（Fashion 肖像白底），不盖文字。
   ============================================================ */
.show3d {
  position: relative;
  width: 100%;
  /* 钉屏时让出底部作品黑条，橱窗居中于可见区域 */
  height: calc(100vh - var(--work-bar-h));
  height: calc(100dvh - var(--work-bar-h));
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  /* 侧卡半出画是设计的一部分：裁掉出血段，防止撑宽文档出横向滚动 */
  overflow: hidden;
}
.show3d__scene {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}
.show3d__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.show3d__backdrop {
  position: absolute;
  inset-inline: var(--gutter);
  inset-block-start: 50%;
  z-index: 1;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.12);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  transform: translateY(-50%);
}
.show3d--fashion { background: #030303; }
.show3d--fashion::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.14) var(--rule), transparent var(--rule)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) var(--rule), transparent var(--rule));
  background-size: clamp(80px, 8vw, 140px) clamp(80px, 8vw, 140px);
  background-position: center center;
  filter: url(#why-warp);
  opacity: 0.35;
  animation: why-breathe 20s ease-in-out infinite alternate;
}
.show3d--fashion .show3d__texture { display: none; }
.show3d--fashion .show3d__backdrop {
  inset-block-start: clamp(6rem, 13vh, 10rem);
  z-index: 3;
  color: var(--fg);
  overflow: visible;
  transform: scale(0.42);
}
.show3d--fashion .show3d__scene { padding-block-start: clamp(12rem, 24vh, 18rem); }
.show3d--fashion .show3d__scene { z-index: 2; }
.show3d__card {
  position: absolute;
  /* 双约束：34vw 限宽、58vh 限高（3:4 时高≈78vh 封顶），
     宽屏不超宽、矮屏不破屏，中央卡始终接近满屏高 */
  width: min(clamp(320px, 34vw, 620px), 58vh);
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.6s ease,
              box-shadow 0.6s ease;
  will-change: transform;
}
.show3d__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}
.show3d__card:hover img { transform: scale(1.05); }

/* Fashion 肖像是 2:3（更高），卡片略收窄，整高仍约一屏 */
.show3d--fashion .show3d__card {
  width: min(clamp(280px, 24vw, 500px), 38vh);
  aspect-ratio: 2 / 3;
  border-radius: 14px;
}

/* 5 档透视位 */
.show3d__card.pos-0 { transform: translateX(-120%) translateZ(-400px) rotateY(30deg);  z-index: 1; filter: brightness(0.4) blur(2px); }
.show3d__card.pos-1 { transform: translateX(-65%)  translateZ(-150px) rotateY(15deg);  z-index: 2; filter: brightness(0.7); }
.show3d__card.pos-2 { transform: translateX(0)      translateZ(50px)  rotateY(0deg);   z-index: 5; box-shadow: 0 40px 80px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.1); }
.show3d__card.pos-3 { transform: translateX(65%)   translateZ(-150px) rotateY(-15deg); z-index: 2; filter: brightness(0.7); }
.show3d__card.pos-4 { transform: translateX(120%) translateZ(-400px) rotateY(-30deg); z-index: 1; filter: brightness(0.4) blur(2px); }

.show3d__scene:hover .show3d__card:not(.pos-2):not(:hover) { filter: brightness(0.3) blur(4px); }
.show3d__scene .show3d__card:hover {
  transform: translateX(var(--hover-x, 0)) translateZ(100px) rotateY(0deg);
  z-index: 10;
  filter: brightness(1) blur(0);
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.show3d__card.pos-0 { --hover-x: -100%; }
.show3d__card.pos-1 { --hover-x: -50%; }
.show3d__card.pos-2 { --hover-x: 0%; }
.show3d__card.pos-3 { --hover-x: 50%; }
.show3d__card.pos-4 { --hover-x: 100%; }

@media (max-width: 768px) {
  .show3d__card.pos-0,
  .show3d__card.pos-4 { display: none; }
  .show3d__card.pos-1 { transform: translateX(-55%) translateZ(-100px) rotateY(15deg); }
  .show3d__card.pos-3 { transform: translateX(55%) translateZ(-100px) rotateY(-15deg); }
  .show3d--fashion .show3d__card { width: min(clamp(240px, 70vw, 340px), 46vh); }
}

/* 降级：减弱动态 → 卡片静态排布，无过渡，内容仍可见 */
@media (prefers-reduced-motion: reduce) {
  .show3d__card,
  .show3d__card img { transition: none; }
  .show3d__card.pos-0,
  .show3d__card.pos-4 { filter: brightness(0.6); }
}

/* ------------------------------------------------------------
   收尾 · 联系（2026-09-13）
   首尾呼应首屏：上下 mono 信息框（复用 .cover-meta）夹住左侧独白与
   邮箱复制；荧光绿有机形复用封面系生成器（data-cover-shapes），
   小一档、压在文字下方，让文字当主角。环境设计作品独立成站，不互链。
   ------------------------------------------------------------ */
.cover-end {
  z-index: 1;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}

.cover-end__shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* 前景层也压在文字下方：收尾屏以读清联系方式为先，视差纵深靠两层不同幅度保留 */
.cover-end__shapes[data-cover-layer="front"] { z-index: 1; }
.cover-end__shapes .cover-blob { width: clamp(2.25rem, 4.5vw, 5.25rem); }

.cover-end__body {
  position: relative;
  z-index: 2;
  max-width: min(100%, 60rem);
}
.cover-end__talk { margin-top: clamp(1.5rem, 4vh, 3rem); }
/* 手动分行的最长一行 17 字：窄屏降一档字号，避免自动折行把词拆开 */
@media (max-width: 640px) {
  .cover-end__talk { font-size: var(--fs-lead); }
}

.cover-end__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.5rem;
  margin-top: clamp(2rem, 6vh, 4.5rem);
}

.cover-end__mail {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--fg);
}
.cover-end__mail a {
  color: inherit;
  font-size: var(--fs-lead);
  text-decoration: none;
}

/* ------------------------------------------------------------
   作品黑条（2026-09-13 重做，替代左下角小卡）
   贴视口底边、全宽纯黑、无圆角无阴影：与作品黑底连成一体，
   读起来像画幅的下遮幅，不浮在画面上。三栏——左序号/类别/名称，
   中流程链 + 一句思路，右关键词。插封屏隐藏；满屏作品（Dream /
   Fashion / 每日海报）的舞台让出 --work-bar-h，构图不被遮。
   手机收成单行，「思路」展开抽屉。
   ------------------------------------------------------------ */
.work-info {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom);
  background: #000;
  border-top: var(--rule) solid rgba(255, 255, 255, 0.08);
  color: var(--fg);
  transform: translateY(100%);
  visibility: hidden;
  transition:
    transform 0.55s var(--ease-out),
    visibility 0s linear 0.55s;
}
.work-info.is-visible {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.work-info__inner {
  display: grid;
  grid-template-columns: minmax(11rem, 17%) minmax(0, 1fr) auto;
  grid-template-areas: "id flow keywords";
  align-items: center;
  column-gap: clamp(1.5rem, 3vw, 3.5rem);
  min-height: calc(var(--work-bar-h) - var(--rule));
  padding: 10px var(--gutter);
  transition: opacity 0.22s ease;
}
/* 作品切换：先淡出、换字、再淡入，避免文字硬跳 */
.work-info.is-swapping .work-info__inner { opacity: 0; }

.work-info__id { grid-area: id; min-width: 0; }
.work-info__meta {
  display: flex;
  gap: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
  white-space: nowrap;
}
.work-info__name {
  overflow: hidden;
  font-size: var(--fs-body);
  font-weight: var(--w-black);
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.work-info__flow {
  grid-area: flow;
  min-width: 0;
  padding-left: clamp(1.5rem, 3vw, 3.5rem);
  border-left: var(--rule) solid rgba(255, 255, 255, 0.12);
}
.work-info__steps {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 流程箭头用主题荧光绿作结构标记，呼应插封 3 的流程曲线 */
.work-info__steps i {
  margin: 0 0.55em;
  color: var(--accent-cover);
  font-style: normal;
}
.work-info__desc {
  font-size: var(--fs-meta);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.9);
}

.work-info__keywords {
  grid-area: keywords;
  display: flex;
  gap: 0.45rem;
  list-style: none;
}
.work-info__keywords li {
  padding: 0.22rem 0.6rem;
  border: var(--rule) solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
}

.work-info__toggle { display: none; }

/* 中等宽度：关键词让位给思路，保证思路句单行不把黑条撑高 */
@media (max-width: 1280px) {
  .work-info__inner {
    grid-template-columns: minmax(10rem, 22%) minmax(0, 1fr);
    grid-template-areas: "id flow";
  }
  .work-info__keywords { display: none; }
}

/* 手机：单行（序号 + 名称 + 思路按钮），点开向上长出抽屉 */
@media (max-width: 768px) {
  .work-info__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "id toggle";
    row-gap: 12px;
    padding: 8px 16px;
  }
  .work-info__id {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
  }
  .work-info__category { display: none; }
  .work-info__flow { display: none; }
  .work-info__toggle {
    grid-area: toggle;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border: var(--rule) solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    cursor: pointer;
  }
  .work-info__toggle::after { content: "+"; }
  .work-info.is-open .work-info__toggle::after { content: "−"; }

  .work-info.is-open .work-info__inner {
    grid-template-areas:
      "flow flow"
      "keywords keywords"
      "id toggle";
    padding-top: 16px;
  }
  .work-info.is-open .work-info__category { display: inline; }
  .work-info.is-open .work-info__flow {
    display: block;
    padding-left: 0;
    border-left: 0;
  }
  .work-info.is-open .work-info__steps { white-space: normal; }
  .work-info.is-open .work-info__keywords {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-info,
  .work-info__inner { transition: none; }
}