/* =====================================================================
   2025~2026 个人电子作品集 · 组件 (Components)
   3D 轮播舞台 · 卡片 · 弧形选区标记 · 自定义光标 · 详情页版式
   几何由 carousel.js 注入 inline transform；本文件负责外观与质感。
   ===================================================================== */

/* ============================ 自定义光标（桌面） ============================ */
.cursor, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  border-radius: 50%; transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .3s;
}
.cursor { width: 7px; height: 7px; background: var(--accent); }
.cursor-ring { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.4); transition: width .3s var(--ease), height .3s var(--ease), border-color .3s, background .3s, opacity .3s; }
body.has-cursor .cursor, body.has-cursor .cursor-ring { opacity: 1; }
body.has-cursor .cursor-ring.is-hover { width: 64px; height: 64px; border-color: var(--accent); background: var(--accent-soft); }
body.has-cursor .cursor-ring.is-view { width: 84px; height: 84px; border-color: transparent; background: var(--accent); }
body.has-cursor .cursor-ring.is-view::after { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink); font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; }
@media (hover: none) { .cursor, .cursor-ring { display: none; } }

/* ============================ 3D 轮播舞台 ============================ */
.works { position: relative; z-index: 1; padding-block: clamp(30px, 4.2vw, 56px) clamp(80px, 12vw, 150px); overflow: hidden; scroll-margin-top: calc(var(--nav-h) + 24px); }
/* 在红框范围内适当加宽整体画面（横版宽幅） */
.works .stage.wrap { max-width: 1500px; }

.filters { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.chip {
  font-family: var(--font-display); font-size: 0.76rem; letter-spacing: 0.04em;
  padding: 0.52em 1.05em; border-radius: var(--pill); border: 1px solid var(--line);
  color: var(--text-2); background: transparent;
  transition: color var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease), background var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.chip:hover { color: var(--text); border-color: rgba(200,164,92,0.55); }
.chip.is-active { color: var(--ink); background: var(--accent); border-color: transparent; font-weight: 600; }
.chip .en { opacity: 0.6; font-size: 0.86em; margin-left: 0.35em; }

.stage { position: relative; width: 100%; margin-top: clamp(28px, 5vw, 56px); }
.carousel {
  position: relative;
  height: var(--stage-h, 460px);
  perspective: 1600px;
  perspective-origin: 50% 42%;
}
.carousel__track { position: absolute; inset: 0; transform-style: preserve-3d; }

.card {
  position: absolute; left: 50%; top: 50%;
  width: var(--card-w, 300px); height: var(--card-h, 420px);
  margin-left: calc(var(--card-w, 300px) / -2);
  margin-top: calc(var(--card-h, 420px) / -2);
  border-radius: var(--radius-lg);
  cursor: pointer;
  will-change: transform, opacity;
  transition: transform .7s var(--ease), opacity .7s var(--ease), filter .7s var(--ease);
  transform-style: preserve-3d;
}
.card.is-side { opacity: 0.55; filter: saturate(0.85) brightness(0.82); }
.card.is-active { opacity: 1; filter: none; }
.card.is-far { opacity: 0; pointer-events: none; }

.card__inner {
  position: relative; width: 100%; height: 100%;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line);
  background: var(--cover, linear-gradient(150deg, #1c1c22, #0e0e12));
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7);
  transition: box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.card.is-active .card__inner { border-color: rgba(255,255,255,0.16); box-shadow: 0 40px 90px -24px rgba(0,0,0,0.85), 0 0 0 1px var(--accent-soft); }

/* 封面占位：渐变 + 巨大淡化的首字母 + 项目名（真实封面图由用户后续替换） */
.card__cover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; }
.card__monogram { font-family: var(--font-display); font-weight: 600; font-size: 7rem; line-height: 0.8; color: rgba(255,255,255,0.06); align-self: flex-end; }
.card__coverimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.card.has-img .card__coverimg { opacity: 1; }
.card.has-img .card__monogram { display: none; }

.card__cat { align-self: flex-start; font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 0.4em 0.8em; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); color: var(--text); background: rgba(0,0,0,0.25); backdrop-filter: blur(6px); }
.card__cat[data-cat="list"] { color: var(--text-2); }
.card__title { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; line-height: 1.12; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.6); }
.card__meta { color: rgba(255,255,255,0.78); font-size: 0.82rem; margin-top: 0.4em; }
.card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%); }
.card__cta { position: absolute; left: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-display); font-size: 0.82rem; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.card.is-active .card__cta { opacity: 1; transform: none; }
.card__cta .arrow { color: var(--accent); }

