/* ============================================================
   精选作品（js/featured.js）。照 leonardo.ai：一件一行，右边的卡片被斜线切开，一半是作品，一半是作品名的大字。
   --p：这一行跟着滚动走到哪（0 → 1）；--c：这件作品的颜色
   ============================================================ */
.feat {
  position: relative; background: var(--bg); color: var(--ink);
  padding: clamp(120px, 20vh, 220px) var(--gut) clamp(80px, 12vh, 140px);
  overflow-x: clip;
}

/* ---------- 开头：正中间一行「精选作品」 ---------- */
.ft-head { text-align: center; margin-bottom: clamp(90px, 16vh, 180px); }
.ft-h {
  display: inline-flex; gap: .04em;
  font-family: var(--font-zh-serif); font-weight: 900; font-size: clamp(64px, 11vw, 190px); line-height: 1; letter-spacing: .06em;
}
:lang(en) .ft-h { font-family: var(--font-en); text-transform: uppercase; letter-spacing: -.02em; }
.ft-h span { display: inline-block; opacity: 0; transform: translateY(.5em) scaleY(.4); transform-origin: 50% 100%; filter: blur(8px); }
.ft-head.is-in .ft-h span { opacity: 1; transform: none; filter: none; transition: opacity .7s var(--ease), transform 1s cubic-bezier(.34, 1.4, .64, 1), filter .7s var(--ease); transition-delay: calc(var(--i) * 90ms); }
.ft-hsub { margin-top: 20px; font-family: var(--font-en); font-weight: 500; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); opacity: 0; transition: opacity 1s var(--ease) .5s; }
:lang(en) .ft-hsub { font-family: var(--font-zh-serif); text-transform: none; letter-spacing: .2em; }
.ft-head.is-in .ft-hsub { opacity: 1; }

/* ---------- 一件一行 ---------- */
.ft-row {
  --p: 0;
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 110px); align-items: center;
  max-width: 1360px; margin: 0 auto;
}
.ft-row + .ft-row { margin-top: clamp(110px, 18vh, 200px); }

.ft-text { max-width: 30em; }
.ft-no { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; color: var(--c); }
.ft-no span { color: var(--ink-3); }
.ft-title { margin-top: 18px; font-family: var(--font-zh-serif); font-weight: 900; font-size: clamp(34px, 3.6vw, 60px); line-height: 1.1; letter-spacing: .02em; text-wrap: balance; }
:lang(en) .ft-title { font-family: var(--font-en); text-transform: uppercase; letter-spacing: -.02em; }
.ft-cat { margin-top: 12px; font-size: 13px; letter-spacing: .1em; color: var(--ink-2); }
.ft-lead { margin-top: 24px; font-size: 16px; line-height: 1.8; letter-spacing: .03em; color: color-mix(in srgb, var(--ink) 84%, transparent); }
.ft-btn {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; height: 50px; padding: 0 24px; border-radius: 999px;
  background: var(--ink); color: var(--bg); font-size: 15px; letter-spacing: .06em;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), background-color .3s var(--ease);
}
.ft-btn:hover { transform: translateY(-3px); background: var(--c); color: #111; }
.ft-btn i { font-style: normal; transition: transform .4s var(--ease); }
.ft-btn:hover i { transform: translateX(4px); }
.ft-text > * { opacity: 0; transform: translateY(26px); }
.ft-row.is-in .ft-text > * { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .9s var(--ease); }
.ft-row.is-in .ft-text > :nth-child(2) { transition-delay: .07s; } .ft-row.is-in .ft-text > :nth-child(3) { transition-delay: .14s; }
.ft-row.is-in .ft-text > :nth-child(4) { transition-delay: .21s; } .ft-row.is-in .ft-text > :nth-child(5) { transition-delay: .28s; }

/* ---------- 右边：卡片被斜线切开 ----------
   斜线左端在卡片高度的 --l%、右端在 --r%（不带单位的数，注册成可以过渡的数字）。
   三个状态：平时（还没进屏幕 / 退场之后）斜线在卡片最边上，作品是完整的一张；
   .is-word：斜线推进来，大字从卡片边上顶出来；.is-out：斜线退回边上，大字压扁消失，作品露出全貌。
   单数行字在下面，双数行（.is-top）字在上面。卡片的宽高比 --ar 就是作品本身的，图不裁。
   大字一个字一块（.ft-ch），按它在卡片里的横向位置 --x 单独拉高，正好从卡片边顶到斜线 */
@property --l { syntax: '<number>'; inherits: true; initial-value: 100; }
@property --r { syntax: '<number>'; inherits: true; initial-value: 100; }
@property --g { syntax: '<number>'; inherits: true; initial-value: 0; }
.ft-stage {
  --l: 100; --r: 100; --g: 0;
  position: relative; display: block; aspect-ratio: var(--ar, 1.5); color: inherit;
  transition: --l .9s cubic-bezier(.65, 0, .2, 1), --r .9s cubic-bezier(.65, 0, .2, 1), --g .9s cubic-bezier(.65, 0, .2, 1);
}
.ft-row.is-top .ft-stage { --l: 0; --r: 0; }
.ft-row.is-word .ft-stage { --l: 68; --r: 44; --g: 2.4; transition-duration: 1.1s; transition-timing-function: cubic-bezier(.2, 1.3, .4, 1); }
.ft-row.is-top.is-word .ft-stage { --l: 36; --r: 12; }
.ft-row.is-word.is-out .ft-stage { --l: 100; --r: 100; --g: 0; transition-duration: .85s; transition-timing-function: cubic-bezier(.7, 0, .25, 1); }
.ft-row.is-top.is-word.is-out .ft-stage { --l: 0; --r: 0; }
.ft-media {
  position: absolute; inset: 0; overflow: hidden; border-radius: clamp(20px, 2.4vw, 36px); background: #161616;
  clip-path: polygon(0 0, 100% 0, 100% calc(var(--r) * 1%), 0 calc(var(--l) * 1%));
}
.ft-row.is-top .ft-media { clip-path: polygon(0 calc((var(--l) + var(--g)) * 1%), 100% calc((var(--r) + var(--g)) * 1%), 100% 100%, 0 100%); }
.ft-media img, .ft-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: filter .5s var(--ease), transform 1.2s var(--ease);
}
.ft-row.is-word:not(.is-out) .ft-media img, .ft-row.is-word:not(.is-out) .ft-media video { transform: scale(1.05); }
.ft-stage:hover .ft-media img, .ft-stage:hover .ft-media video { filter: brightness(1.06) saturate(1.06); }