/* 控制条 */
.carousel__controls { display: flex; align-items: center; justify-content: center; gap: 1.6rem; margin-top: clamp(28px, 5vw, 48px); }
.nav-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--text); transition: background var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease); }
.nav-btn:hover { background: var(--accent-soft); border-color: rgba(200,164,92,0.6); color: var(--accent-hi); }
.nav-btn svg { width: 18px; height: 18px; }
.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.dots { display: flex; gap: 0.55rem; align-items: center; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: all .35s var(--ease); }
.dot.is-active { background: var(--accent); width: 18px; border-radius: 3px; }

.works__count { text-align: center; color: var(--text-3); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 1.2rem; font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* ============================ 项目详情页 ============================ */
.detail { position: relative; z-index: 1; padding-top: calc(var(--nav-h) + clamp(28px, 6vw, 64px)); }
.detail__back { display: inline-flex; align-items: center; gap: 0.5em; color: var(--text-2); font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.04em; transition: color .3s; margin-bottom: 2rem; }
.detail__back:hover { color: var(--accent); }
.detail__cat { margin-bottom: 1rem; }
.detail__title { font-size: clamp(1.9rem, 5.2vw, 3.6rem); max-width: 18em; text-wrap: balance; overflow-wrap: anywhere; }
.detail__meta { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; margin-top: 1.4rem; color: var(--text-2); font-size: 0.95rem; }
.detail__meta b { color: var(--text); font-weight: 500; }

.detail__hero { position: relative; margin-top: clamp(32px, 6vw, 56px); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: var(--hero-ar, 16/9); background: var(--cover, linear-gradient(150deg,#1c1c22,#0e0e12)); border: 1px solid var(--line); }
.detail__hero img, .detail__hero video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 暂无封面图时的占位标记（不喧宾夺主，仅提示待补充） */
.detail__hero::after {
  content: "COVER · 封面图待补充";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.28em;
  color: rgba(244, 242, 237, 0.16); pointer-events: none;
}
.detail__hero:has(img)::after, .detail__hero:has(video)::after { display: none; }

/* 视频 hero：静音自动循环，低动态偏好时改为点击播放 */
.detail__video { background: #000; width: 100%; height: 100%; object-fit: cover; display: block; }
.detail__film { grid-column: 1 / -1; margin: clamp(8px, 1.5vw, 20px) 0 0; }
.detail__film .frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: #000; aspect-ratio: 16/9;
}
.detail__film figcaption { margin-top: 0.8rem; color: var(--text-3); font-size: 0.82rem; line-height: 1.6; max-width: 78ch; }
.detail__film figcaption b { color: var(--text-2); font-weight: 500; margin-right: 0.6em; font-family: var(--font-display); }
.detail__play {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.62em 1.15em; border-radius: var(--pill);
  background: rgba(10,10,12,0.62); border: 1px solid rgba(255,255,255,0.24);
  color: #fff; font-family: var(--font-display); font-size: 0.76rem; letter-spacing: 0.06em;
  backdrop-filter: blur(10px); cursor: pointer; transition: background .3s, border-color .3s;
}
.detail__play:hover { background: rgba(200,164,92,0.22); border-color: var(--accent); }
.detail__play[hidden] { display: none; }

/* 声音开关：右下角圆形按钮，默认静音（配合自动播放策略） */
.detail__sound {
  position: absolute; right: 18px; bottom: 18px; z-index: 3;
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  background: rgba(10,10,12,0.56); border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.42);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.detail__sound:hover { background: rgba(200,164,92,0.24); border-color: var(--accent); }
.detail__sound:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.detail__sound .ico { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.detail__sound .ico path:first-child { fill: #fff; stroke: none; }
.detail__sound .ico--on { display: none; }
.detail__sound.is-on .ico--on { display: block; }
.detail__sound.is-on .ico--off { display: none; }
.detail__sound.is-on { border-color: rgba(200,164,92,0.7); }

/* 影片角标：标明「概念版 / 未落地」这类状态，避免被误读成实景 */
.detail__film-badge {
  position: absolute; top: 18px; left: 18px; z-index: 3;
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); padding: 7px 14px; border-radius: var(--pill);
  background: rgba(10,10,12,0.74); border: 1px solid rgba(200,164,92,0.62);
  backdrop-filter: blur(10px);
}

/* 正文全幅大图 */
.detail__feature { grid-column: 1 / -1; margin: clamp(8px, 1.5vw, 20px) 0 0; }
.detail__feature .frame {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-elev); aspect-ratio: var(--far, 21/9);
}
.detail__feature img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail__feature figcaption { margin-top: 0.8rem; color: var(--text-2); opacity: 0.82; font-size: 0.82rem; letter-spacing: 0.02em; }

/* 色彩体系 */
.palette { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(14px, 2vw, 26px); }
.palette__head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.palette__head h3 { font-size: clamp(1.2rem, 2.6vw, 1.75rem); letter-spacing: -0.015em; }
.palette__head span { font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.swatch { display: flex; flex-direction: column; gap: 0.75rem; }
.swatch__chip {
  display: block; height: clamp(120px, 16vw, 200px);
  border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.12);
}
.swatch__row { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.swatch__row b { font-family: var(--font-display); font-size: 0.86rem; letter-spacing: 0.06em; color: var(--text); font-variant-numeric: tabular-nums; }
.swatch__row span { font-size: 0.82rem; color: var(--text-2); }
.swatch p { font-size: 0.8rem; line-height: 1.6; color: var(--text-2); opacity: 0.84; }

/* 标杆深挖：叙事网格 */
.deep-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 4vw, 48px); margin-top: clamp(48px, 8vw, 90px); }
.deep-block { grid-column: span 12; }
.deep-block--narrow { grid-column: 3 / span 8; }
.deep-block h3 { font-size: clamp(1.3rem, 3vw, 1.9rem); margin-bottom: 1rem; }
.deep-block p { color: var(--text-2); }
.deep-block p + p { margin-top: 1em; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(16px,3vw,32px); grid-column: 1 / -1; margin: 1rem 0; }
.stat { border-top: 1px solid var(--line); padding-top: 1.1rem; }
.stat__num { font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 3rem); color: var(--accent); line-height: 1; }
.stat__label { color: var(--text-2); font-size: 0.88rem; margin-top: 0.5rem; }

/* ---------- 编辑式影像网格 ---------- */
.gallery-head { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-top: clamp(24px, 4vw, 48px); padding-top: 1.4rem; border-top: 1px solid var(--line); }
.gallery-head h3 { font-size: clamp(1.7rem, 3.8vw, 2.9rem); letter-spacing: -0.025em; line-height: 1; display: flex; align-items: baseline; gap: 0.7em; }
.gallery-head__no {
  font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.14em;
  color: var(--accent); font-variant-numeric: tabular-nums;
  transform: translateY(-0.55em);
}
/* 分组之间留更大的呼吸 */
.gallery-head--sec { margin-top: clamp(52px, 8vw, 104px); }
.gallery-head__idx { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); font-variant-numeric: tabular-nums; padding-bottom: 0.35em; white-space: nowrap; flex: 0 0 auto; }

.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(18px, 2.4vw, 34px); grid-column: 1 / -1; align-items: start; margin-top: clamp(20px, 3vw, 36px); }
.g-item { grid-column: span var(--sp, 6); display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.g-item--offset { margin-top: clamp(22px, 4vw, 64px); }
/* 定高行：同一行的图给出相同 --h，宽度各自不同 —— 顶边、底边、基线因此严格对齐，
   错落感交给「宽窄」与「横竖」的差别，而不是靠 margin 顶下去（那会直接错位）。 */
.g-item--fixed .g-frame { aspect-ratio: auto; height: var(--h, 430px); }
/* 章节内嵌视频：点击播放，不预加载，避免与页尾全片抢带宽 */
.g-frame video.g-video { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; }

.g-frame { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg-elev); border: 1px solid var(--line); aspect-ratio: var(--ar, 4 / 3); }
.g-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease), filter .6s var(--ease); }
/* 黑底渲染图（单体、悬浮）放在深色页面上时，图与页面的边界会消失。
   给图框加一道极淡的内描边，让它「浮」在页面上——对实景照片无副作用。 */
.g-frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09); pointer-events: none; z-index: 2; }
/* 竖版卡限制高度上限：保证一屏能看完整一行，同时不改变列宽 */
.g-item--tall .g-frame { max-height: 74vh; }
.g-item:hover .g-frame img { transform: scale(1.025); }
.g-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.5) 100%);
}

.g-num {
  position: absolute; top: 14px; left: 16px; z-index: 2;
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.92); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}
/* 站点牌：动线型项目的第 N 站，用实心金块区别于普通序号 */
.g-num--station {
  background: rgba(216,164,88,0.94); color: #1a120a; text-shadow: none;
  padding: 5px 10px 4px; border-radius: 2px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em;
}

.g-tags { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.g-tag {
  font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--pill); color: rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
}
/* 全幅横图的图注若跟着图片宽度走，一行会有九十字以上，读不下去。
   统一压到 780px，竖版卡的图宽本就小于此值，不受影响。 */
.g-item figcaption { color: var(--text-2); font-size: 0.82rem; line-height: 1.6; opacity: 0.82; max-width: min(100%, 780px); }
.g-item figcaption::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--accent); vertical-align: middle; margin-right: 0.6em; opacity: 0.7; }

/* 带点位名的一类图注：名称单独一行，用于「一图一点位」的漫游章节 */
.g-cap { display: flex; flex-direction: column; gap: 0.4rem; }
.g-cap::before { display: none; }
.g-cap .g-name {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem); letter-spacing: 0.04em; line-height: 1.5;
  color: var(--text); opacity: 1;
}
.g-cap .g-name::before {
  content: ""; display: inline-block; width: 18px; height: 1px;
  background: var(--accent); vertical-align: middle; margin-right: 0.6em; opacity: 0.75;
}
.g-cap span { display: block; }
/* 同一行里，没有点位名的图注留一个等高的空标题行，保证文字基线齐平 */
.g-name--blank { visibility: hidden; }
.g-name--blank::before { display: none; }