.ft-word {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  clip-path: polygon(0 calc((var(--l) + var(--g)) * 1%), 100% calc((var(--r) + var(--g)) * 1%), 100% 100%, 0 100%);
  display: flex; align-items: flex-end; justify-content: space-between;
}
.ft-row.is-top .ft-word { clip-path: polygon(0 0, 100% 0, 100% calc(var(--r) * 1%), 0 calc(var(--l) * 1%)); align-items: flex-start; }
.ft-ch {
  display: block; flex: none;
  font-family: var(--font-zh-serif); font-weight: 900; color: var(--c);
  font-size: calc(96cqw / var(--n)); line-height: .86; letter-spacing: 0;
  transform-origin: 50% 100%;
  /* 这个字所在的位置，斜线到卡片边还有多高（占卡片高度的百分之几），换算成字要拉多少倍：
     字高 = 0.86 × 96/n % 的卡片宽 = 0.86 × 96/n × ar % 的卡片高 */
  transform: scaleY(max(0, calc((100 - var(--l) - (var(--r) - var(--l)) * var(--x) - var(--g)) * var(--n) / (82.56 * var(--ar)) * 1.06)));
}
.ft-row.is-top .ft-ch { transform-origin: 50% 0; transform: scaleY(max(0, calc((var(--l) + (var(--r) - var(--l)) * var(--x)) * var(--n) / (82.56 * var(--ar)) * 1.06))); }
.ft-stage { container-type: inline-size; }
:lang(en) .ft-ch { font-family: var(--font-en); text-transform: uppercase; }

@media (max-width: 900px) {
  .ft-row { grid-template-columns: 1fr; gap: 28px; }
  .ft-stage { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-h span, .ft-text > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  .ft-hsub { opacity: 1; }
}

/* ---------- 2026-10-16 改：不要大字了，作品完整地放着；进屏幕时整张升上来，悬停轻轻放大 ---------- */
.ft-word { display: none !important; }
.ft-media, .ft-row.is-top .ft-media { clip-path: none !important; }
.ft-stage { opacity: 0; transform: translateY(48px) scale(.97); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.ft-row.is-in .ft-stage { opacity: 1; transform: none; }
.ft-media img, .ft-media video { transform: none !important; transition: transform 1.2s var(--ease), filter .5s var(--ease) !important; }
.ft-stage:hover .ft-media img, .ft-stage:hover .ft-media video { transform: scale(1.035) !important; }
.ft-h { font-size: clamp(44px, 6vw, 104px) !important; }
.ft-title { font-size: clamp(26px, 2.5vw, 42px) !important; }
.ft-lead { font-size: 15px !important; }
.ft-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) !important; gap: clamp(48px, 7vw, 130px) !important; max-width: 1280px !important; }
.ft-row + .ft-row { margin-top: clamp(140px, 22vh, 240px) !important; }
@media (prefers-reduced-motion: reduce) { .ft-stage { opacity: 1; transform: none; } }

/* ---------- 2026-10-16 再收一档：字再小一点，四周多留白 ---------- */
.feat { padding-top: clamp(140px, 22vh, 240px) !important; padding-bottom: clamp(120px, 18vh, 200px) !important; }
.ft-head { margin-bottom: clamp(110px, 18vh, 200px) !important; }
.ft-h { font-size: clamp(34px, 4vw, 66px) !important; letter-spacing: .12em !important; }
.ft-hsub { margin-top: 16px !important; font-size: 12px !important; }
.ft-row { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.1fr) !important; gap: clamp(56px, 8vw, 150px) !important; max-width: 1180px !important; }
.ft-row + .ft-row { margin-top: clamp(160px, 26vh, 280px) !important; }
.ft-text { max-width: 24em !important; }
.ft-title { margin-top: 14px !important; font-size: clamp(22px, 1.8vw, 30px) !important; line-height: 1.25 !important; }
.ft-cat { font-size: 12px !important; }
.ft-lead { margin-top: 20px !important; font-size: 14px !important; line-height: 1.9 !important; }
.ft-btn { height: 44px !important; padding: 0 20px !important; font-size: 14px !important; margin-top: 28px !important; }