/* 图文之间的文字块：有色底、大字号，用来打断图片序列、制造呼吸 */
/* 图版：图纸类（白底总平/流线）不吃满整行，四周留深色，像一张贴上去的图。
   注意：不要用 grid-column 指定起点列——在窄屏单列网格里会撑出 12 条隐式列。
   改为「占满一行 + 图框自身横向缩进」。 */
.g-item--center { grid-column: span 12 !important; }
.g-item--center .g-frame,
.g-item--center figcaption { width: 84%; margin-inline: auto; }
.g-item--center .g-num { display: none; }

.g-note {
  grid-column: span var(--sp, 12);
  display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 18px);
  padding: clamp(26px, 3.6vw, 54px);
  border-radius: var(--radius-lg);
  background: var(--tint, rgba(200,164,92,0.10));
  border: 1px solid rgba(255,255,255,0.09);
  border-left: 2px solid var(--accent);
}
.g-note__kicker {
  font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--accent);
}
.g-note p {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.1rem, 2.1vw, 1.65rem); line-height: 1.5;
  color: var(--text); max-width: 44ch; text-wrap: pretty;
}

.quote { grid-column: 2 / span 10; border-left: 2px solid var(--accent); padding-left: 1.4rem; font-family: var(--font-display); font-size: clamp(1.2rem, 3vw, 1.8rem); line-height: 1.4; color: var(--text); }

/* 列表精简：紧凑卡片列表 */
.list-block { margin-top: clamp(40px, 7vw, 72px); display: flex; flex-direction: column; }
.list-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 1.4rem; align-items: center; padding: 1.4rem 0; border-bottom: 1px solid var(--line); transition: padding .4s var(--ease); }
.list-item:hover { padding-left: 0.6rem; }
.list-item__no { font-family: var(--font-display); color: var(--accent); font-size: 0.9rem; }
.list-item__title { font-family: var(--font-display); font-size: clamp(1.1rem,2.5vw,1.5rem); }
.list-item__meta { color: var(--text-2); font-size: 0.88rem; margin-top: 0.2rem; }
.list-item__arrow { color: var(--text-3); transition: transform .4s var(--ease), color .4s; }
.list-item:hover .list-item__arrow { color: var(--accent); transform: translateX(6px); }

/* 下一项目 */
.next-project { margin-top: clamp(56px, 9vw, 110px); border-top: 1px solid var(--line); padding-top: clamp(36px,6vw,64px); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.next-project a { display: inline-flex; align-items: baseline; gap: 1rem; }
.next-project h3 { font-size: clamp(1.6rem, 4vw, 2.6rem); transition: color .3s; }
.next-project a:hover h3 { color: var(--accent); }
.next-project .label { font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); }

/* ============================ 鱼眼轮播舞台（纯 CSS 3D，无 WebGL） ============================ */
/* --k：卡片内部所有尺寸的缩放系数。
   卡片按「真实显示尺寸」排版（不再靠透视放大），文字因此是 1:1 像素渲染 → 锐利无发虚。 */
.fisheye {
  position: relative; width: 100%;
  --card-w: 512px; --card-h: 368px; --k: 1.6;
  height: clamp(340px, 56vh, 520px);
}
/* 透视舞台：所有卡片在圆柱上排布，第一人称弧面由此而来。
   ★ 关键：圆柱整体后移一个半径（JS 写 ring 的 translateZ），
     居中卡片落在透视平面上（z=0，缩放=1），文字不会被拉伸模糊。 */
.fisheye__stage {
  position: absolute; inset: 0; z-index: 1;
  perspective: 1580px; perspective-origin: 50% 46%;
  touch-action: none; cursor: grab;
}
.fisheye__stage:active { cursor: grabbing; }
.fisheye__ring {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-style: preserve-3d;
}

/* 单张卡片 */
.fisheye__card {
  position: absolute; left: 0; top: 0;
  width: var(--card-w); height: var(--card-h);
  margin-left: calc(var(--card-w) / -2); margin-top: calc(var(--card-h) / -2);
  border-radius: calc(var(--radius-lg) * var(--k)); overflow: hidden;
  /* flat + isolate：避免 overflow:hidden 与 preserve-3d 冲突导致文字溢出/发虚 */
  transform-style: flat; backface-visibility: hidden; isolation: isolate;
  box-shadow: 0 26px 60px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.06);
  transition: box-shadow 0.35s ease;
  will-change: transform;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.fisheye__card-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 82% 14%, hsla(calc(var(--hue) + 18), 62%, 62%, 0.24), rgba(0,0,0,0) 52%),
    linear-gradient(150deg, hsl(var(--hue), 38%, 24%) 0%, hsl(var(--hue), 32%, 14%) 56%, hsl(calc(var(--hue) + 14), 28%, 9%) 100%);
}
/* 封面图（有图时覆盖渐变；无图时保持渐变 + 首字母） */
.fisheye__card-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.fisheye__card.has-img .fisheye__card-letter { display: none; }
.fisheye__card-cat {
  position: absolute; top: calc(16px * var(--k)); left: calc(16px * var(--k)); z-index: 2;
  font-family: var(--font-display); font-size: calc(0.6rem * var(--k)); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: calc(5px * var(--k)) calc(11px * var(--k)); border-radius: var(--pill);
  color: rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.34); border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(4px);
}
.fisheye__card-letter {
  position: absolute; right: calc(14px * var(--k)); bottom: calc(8px * var(--k)); z-index: 1;
  font-family: var(--font-display); font-weight: 700; font-size: calc(9.5rem * var(--k)); line-height: 0.8;
  color: rgba(255,255,255,0.07); user-select: none;
}
/* 尚未上线的项目：正中一行「敬请期待」+ 英文小字（替代原来的半透明首字母，避免看起来像没做完） */
.fisheye__card-soon {
  /* 底部留 34% 给标题区，让「敬请期待」落在卡片上半部，不与下方标题挤在一起 */
  position: absolute; inset: 0 0 34% 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(12px * var(--k)); text-align: center; pointer-events: none;
}
.fisheye__card-soon b {
  font-family: var(--font-display); font-weight: 500;
  font-size: calc(1.42rem * var(--k)); letter-spacing: 0.22em; text-indent: 0.22em;
  color: rgba(255,255,255,0.88);
}
.fisheye__card-soon i {
  font-style: normal; font-family: var(--font-display);
  font-size: calc(0.58rem * var(--k)); letter-spacing: 0.3em; text-indent: 0.3em;
  color: rgba(255,255,255,0.4);
}
/* 空卡底部不出现「查看项目 →」：它点不进去，就别暗示可以 */
.fisheye__card.is-soon .fisheye__card-cta { display: none; }
.fisheye__card-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 calc(20px * var(--k)) calc(20px * var(--k));
  background: linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.30) 60%, rgba(0,0,0,0) 100%);
}
/* 有封面照片时文字压在图上：加强底部压暗，保证标题可读 */
.fisheye__card.has-img .fisheye__card-foot {
  background: linear-gradient(0deg, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.68) 46%, rgba(0,0,0,0.12) 78%, rgba(0,0,0,0) 100%);
}
.fisheye__card-accent { display: block; width: calc(42px * var(--k)); height: calc(3px * var(--k)); border-radius: 2px; background: var(--accent); margin-bottom: calc(12px * var(--k)); }
.fisheye__card-title {
  margin: 0; font-family: var(--font-display); font-weight: 500; font-size: calc(1.05rem * var(--k)); line-height: 1.3;
  color: #fff; letter-spacing: 0.01em;
  overflow-wrap: anywhere; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fisheye__card-sub { margin: calc(4px * var(--k)) 0 0; font-size: calc(0.82rem * var(--k)); color: rgba(255,255,255,0.72); }
.fisheye__card-cta {
  display: inline-block; margin-top: calc(12px * var(--k)); font-family: var(--font-display); font-size: calc(0.78rem * var(--k));
  letter-spacing: 0.04em; color: var(--accent);
}
.fisheye__card.is-center { box-shadow: 0 30px 80px rgba(0,0,0,0.68), 0 0 0 1px rgba(200,164,92,0.45), 0 0 44px rgba(200,164,92,0.16); }
.fisheye__card.is-center .fisheye__card-bg { filter: brightness(1.06); }

/* 电影感：中心微光 + 底部暗角（鱼眼镜头感） */
.fisheye::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    radial-gradient(46% 40% at 50% 42%, rgba(200,164,92,0.07), rgba(0,0,0,0) 60%),
    radial-gradient(120% 120% at 50% 122%, rgba(0,0,0,0.6), rgba(0,0,0,0) 58%),
    radial-gradient(130% 130% at 50% 50%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.5) 100%);
}

/* 草图浮层：左上黄点+灰圈、顶部提示、弧形选区标记 */
.fisheye__mark { position: absolute; top: 5%; left: 5%; z-index: 4; pointer-events: none; }
.fisheye__mark .fisheye__dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); left: 0; top: 0; }
.fisheye__mark .fisheye__ring-mark { position: absolute; left: -10px; top: -10px; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,0.28); border-radius: 50%; }
.fisheye__hint {
  position: absolute; top: 5%; left: 50%; transform: translateX(-50%); z-index: 4; pointer-events: none;
  font-family: var(--font-display); font-size: clamp(0.72rem, 1.6vw, 0.9rem); letter-spacing: 0.04em;
  color: var(--text-2); text-align: center; white-space: nowrap;
  text-shadow: 0 2px 18px rgba(0,0,0,0.7);
}

/* 空卡点击提示：底部浮出的胶囊，2.2s 后淡出 */
.fisheye__toast {
  position: fixed; left: 50%; bottom: clamp(26px, 6vh, 62px);
  transform: translate(-50%, 12px);
  z-index: 999;
  padding: 0.72rem 1.4rem; border-radius: var(--pill);
  font-family: var(--font-display); font-size: 0.86rem; letter-spacing: 0.04em;
  color: #fff; white-space: nowrap;
  background: rgba(16,16,18,0.92);
  border: 1px solid rgba(200,164,92,0.42);
  box-shadow: 0 18px 48px rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.fisheye__toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  .fisheye { --card-w: 391px; --card-h: 271px; --k: 1.46; height: clamp(280px, 46vh, 380px); }
  .fisheye__card-title { font-size: calc(0.98rem * var(--k)); }
}
@media (max-width: 560px) {
  .fisheye { --card-w: 304px; --card-h: 217px; --k: 1.29; height: clamp(250px, 42vh, 320px); }
  .fisheye__hint { font-size: 0.66rem; white-space: normal; width: 84%; top: 3%; }
  /* 小屏隐藏草图圆点标记：避免与顶部提示文字挤在同一视觉带（装饰性元素，无信息损失） */
  .fisheye__mark { display: none; }
  /* 卡片内文字整体收一档，杜绝压叠（数值 × --k 换算） */
  .fisheye__card-letter { font-size: calc(5.6rem * var(--k)); right: calc(12px * var(--k)); bottom: calc(6px * var(--k)); opacity: .8; }
  .fisheye__card-foot { padding: 0 calc(16px * var(--k)) calc(16px * var(--k)); }
  .fisheye__card-title { font-size: calc(0.95rem * var(--k)); line-height: 1.3; }
  .fisheye__card-sub { font-size: calc(0.74rem * var(--k)); margin-top: calc(2px * var(--k)); }
  .fisheye__card-cta { font-size: calc(0.7rem * var(--k)); margin-top: calc(7px * var(--k)); }
  .fisheye__card-cat { top: calc(11px * var(--k)); left: calc(11px * var(--k)); font-size: calc(0.53rem * var(--k)); padding: calc(4px * var(--k)) calc(8px * var(--k)); }
  .fisheye__card-soon b { font-size: calc(1.16rem * var(--k)); }
  .fisheye__toast { font-size: 0.76rem; padding: 0.6rem 1.05rem; max-width: 86vw; white-space: normal; text-align: center; }
  .fisheye__card-accent { width: calc(30px * var(--k)); height: calc(2px * var(--k)); margin-bottom: calc(8px * var(--k)); }
}

/* ============================ 响应式：轮播与栅格收缩 ============================ */
@media (max-width: 860px) {
  .stat-row { grid-template-columns: 1fr; }
  .deep-block--narrow, .quote { grid-column: 1 / -1; }
  /* 影像网格降为单列：错位取消，比例交给 --ar */
  .gallery { grid-template-columns: 1fr; gap: 18px; }
  .g-item { grid-column: 1 / -1; }
  .g-item--offset { margin-top: 0; }
  .g-item--fixed .g-frame { height: auto; aspect-ratio: var(--ar, 4/3); }
  .g-item--center { grid-column: span 1 !important; }
  .g-item--center .g-frame, .g-item--center figcaption { width: 100%; }
  /* 21:9 横幅在窄屏会压成一条，抬到 4:3 保证图纸/全景可读 */
  .g-item--pan .g-frame { aspect-ratio: 4 / 3; }
  .gallery-head { align-items: flex-end; }
}
@media (max-width: 560px) {
  .list-item { grid-template-columns: 44px 1fr; }
  .list-item__arrow { display: none; }
}

/* 窄屏网格：用双类提高特异性，确保单列规则不被其他定义盖掉（file:// 下媒体查询曾失效过） */
@media (max-width: 860px) {
  .gallery.gallery { grid-template-columns: minmax(0, 1fr) !important; }
  /* 关键：span 大于显式列数会生成隐式轨道，把整块网格撑成 12 列。
     窄屏一律 span 1，让所有条目老老实实堆成一列。 */
  .gallery.gallery .g-item,
  .gallery.gallery .g-note { grid-column: span 1 !important; }
}

/* =====================================================================
   可复制文本（邮箱 / 微信号）
   mailto: 在「没装邮件客户端」的电脑上会静默失败，微信内置浏览器更是基本不响应。
   联系方式统一改为「点一下就复制」，并给出 1.5 秒的反馈。
   ===================================================================== */
[data-copy] {
  position: relative;
  cursor: pointer;
}
button[data-copy]:not(.ab-contact__item):not(.btn) {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}
[data-copy].is-copied::after {
  content: attr(data-copied-text);
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elev);
  color: var(--accent-hi);
  font-size: 1em;
  letter-spacing: 0.1em;
  border-radius: inherit;
  animation: copy-pop 0.22s var(--ease);
  pointer-events: none;
}
@keyframes copy-pop {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* <button class="btn"> 与 <a class="btn"> 的差异补齐（button 不继承 line-height、光标非手型） */
button.btn {
  cursor: pointer;
  line-height: inherit;
}

/* =====================================================================
   全屏播放开关
   原生 <video controls> 被自定义按钮替代后，全屏入口一并丢失。这里补一个
   与声音开关同款的圆形按钮，并排放在它左边；全屏时切换成「退出」图标。
   ===================================================================== */
.detail__full {
  position: absolute; right: 70px; bottom: 18px; z-index: 3;
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  background: rgba(10, 10, 12, 0.56); border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.42);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.detail__full:hover { background: rgba(200, 164, 92, 0.24); border-color: var(--accent); }
.detail__full:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.detail__full .ico {
  width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.detail__full .ico--out { display: none; }
.detail__full.is-on .ico--in { display: none; }
.detail__full.is-on .ico--out { display: block; }
.detail__full.is-on { border-color: rgba(200, 164, 92, 0.7); }

/* 全屏时容器撑满屏幕、视频按原比例留边（不裁切），圆角与边框一并去掉 */
.frame:fullscreen,
.frame:-webkit-full-screen,
.ab-v:fullscreen,
.ab-v:-webkit-full-screen {
  aspect-ratio: auto;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0; border-radius: 0;
  background: #000;
  display: grid; place-items: center;
}
.frame:fullscreen video,
.frame:-webkit-full-screen video,
.ab-v:fullscreen video,
.ab-v:-webkit-full-screen video {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* 窄屏：按钮缩小，位置同步内收，避免压住画面主体 */
@media (max-width: 640px) {
  .detail__full,
  .detail__sound { width: 36px; height: 36px; bottom: 12px; }
  .detail__sound { right: 12px; }
  .detail__full { right: 56px; }
  .detail__full .ico,
  .detail__sound .ico { width: 16px; height: 16px; }
  .detail__play { bottom: 56px; }
}