/* ═══════════════════════════════════════════════════════
   赵翔宇 — 三维视觉设计师 / Portfolio 2026
   Design tokens first, layout second.
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   字体 — 全部自托管，不再依赖 Google Fonts
   中文按站点实际用字做了子集（约 677 字形），体积从 MB 级降到 400KB 内
   ═══════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Bodoni Moda';
  src: url('assets/fonts/bodoni-var.woff2') format('woff2-variations'),
       url('assets/fonts/bodoni-var.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('assets/fonts/instrument-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('assets/fonts/instrument-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-var.woff2') format('woff2-variations'),
       url('assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Serif SC';
  src: url('assets/fonts/noto-serif-sc-var.woff2') format('woff2-variations'),
       url('assets/fonts/noto-serif-sc-var.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans SC';
  src: url('assets/fonts/noto-sans-sc-var.woff2') format('woff2-variations'),
       url('assets/fonts/noto-sans-sc-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* surfaces */
  --bg:        #08090A;
  --bg-alt:    #0B0C0D;
  --surface:   #0E0F11;

  /* type */
  --text:      #EDEAE3;
  --text-2:    #8C8983;
  --text-3:    #8A867E;
  --text-4:    #706C65;
  --text-5:    #5C5952;

  /* lines */
  --line:      #1C1D20;
  --line-soft: #141518;

  /* accent — one only */
  --accent:    #C9B487;

  /* rhythm */
  --pad: clamp(24px, 6.95vw, 100px);
  --shell: 1440px;

  /* 媒体卡圆角：图片 / 视频 / 灯箱共用同一个值 */
  --media-radius: 8px;

  /* type stacks */
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --sans:  "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --ui:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --latin: "Instrument Serif", "Times New Roman", Georgia, serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }
svg  { display: block; }

a { color: inherit; }

a:focus-visible,
button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

::selection {
  background: rgba(201, 180, 135, .25);
  color: var(--text);
}

section[id],
footer[id] { scroll-margin-top: 96px; }

.skip-link {
  position: absolute;
  top: -100px;
  left: 24px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
  text-decoration: none;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 16px; }


/* ── 背景点阵 ─────────────────────────────────────────── */

.bg-dots {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
  pointer-events: none;
  transition: opacity 1.4s var(--ease);
}


/* ── 共用小件 ─────────────────────────────────────────── */

.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  color: var(--text-3);
}

.eyebrow b {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent);
}

.eyebrow em {
  font-style: normal;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-3);
}

.eyebrow--rule {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rule {
  display: block;
  width: 46px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

.rule--full {
  width: 100%;
  background: var(--line);
}

.body {
  margin: 0;
  max-width: 480px;
  font-size: 14px;
  line-height: 2.28;
  color: var(--text-2);
}


/* ── 导航 ─────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 9, 10, 0);
  transition: background .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s var(--ease);
}

.nav.is-scrolled {
  background: rgba(8, 9, 10, .74);
  border-bottom-color: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

.nav__inner {
  max-width: var(--shell);
  margin-inline: auto;
  height: 88px;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex: none;
}

.brand__mark { flex: none; }

.brand__name {
  font-family: 'Bodoni Moda', var(--latin);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: .012em;
  font-optical-sizing: auto;
  color: var(--text);
}

.brand__role {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.brand__role::before {
  content: "";
  display: block;
  width: 13px;
  height: 1px;
  background: var(--text-4);
}

.nav__links {
  display: flex;
  gap: 42px;
}

.nav__links a {
  position: relative;
  padding-bottom: 4px;
  font-size: 13.5px;
  letter-spacing: .08em;
  color: #B5B1A8;
  text-decoration: none;
  transition: color .3s var(--ease);
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width .45s var(--ease);
}

.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { width: 100%; }

.nav__status {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--text-2);
  white-space: nowrap;
}

/* 导航右侧：状态 + 声音开关 */
.nav__right {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex: none;
}

.snd {
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(237, 234, 227, .14);
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .2s var(--ease);
}

.snd:hover {
  color: var(--text);
  border-color: rgba(201, 180, 135, .55);
  background: rgba(237, 234, 227, .04);
}

.snd:active { transform: scale(.94); }

.snd:focus-visible {
  outline: 1px solid rgba(201, 180, 135, .8);
  outline-offset: 3px;
}

.snd .snd__on, .snd .snd__off { display: grid; place-items: center; }
.snd .snd__off { display: none; }
html[data-sound="off"] .snd .snd__on { display: none; }
html[data-sound="off"] .snd .snd__off { display: grid; }
html[data-sound="off"] .snd { color: var(--text-4); }

/* 音乐开关：沿用喇叭按钮的尺寸与描边 */
.snd--music .mus__on,
.snd--music .mus__off { display: grid; place-items: center; }
.snd--music .mus__off { display: none; }
html[data-music="off"] .snd--music .mus__on { display: none; }
html[data-music="off"] .snd--music .mus__off { display: grid; }
html[data-music="off"] .snd--music { color: var(--text-4); }

/* 播放中给个极轻的脉动，提示"有声音在走" */
@keyframes musPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
html[data-music="on"] .snd--music .mus__on { animation: musPulse 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html[data-music="on"] .snd--music .mus__on { animation: none; }
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: breathe 3.4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 180, 135, .35); }
  60%      { box-shadow: 0 0 0 7px rgba(201, 180, 135, 0); }
}

/* 导航状态哨兵：置于页面顶部，供 IntersectionObserver 判定是否滚过，避免 scroll 监听 */
.nav-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: -1;
}


/* ── 首屏 ─────────────────────────────────────────────── */

.hero {
  max-width: var(--shell);
  margin-inline: auto;
  min-height: 820px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 43.06%;
  align-items: stretch;
}

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  min-width: 0;
  padding: 0 clamp(24px, 3.9vw, 56px) 24px var(--pad);
}

.hero__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(56px, 8.6vw, 124px);
  line-height: 1.06;
  letter-spacing: .065em;
}

.hero__latin {
  margin: 0;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .45em;
  color: var(--accent);
}

.hero__desc {
  margin: 0;
  max-width: 524px;
  font-size: 15.5px;
  line-height: 1.92;
  color: var(--text-2);
  text-wrap: pretty;
}

.hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 28px;
  max-width: 470px;
  margin: -14px 0 6px;
}

.hero__facts > div {
  display: flex;
  align-items: baseline;
  gap: 11px;
  min-width: 0;
}

.hero__facts dt {
  flex: none;
  width: 4.7em;
  font-family: var(--ui);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: .05em;
  color: #948F85;
}

.hero__facts dd {
  margin: 0;
  min-width: 0;
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .02em;
  color: #CFCBC0;
  font-variant-numeric: tabular-nums;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 34px;
  border-radius: 999px;
  font-size: 13.5px;
  letter-spacing: .11em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}

.btn--primary {
  background: var(--text);
  color: var(--bg);
  font-weight: 500;
}

.btn--primary:hover {
  background: #FFFFFF;
  transform: translateY(-1px);
}

.btn--ghost {
  padding-inline: 26px;
  border: 1px solid rgba(255, 255, 255, .14);
  color: #B5B1A8;
}

.btn--ghost:hover {
  border-color: rgba(255, 255, 255, .32);
  color: var(--text);
  background: rgba(255, 255, 255, .03);
}

.btn--ghost svg { transition: transform .35s var(--ease); }
.btn--ghost:hover svg { transform: translate(2px, -2px); }

/* ── 查看作品 · 分类弹层 ───────────────────────────────── */

.cta {
  position: relative;
  display: inline-flex;
}

.cta__caret {
  margin-left: -2px;
  transition: transform .38s var(--ease);
}

.cta.is-open .cta__caret { transform: rotate(180deg); }

.cta__menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 14px);
  z-index: 40;
  width: 274px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  background: #0B0C0E;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .62), 0 0 0 1px rgba(0, 0, 0, .3) inset;
  transform-origin: bottom left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(.975);
  transition: opacity .34s var(--ease), transform .34s var(--ease),
              visibility 0s linear .34s;
}

.cta.is-open .cta__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .34s var(--ease), transform .34s var(--ease),
              visibility 0s;
}

.cta.is-down .cta__menu {
  bottom: auto;
  top: calc(100% + 14px);
  transform-origin: top left;
}

.cta.is-down:not(.is-open) .cta__menu { transform: translateY(-10px) scale(.975); }

.cta__item {
  display: grid;
  grid-template-columns: 22px 1fr auto 14px;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 10px;
  color: #C2BDB2;
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease),
              background .3s var(--ease), color .3s var(--ease);
}

.cta.is-open .cta__item { opacity: 1; transform: none; }
.cta.is-open .cta__item:nth-child(1) { transition-delay: .05s; }
.cta.is-open .cta__item:nth-child(2) { transition-delay: .1s; }
.cta.is-open .cta__item:nth-child(3) { transition-delay: .15s; }

.cta__item:hover,
.cta__item:focus-visible {
  background: rgba(255, 255, 255, .055);
  color: var(--text);
  outline: none;
}

.cta__num {
  font-family: var(--ui);
  font-style: normal;
  font-size: 10px;
  letter-spacing: .12em;
  color: #6B675F;
}

.cta__cn { font-size: 14.5px; letter-spacing: .02em; }

.cta__en {
  font-family: var(--ui);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6B675F;
}

.cta__item > svg {
  color: var(--accent);
  opacity: .3;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.cta__item:hover > svg,
.cta__item:focus-visible > svg { opacity: 1; transform: translate(1px, -1px); }

.hero__tools {
  margin: 0;
  font-family: var(--ui);
  font-size: 10.5px;
  letter-spacing: .17em;
  color: var(--text-4);
  overflow-wrap: break-word;
}

.hero__visual {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-left: 1px solid var(--line-soft);
}

/* 绝对定位，避免图片自身高度撑高网格行 */
.hero__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  display: block;
}


/* ── 个人资料卡 ───────────────────────────────────────── */

.hero__visual--card {
  background: none;
  border-left: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-card {
  --pc-light-x: 50%;
  --pc-light-y: 50%;
  --pc-pointer-x: 50%;
  --pc-pointer-y: 50%;
  --pc-band-x: 50%;
  --pc-band-y: 50%;
  --pc-reach: 0;
  --pc-rotate-x: 0deg;
  --pc-rotate-y: 0deg;
  --pc-shift-x: 0px;
  --pc-shift-y: 0px;
  --pc-tilt: 0;
  --pc-active: 0;
  --pc-radius: 14px;
  --pc-frame: rgba(20, 22, 25, .72);
  --pc-frame-edge: rgba(237, 234, 227, .09);
  --pc-frame-highlight: rgba(255, 255, 255, .06);
  --pc-frame-shadow: 0 30px 56px -24px rgba(0, 0, 0, .95), 0 8px 20px -10px rgba(0, 0, 0, .65);
  --pc-tile: linear-gradient(180deg, #1b1e22 0%, #131519 100%);
  --pc-tile-edge: rgba(237, 234, 227, .08);
  --pc-tile-highlight: rgba(255, 255, 255, .1);
  --pc-tile-shadow: 0 4px 12px -6px rgba(0, 0, 0, .8);
  --pc-ink: #EDEAE3;
  --pc-muted: rgba(237, 234, 227, .55);
  --pc-hover: brightness(1.1);
  --pc-press: brightness(.85);
  --pc-shade: rgba(0, 0, 0, .45);
  --pc-blend: color-dodge;
  --pc-holo-filter: hue-rotate(0deg);
  --pc-sheen: rgba(255, 255, 255, .13);
  --pc-holo: .5;
  --pc-glare: .42;
  --pc-parallax: 7px;
  --pc-status: var(--accent);
  --pc-holo-gain: .75;
  --pc-holo-detail: 0;
  --pc-pattern: linear-gradient(#000, #000);
  --pc-pattern-size: 100% 100%;

  position: relative;
  width: 100%;
  max-width: 408px;
  perspective: 1000px;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.profile-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: calc(var(--pc-radius) + 10px);
  background: var(--pc-frame);
  box-shadow: var(--pc-frame-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  transform: rotateX(var(--pc-rotate-x)) rotateY(var(--pc-rotate-y));
  will-change: transform;
}

.profile-card__tile {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--pc-radius);
  background: var(--pc-tile);
  box-shadow: var(--pc-tile-shadow);
  overflow: hidden;
  isolation: isolate;
}

.profile-card__sheen,
.profile-card__holo,
.profile-card__scrim,
.profile-card__tile-rim,
.profile-card__glare,
.profile-card__shade,
.profile-card__rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.profile-card__sheen {
  background: radial-gradient(
    farthest-corner circle at calc(var(--pc-light-x) - 10px) calc(var(--pc-light-y) - 10px),
    var(--pc-sheen) 0%,
    transparent 55%
  );
  opacity: calc(var(--pc-holo) * var(--pc-active));
}

.profile-card__holo {
  --pc-spectrum: repeating-linear-gradient(
    0deg,
    hsl(2, 100%, 73%) 5%,
    hsl(53, 100%, 69%) 10%,
    hsl(93, 100%, 69%) 15%,
    hsl(176, 100%, 76%) 20%,
    hsl(228, 100%, 74%) 25%,
    hsl(260, 100%, 76%) 30%,
    hsl(2, 100%, 73%) 35%
  );
  --pc-bars: repeating-linear-gradient(
    -45deg,
    #0e152e 0%,
    hsl(180, 10%, 60%) 3.8%,
    hsl(180, 29%, 66%) 4.5%,
    hsl(180, 10%, 60%) 5.2%,
    #0e152e 10%,
    #0e152e 12%
  );
  --pc-falloff: radial-gradient(
    farthest-corner circle at var(--pc-pointer-x) var(--pc-pointer-y),
    hsla(0, 0%, 0%, .1) 12%,
    hsla(0, 0%, 0%, .15) 20%,
    hsla(0, 0%, 0%, .25) 120%
  );
  background-image: var(--pc-spectrum), var(--pc-bars), var(--pc-falloff);
  background-position:
    0 var(--pc-band-y),
    var(--pc-band-x) var(--pc-band-y),
    center;
  background-size:
    500% 500%,
    300% 300%,
    200% 200%;
  background-blend-mode: color, hard-light;
  mix-blend-mode: var(--pc-blend);
  filter: brightness(calc(.66 + .19 * var(--pc-active)))
    contrast(calc(1.33 + .17 * var(--pc-active)))
    saturate(calc(.33 + .17 * var(--pc-active)))
    var(--pc-holo-filter);
  opacity: calc(var(--pc-holo) * var(--pc-holo-gain) * (.5 + .5 * var(--pc-active)));
  -webkit-mask-image: var(--pc-pattern);
  -webkit-mask-size: var(--pc-pattern-size);
  -webkit-mask-position: calc(50% - var(--pc-shift-x) * 1.5) calc(65% - var(--pc-shift-y) * 1.5);
  -webkit-mask-repeat: repeat;
  mask-image: var(--pc-pattern);
  mask-size: var(--pc-pattern-size);
  mask-position: calc(50% - var(--pc-shift-x) * 1.5) calc(65% - var(--pc-shift-y) * 1.5);
  mask-repeat: repeat;
}

/* 照片做成卡片内的一张小像，四周留出卡面底色 */
.profile-card__frame {
  position: absolute;
  inset: 6.8% 11.8% 18.4%;
  overflow: hidden;
  border-radius: 2px;
  background: #0B0C0E;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(255, 255, 255, .07) inset;
}

.profile-card__photo {
  position: absolute;
  inset: calc(var(--pc-parallax) * -1);
  width: calc(100% + var(--pc-parallax) * 2);
  height: calc(100% + var(--pc-parallax) * 2);
  object-fit: cover;
  object-position: center bottom;
  transform: translate3d(var(--pc-shift-x), var(--pc-shift-y), 0);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.profile-card__scrim {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, .62) 0%,
    rgba(0, 0, 0, .57) 6%,
    rgba(0, 0, 0, .5) 12%,
    rgba(0, 0, 0, .4) 19%,
    rgba(0, 0, 0, .28) 26%,
    rgba(0, 0, 0, .16) 33%,
    rgba(0, 0, 0, .07) 40%,
    rgba(0, 0, 0, .02) 46%,
    rgba(0, 0, 0, 0) 52%
  );
}

.profile-card__info {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  color: #fff;
}

.profile-card__name {
  margin: 0;
  font-family: var(--ui);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .17em;
  color: #fff;
}

.profile-card__title {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .76);
}

.profile-card__tile-rim {
  box-shadow:
    inset 0 0 0 1px var(--pc-tile-edge),
    inset 0 1px 0 var(--pc-tile-highlight);
}

.profile-card__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 6px 12px 8px;
}

.profile-card__meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.profile-card__handle {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--pc-ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.profile-card__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--pc-muted);
  white-space: nowrap;
}

.profile-card__status::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pc-status);
}

.profile-card__contact {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: calc(var(--pc-radius) * .75);
  background: var(--pc-tile);
  box-shadow:
    inset 0 0 0 1px var(--pc-tile-edge),
    inset 0 1px 0 var(--pc-tile-highlight),
    var(--pc-tile-shadow);
  color: var(--pc-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: filter .2s ease, transform .2s ease;
}

.profile-card__contact:active {
  filter: var(--pc-press);
  transform: scale(.96);
  transition-duration: 0s;
}

.profile-card__contact:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.profile-card__glare {
  background: radial-gradient(
    farthest-corner circle at var(--pc-light-x) var(--pc-light-y),
    rgba(255, 255, 255, .75) 0%,
    rgba(255, 255, 255, .32) 20%,
    rgba(255, 255, 255, 0) 60%
  );
  mix-blend-mode: overlay;
  opacity: calc(var(--pc-glare) * var(--pc-active));
}

.profile-card__shade {
  background: radial-gradient(
    farthest-corner circle at var(--pc-light-x) var(--pc-light-y),
    transparent 30%,
    var(--pc-shade) 100%
  );
  opacity: calc(var(--pc-glare) * var(--pc-tilt));
}

.profile-card__rim {
  box-shadow:
    inset 0 0 0 1px var(--pc-frame-edge),
    inset 0 1px 0 var(--pc-frame-highlight);
}

@media (hover: hover) {
  .profile-card__contact:hover { filter: var(--pc-hover); }
}


/* ── 精选作品 ─────────────────────────────────────────── */

.works {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 128px var(--pad) 56px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.section-head__left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section-head__title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(30px, 2.64vw, 38px);
  line-height: 1.12;
  letter-spacing: -.01em;
}

.section-head__meta {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--text-3);
  text-align: right;
  white-space: nowrap;
}

.work {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.work__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  background: var(--surface);
}

.work__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease), filter .6s var(--ease);
  filter: saturate(.94);
}

.work:hover .work__media img {
  transform: scale(1.022);
  filter: saturate(1);
}

.work__media--featured { aspect-ratio: 1240 / 604; }
.work__media--half     { aspect-ratio: 604 / 500; }
.work__media--split    { aspect-ratio: 848 / 486; }

.work__caption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.work__caption > div { min-width: 0; }

.work__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: .083em;
  color: var(--text);
}

.work__title--sm {
  font-size: 21px;
  letter-spacing: .07em;
}

.work__title--lg {
  font-weight: 300;
  font-size: 34px;
  line-height: 1.24;
  letter-spacing: .09em;
}

.work__meta {
  margin: 9px 0 0;
  font-size: 12.5px;
  letter-spacing: .11em;
  color: var(--text-3);
}

.work__index {
  flex: none;
  padding-top: 5px;
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: .13em;
  color: var(--text-4);
  transition: color .35s var(--ease);
}

.work--featured .work__index { color: var(--accent); }
.work:hover .work__index { color: var(--accent); }

.works__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* 作品网格：1920×1080 比例的宽幅卡片，三列 */
.works__grid4 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
}

.tile__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--media-radius);
  background: #000;                 /* 非 16:9 原图留出的黑边 */
}

.tile__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;              /* 保留原比例，不裁切 */
  display: block;
  transform: scale(1.002);          /* 微量起始缩放，保证过渡走合成层 */
  transform-origin: center center;
  filter: saturate(.94);
  transition:
    transform .85s cubic-bezier(.22, 1, .36, 1),
    filter .7s var(--ease),
    opacity .55s var(--ease);
}

.tile:hover .tile__media img,
.tile__media:focus-visible img {
  transform: scale(1.035);          /* 只放 3.5%，尽量不裁掉原图边缘 */
  filter: saturate(1.02) brightness(1.03);
  will-change: transform;
}

.tile__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  cursor: pointer;
  filter: saturate(.98);
  transition: filter .6s var(--ease);
}

.tile:hover .tile__video {
  filter: saturate(1.02) brightness(1.03);
}

/* 项目集角标：非单张作品，点开还有子图 */
.tile__set {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid rgba(201, 180, 135, .38);
  background: rgba(8, 9, 10, .7);
  color: var(--accent);
  opacity: .9;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}

.tile:hover .tile__set {
  opacity: 1;
  background: rgba(8, 9, 10, .78);
  border-color: rgba(201, 180, 135, .58);
}

/* 动态图块角标：这一格是视频，不是静帧 */
.tile__play {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid rgba(201, 180, 135, .38);
  background: rgba(8, 9, 10, .7);
  color: var(--accent);
  opacity: .9;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}

.tile:hover .tile__play {
  opacity: 1;
  background: rgba(8, 9, 10, .78);
  border-color: rgba(201, 180, 135, .58);
}

.tile__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 26px 13px 11px;
  background: linear-gradient(to top, rgba(8, 9, 10, .88), rgba(8, 9, 10, 0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s var(--ease) .06s, transform .45s var(--ease) .06s;
}

.tile:hover .tile__cap,
.tile__media:focus-visible .tile__cap {
  opacity: 1;
  transform: none;
}

.tile__title {
  min-width: 0;
  font-family: var(--serif);
  font-size: 13.5px;
  letter-spacing: .05em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile__no {
  flex: none;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--accent);
}

@media (hover: none) {
  .tile__cap { opacity: 1; transform: none; }
  .film__caption { opacity: 1; transform: none; }
  .tile:hover .tile__media img { transform: scale(1.002); filter: saturate(.94); }
}

/* 占位图压暗，让真实作品先跳出来；全部替换完后删掉这两条即可 */
.tile.is-ph .tile__media img { opacity: .34; }
.tile.is-ph:hover .tile__media img { opacity: .7; }
.work.is-ph .work__media img { opacity: .55; }
.work.is-ph:hover .work__media img { opacity: .8; }

.work--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  align-items: center;
  gap: 44px;
}

.work__info {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.work__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--text-2);
}

.work__tags {
  margin: 0;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--text-4);
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  font-size: 13px;
  letter-spacing: .11em;
  color: var(--text);
  text-decoration: none;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}

.link:hover { border-bottom-color: rgba(201, 180, 135, .55); }
.link svg { transition: transform .4s var(--ease); }
.link:hover svg { transform: translateX(3px); }


/* ── 影像 ─────────────────────────────────────────────── */

.motion {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 48px var(--pad) 64px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.motion__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.film {
  display: block;
}

.film__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--media-radius);
  background: #000;
  cursor: pointer;
}

.film__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.94);
  transition: filter .6s var(--ease);
}

.film:hover .film__media video,
.film.is-playing .film__media video {
  filter: saturate(1);
}

/* 键盘聚焦时给一个描边，卡片本身没有边线 */
.film__media:focus-visible {
  outline: 1px solid rgba(201, 180, 135, .78);
  outline-offset: 3px;
}

/* 播放角标：位置与规格对齐作品卡右上角的项目集角标 */
.film__badge {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid rgba(201, 180, 135, .38);
  background: rgba(8, 9, 10, .7);
  color: var(--accent);
  opacity: .9;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}

.film:hover .film__badge {
  opacity: 1;
  background: rgba(8, 9, 10, .78);
  border-color: rgba(201, 180, 135, .58);
}

/* 合集角标：这一段还挂着几段小片，放左上角，不跟播放角标打架 */
.film__set {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 8px 0 7px;
  border-radius: 5px;
  border: 1px solid rgba(201, 180, 135, .38);
  background: rgba(8, 9, 10, .7);
  color: var(--accent);
  font-family: var(--ui);
  font-size: 10.5px;
  letter-spacing: .1em;
  opacity: .92;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}

.film__setno { font-variant-numeric: tabular-nums; }

.film:hover .film__set {
  opacity: 1;
  background: rgba(8, 9, 10, .78);
  border-color: rgba(201, 180, 135, .58);
}



/* 说明行压在画面底部，参数与作品卡的 .tile__cap 完全一致 */
.film__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 34px 13px 11px;
  /* 视频画面多是满幅亮色，压暗层要比作品卡更实，文字才立得住 */
  background: linear-gradient(to top,
    rgba(8, 9, 10, .92) 0%,
    rgba(8, 9, 10, .8) 46%,
    rgba(8, 9, 10, 0) 100%);
  /* 与作品卡完全同一套出场：淡入 + 上移 6px */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s var(--ease) .06s, transform .45s var(--ease) .06s;
  pointer-events: none;
}

.film:hover .film__caption,
.film__media:focus-visible .film__caption {
  opacity: 1;
  transform: none;
}

.film__title {
  margin: 0;
  min-width: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 13.5px;
  letter-spacing: .05em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.film__no {
  flex: none;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}


/* ── 关于我 ───────────────────────────────────────────── */

.about {
  position: relative;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 132px var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  gap: 96px;
}

/* 微妙的分区底色，铺满整条视口宽度 */
.about::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--bg-alt);
  z-index: 0;
}

.about__text,
.about__visual { position: relative; z-index: 1; }

.about__text {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.about__statement {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 2.78vw, 40px);
  line-height: 1.55;
  letter-spacing: .025em;
}

.timeline {
  list-style: none;
  width: 100%;
  max-width: 500px;
  margin: 8px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.timeline li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
}

.timeline__year {
  flex: none;
  font-family: var(--ui);
  font-size: 11.5px;
  letter-spacing: .09em;
  color: var(--text-3);
}

.timeline__year--now { color: var(--accent); }

.timeline__role {
  font-size: 13px;
  letter-spacing: .03em;
  color: #9A968E;
  text-align: right;
}

.timeline__role--now { color: #B5B1A8; }

.about__visual {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about__visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 380 / 474;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  background: var(--surface);
  filter: saturate(.92);
}

.about__visual figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11.5px;
  letter-spacing: .09em;
  color: var(--text-3);
}

.about__visual figcaption span:last-child { color: var(--text-5); }


/* ── 页脚 ─────────────────────────────────────────────── */

.footer {
  position: relative;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 var(--pad) 40px;
  overflow: hidden;                 /* 环从右侧出血时在此裁断 */
}

.footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: center;
  gap: 48px;
  padding: 92px 0 84px;
  border-top: 1px solid var(--line);
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.footer__headline {
  margin: 0;
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(36px, 4.3vw, 62px);
  line-height: 1.2;
  letter-spacing: -.01em;
}

.footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.contact-line {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  width: fit-content;
  padding-bottom: 10px;
  border-bottom: 1px solid #34322D;
  font-family: var(--ui);
  font-size: 20px;
  letter-spacing: .04em;
  color: #C3BEB3;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}

.contact-line__label {
  min-width: 50px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  letter-spacing: .06em;
  color: #7E7A72;
  transition: color .4s var(--ease);
}

.contact-line:hover { color: var(--text); border-bottom-color: var(--accent); }
.contact-line:hover .contact-line__label { color: var(--accent); }
.contact-line svg { flex: none; align-self: center; transition: transform .4s var(--ease); }
.contact-line:hover svg { transform: translate(2px, -2px); }

/* 装饰环铺满页脚右侧，压在文字之下 */
.footer__mark {
  position: absolute;
  top: 44%;
  right: -7%;
  z-index: 0;
  width: clamp(520px, 62vw, 940px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
  /* 上下淡出，环被页脚边缘裁断时不会出现硬直线 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

.footer__contact,
.footer__cols,
.footer__bottom {
  position: relative;
  z-index: 1;
}

/* 页脚粒子签名：一段英文用粒子聚合成形 */
.footer__signature {
  position: relative;
  z-index: 1;
  margin: 0 0 26px;
}

.footer__signature-field {
  position: relative;
  height: 152px;
  font-family: var(--serif);
  font-size: 74px;
  line-height: 1;
  color: #67635B;                   /* 粒子基色：压暗，靠金色高光提神 */
}

.footer__signature-field .particle-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.footer__mark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 线宽不随尺寸变化，放大后仍是原来的发丝线 */
.footer__mark svg * { vector-effect: non-scaling-stroke; }

/* 装饰环的几层极慢转动：静止时也像在呼吸 */
.footer__mark .mark__rot,
.footer__mark .mark__orbit {
  transform-box: view-box;
  transform-origin: 50% 50%;
  will-change: transform;
}

.mark__rot--slow   { animation: markSpin 240s linear infinite; }
.mark__rot--rev    { animation: markSpinRev 200s linear infinite; }
.mark__rot--rev2   { animation: markSpinRev 160s linear infinite; }
.mark__rot--arcs   { animation: markSpin 120s linear infinite; }
.mark__rot--gold   { animation: markSpin 48s linear infinite; }
.mark__rot--hand   { animation: markSpin 80s linear infinite; }
.mark__orbit       { animation: markSpin 28s linear infinite; }
.mark__orbit--outer{ animation: markSpinRev 72s linear infinite; }
.mark__pulse       { animation: markPulse 9s ease-in-out infinite; }

@keyframes markSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes markSpinRev {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes markPulse {
  0%, 100% { stroke-opacity: .1; }
  50%      { stroke-opacity: .26; }
}

@media (prefers-reduced-motion: reduce) {
  .footer__mark .mark__rot,
  .footer__mark .mark__orbit,
  .footer__mark .mark__pulse { animation: none; }
}

.footer__cols {
  display: flex;
  align-items: flex-start;
  padding-bottom: 64px;
}

.footer__brand {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer__tagline {
  margin: 0;
  max-width: 560px;
  font-size: 14px;
  line-height: 2;
  letter-spacing: .04em;
  color: #7E7A72;
  text-wrap: pretty;
}

.footer__col {
  flex: none;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__col-title {
  margin: 0;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .23em;
  color: var(--text-5);
}

.footer__col a {
  width: fit-content;
  font-size: 12.5px;
  letter-spacing: .08em;
  color: #9A968E;
  text-decoration: none;
  transition: color .3s var(--ease);
}

.footer__col a:hover { color: var(--text); }

/* 纯文本项（QQ 号），与链接行同字号同色 */
.footer__col-item {
  margin: 0;
  width: fit-content;
  font-family: var(--ui);
  font-size: 12.5px;
  letter-spacing: .08em;
  color: #9A968E;
  font-variant-numeric: tabular-nums;
}

.footer__col a { font-variant-numeric: tabular-nums; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: .09em;
  color: var(--text-5);
}

.footer__bottom p { margin: 0; }


/* ── 首页两个入口 ─────────────────────────────────────── */

.hero__title--name {
  position: relative;
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(46px, 6vw, 86px);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.hero__title.is-tech .hero__title-text {
  visibility: hidden;
}

.hero__title.is-tech .tech-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.timeline--cv {
  max-width: 500px;
  margin: 0;
}

.cv-label {
  margin: 6px 0 -10px;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-4);
}

.timeline--cv li {
  align-items: baseline;
  padding: 13px 0;
}

.timeline--cv .timeline__year { color: #8A867E; }
.timeline--cv .timeline__year--now { color: var(--accent); }

.timeline__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  text-align: right;
}

.timeline--cv .timeline__role { font-size: 12.5px; color: #B0ACA3; }
.timeline--cv .timeline__role--now { color: #C6C2B8; }

.timeline__desc {
  font-family: var(--ui);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: .02em;
  color: var(--text-4);
}

.entry {
  max-width: var(--shell);
  margin: 104px auto 0;
  padding-inline: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.entry:last-of-type { margin-bottom: 96px; }

.entry-card {
  position: relative;
  display: block;
  border-radius: 2px;
  overflow: hidden;
  background: var(--surface);
  text-decoration: none;
}

.entry-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface);
  /* 独立层叠上下文，保证 hover 放大时圆角裁剪不出血 */
  isolation: isolate;
}

.entry-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.95);
  transition: filter .6s var(--ease);
}

/* 封面缓动：15 秒一次推进，缓慢但看得出在动 */
@keyframes coverBreath {
  from { scale: 1.035; translate: 0.8% 1%; }
  to   { scale: 1.11; translate: -1% -2.4%; }
}

@keyframes coverDrift {
  from { scale: 1.11; translate: -0.8% -2.2%; }
  to   { scale: 1.035; translate: 0.6% 0.9%; }
}

.entry-card__media img {
  animation: coverBreath 15s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

#motion .entry-card__media img {
  animation-name: coverDrift;
  animation-duration: 18s;
  animation-delay: -6s;
}

.entry-card:hover .entry-card__media img {
  filter: saturate(1.04) brightness(1.04);
}

.entry-card.is-empty .entry-card__media img { opacity: .45; }

.entry-card__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 13.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  pointer-events: none;
  text-align: center;
}

.entry-card__en {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--accent);
}

.entry-card__cn {
  font-family: var(--sans);
  font-size: clamp(22px, 3vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .07em;
  text-indent: .07em;
  color: #FFFFFF;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .55);
}

.entry-card__pill {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(8, 9, 10, .55);
  box-shadow:
    inset 0 0 0 1px rgba(237, 234, 227, .15),
    0 12px 30px -16px rgba(0, 0, 0, .95);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  backdrop-filter: blur(12px) saturate(1.05);
  color: #F2EFE8;
  transition: background .45s var(--ease), box-shadow .45s var(--ease),
              color .45s var(--ease), transform .45s var(--ease);
}

/* 会自转的光环：一段从透明渐亮到实金、带拖尾的弧，绕圈转 */
.entry-card__pill-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(232, 212, 170, 0) 0deg,
    rgba(232, 212, 170, .05) 60deg,
    rgba(232, 212, 170, .16) 150deg,
    rgba(232, 212, 170, .42) 264deg,
    rgba(236, 216, 175, .95) 340deg,
    rgba(255, 248, 231, 1) 355deg,
    rgba(232, 212, 170, 0) 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.2px));
  opacity: .92;
  pointer-events: none;
  transition: opacity .45s var(--ease);
}

.entry-card__pill-arrow {
  position: relative;
  z-index: 2;
  display: block;
  transition: transform .45s var(--ease);
}

.entry-card:hover .entry-card__pill,
.entry-card:focus-visible .entry-card__pill {
  background: rgba(201, 180, 135, .26);
  box-shadow:
    inset 0 0 0 1px rgba(232, 212, 170, .58),
    inset 0 0 22px rgba(201, 180, 135, .22),
    0 14px 34px -16px rgba(0, 0, 0, .95);
  color: #FFF7E6;
  transform: scale(1.06);
}

.entry-card:hover .entry-card__pill-ring,
.entry-card:focus-visible .entry-card__pill-ring {
  opacity: 1;
}

.entry-card:hover .entry-card__pill-arrow,
.entry-card:focus-visible .entry-card__pill-arrow {
  transform: translateX(3px);
}

.entry-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(8, 9, 10, .34);
  border: 1px solid rgba(237, 234, 227, .2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text);
  transition: transform .4s var(--ease), background .4s var(--ease);
  pointer-events: none;
}

.entry-card:hover .entry-card__play {
  transform: scale(1.08);
  background: rgba(8, 9, 10, .72);
}


/* ── 子页面（works.html / films.html） ────────────────── */

.page {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 64px var(--pad) 120px;
}

.page__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 48px;
}

.page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--text-3);
  text-decoration: none;
  transition: color .3s var(--ease);
}

.page__back:hover { color: var(--text); }

.page__title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(34px, 3.4vw, 50px);
  line-height: 1.12;
  letter-spacing: -.01em;
}

.page__meta {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--text-3);
}

.page__body {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.page-foot {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 26px var(--pad) 44px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 11.5px;
  letter-spacing: .09em;
  color: var(--text-5);
}

.page-foot p { margin: 0; }

.page-foot a {
  color: var(--text-3);
  text-decoration: none;
  transition: color .3s var(--ease);
}

.page-foot a:hover { color: var(--text); }

.empty-state {
  padding: 110px 0;
  text-align: center;
  font-size: 14px;
  line-height: 2.2;
  color: var(--text-3);
}


/* ── 入场动效 ─────────────────────────────────────────── */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
  will-change: opacity, transform;
}

html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .work__media img,
  .btn,
  .link svg,
  .contact-line svg { transition: none; }
  .dot { animation: none; }
  .tile__media img { transition: none; }
  .tile:hover .tile__media img { transform: scale(1.002); filter: saturate(.94); }
  .entry-card__media img { animation: none; scale: 1.03; translate: 0 0; }
  .entry-card__video { display: none; }
}


/* ── 响应式 ───────────────────────────────────────────── */

@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr) 42%; }

  /* 左栏变窄后正文多挤不下一字，缩 0.5px 换掉行尾孤字 */
  .hero__desc { font-size: 15px; }

  .brand__role { display: none; }

  .motion__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .works__grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

  .about {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
  }

  .footer__main { grid-template-columns: minmax(0, 1fr) 300px; }
  .footer__col { width: 160px; }
}

/* 窄屏：状态文字让位，只留声音开关，避免顶到边 */
@media (max-width: 600px) {
  .nav__status { display: none; }
}

@media (max-width: 880px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hero__content {
    padding: 76px var(--pad) 64px;
    gap: 24px;
  }

  .hero__visual {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
    height: 70vh;
    min-height: 380px;
    max-height: 620px;
  }

  .works {
    padding-top: 96px;
    gap: 48px;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .section-head__meta { text-align: left; }

  .works__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .motion__grid { grid-template-columns: 1fr; gap: 40px; }
  .motion { padding-top: 8px; padding-bottom: 48px; }

  .works__grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

  /* 窄屏下让主图更有存在感，避免长条太薄 */
  .work__media--featured { aspect-ratio: 3 / 2; }
  .work__media--split    { aspect-ratio: 3 / 2; }

  .work--split {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .work__info { gap: 18px; }

  .about {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 96px var(--pad);
  }

  .about__visual { max-width: 420px; }

  .footer__main {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 72px 0 60px;
  }

  .footer__mark { display: none; }

  .footer__signature { margin-bottom: 20px; }
  .footer__signature-field { height: 76px; font-size: 32px; }

  .footer__cols {
    flex-direction: column;
    gap: 36px;
    padding-bottom: 48px;
  }

  .footer__col { width: 100%; }

  .entry { margin-top: 72px; gap: 32px; }
  .entry:last-of-type { margin-bottom: 64px; }
  .entry-card__pill { right: 16px; bottom: 16px; width: 58px; height: 58px; }
  .entry-card__pill-arrow { width: 14px; height: 14px; }
  .entry-card__caption { bottom: 21%; gap: 9px; }
  .entry-card__en { font-size: 9.5px; letter-spacing: .3em; text-indent: .3em; }
  .entry-card__play { width: 44px; height: 44px; margin: -22px 0 0 -22px; }

  .page { padding: 48px var(--pad) 80px; }
  .page__head { padding-bottom: 32px; margin-bottom: 32px; }
}

@media (max-width: 560px) {
  .nav__inner { height: 72px; }
  .nav__links { display: none; }
  .nav__status { font-size: 10.5px; letter-spacing: .06em; }
  .nav__right { gap: 10px; }

  .hero__title { letter-spacing: .05em; }
  .hero__desc { font-size: 15px; line-height: 1.95; }
  .hero__tools { font-size: 9.5px; letter-spacing: .12em; }

  .btn { padding: 14px 24px; font-size: 13px; }

  .works { padding-top: 80px; }
  .works__grid4 { grid-template-columns: 1fr; gap: 12px; }
  .tile__title { font-size: 12px; }
  .work__media--featured { aspect-ratio: 4 / 3; }
  .work__media--split    { aspect-ratio: 4 / 3; }
  .work__title { font-size: 20px; }
  .work__title--sm { font-size: 18px; }
  .work__title--lg { font-size: 28px; }
  .work__caption { gap: 16px; }
  .work__index { font-size: 11px; }

  .timeline li {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 16px 0;
  }

  .timeline__role { text-align: left; }

  .contact-line { font-size: 16px; padding-bottom: 8px; gap: 10px; }
  .contact-line__label { font-size: 11px; min-width: 44px; }

  .hero__title--name { font-size: clamp(40px, 10vw, 52px); letter-spacing: -.01em; }
  .timeline--cv .timeline__role { font-size: 12px; }
  .entry-card__pill { right: 12px; bottom: 12px; width: 52px; height: 52px; }
  .entry-card__play { width: 44px; height: 44px; margin: -22px 0 0 -22px; }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ── 动效：初始态与兜底 ─────────────────────────────── */

html.gsap-on [data-reveal] {
  transition: none;
}

html.no-motion [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

/* 给视差留出余量，避免移动时露出边缘 */
.entry-card__media img {
  top: -6%;
  bottom: -6%;
  height: auto;
}

/* 动态封面：视频自己会动，不再叠加呼吸动画 */
.entry-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.98);
  transition: filter .6s var(--ease);
}

.entry-card:hover .entry-card__video {
  filter: saturate(1.04) brightness(1.04);
}

/* 栏目英文水印：大幅进场，压在标题后面 */
.section-head {
  position: relative;
  isolation: isolate;
}

.section-head > *:not(.ghost) {
  position: relative;
  z-index: 1;
}

.ghost {
  position: absolute;
  left: -0.06em;
  top: -0.52em;
  z-index: 0;
  font-family: var(--ui);
  font-size: clamp(64px, 9.4vw, 132px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  color: rgba(237, 234, 227, .11);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}


/* ── 作品大图（点击卡片放大） ─────────────────────────── */

.lb {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
}

.lb.is-mounted { display: block; }

.lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 7, .96);
  opacity: 0;
  transition: opacity .58s var(--ease);
  -webkit-backdrop-filter: blur(11px) saturate(1.04);
  backdrop-filter: blur(11px) saturate(1.04);
}

.lb.is-open .lb__backdrop { opacity: 1; }

.lb__stage {
  position: fixed;
  transform-origin: 0 0;
  overflow: hidden;
  border-radius: var(--media-radius);
  background: #0b0c0e;
  box-shadow:
    0 60px 140px -40px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(237, 234, 227, .07);
  will-change: transform;
}

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

/* ── 项目集：主图在上，子图依次向下排列，超出视口内部滚动 ── */
.lb__stage.is-gallery {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 180, 135, .34) transparent;
}

/* 项目集里主图按自身比例占高，避免宽幅图在框内留出大段空白 */
.lb__stage.is-gallery > img { height: auto; }

.lb__stage.is-gallery::-webkit-scrollbar { width: 6px; }
.lb__stage.is-gallery::-webkit-scrollbar-track { background: transparent; }
.lb__stage.is-gallery::-webkit-scrollbar-thumb {
  background: rgba(201, 180, 135, .3);
  border-radius: 3px;
}
.lb__stage.is-gallery::-webkit-scrollbar-thumb:hover { background: rgba(201, 180, 135, .5); }

.lb__stack {
  display: flex;
  flex-direction: column;
  gap: 10px;                        /* 子图之间 */
  padding-top: 10px;                /* 主图与第一张子图之间，保持同一间隙 */
  padding-bottom: 10px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s var(--ease) .16s, transform .55s var(--ease) .16s;
}

.lb.is-open .lb__stack { opacity: 1; transform: none; }
.lb__stack[hidden] { display: none; }

.lb__stack img {
  display: block;
  width: 100%;
  height: auto;                     /* 子图按自身比例，不拉伸 */
  object-fit: contain;              /* 保持比例，不裁切 */
}

/* 竖长图：按高度封顶，横向留黑 */
.lb__stack img.is-tall {
  max-height: var(--lb-cap, 60vh);
  background: #000;
}

/* 项目集：底部提示，告诉用户下面还有图 */
.lb__hint {
  position: fixed;
  z-index: 902;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px 9px;
  border-radius: 999px;
  border: 1px solid rgba(201, 180, 135, .32);
  background: rgba(8, 9, 10, .74);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translate(-50%, 8px);
  font-family: var(--ui);
  font-size: 11.5px;
  letter-spacing: .07em;
  color: #CFCBC0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease),
              border-color .35s var(--ease);
}

.lb__hint span {
  display: inline-block;
  color: var(--accent);
  animation: lbHint 2.4s var(--ease) infinite;
}

.lb__hint.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.lb__hint:hover { border-color: rgba(201, 180, 135, .62); }

/* 关闭：子图、信息条、按钮先退场，主图再滑回卡片，不让整块一起塌陷 */
.lb.is-closing .lb__stack {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}

.lb.is-closing .lb__bar,
.lb.is-closing .lb__close {
  opacity: 0;
  transition: opacity .24s var(--ease);
}

@keyframes lbHint {
  0%, 62%, 100% { transform: translateY(0); }
  78% { transform: translateY(3px); }
}

.lb__bar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  padding: 0 64px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease) .1s, transform .5s var(--ease) .1s;
  pointer-events: none;
}

.lb.is-open .lb__bar {
  opacity: 1;
  transform: none;
}

.lb__title {
  max-width: 62vw;
  overflow: hidden;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .07em;
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lb__no {
  flex: none;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--accent);
}

.lb__close {
  position: fixed;
  top: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(237, 234, 227, .16);
  border-radius: 50%;
  background: rgba(12, 13, 15, .68);
  color: var(--text-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s var(--ease) .1s, background .3s var(--ease),
    border-color .3s var(--ease), color .3s var(--ease), transform .25s var(--ease),
    padding .3s var(--ease);
}

.lb.is-open .lb__close { opacity: 1; }

.lb__close:hover {
  background: rgba(237, 234, 227, .07);
  border-color: rgba(201, 180, 135, .55);
  color: var(--text);
}

.lb__close:active { transform: scale(.94); }

.lb__close:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

body.lb-lock { overflow: hidden; }

@media (max-width: 560px) {
  .lb__bar { gap: 10px; padding: 0 20px; }
  .lb__title { font-size: 13px; max-width: 56vw; }
  .lb__close { top: 14px; right: 14px; width: 38px; height: 38px; }
}


/* ── 边缘光：跟随鼠标的局部高光，只留在边框 1px 上 ───── */

.btn,
.entry-card__media,
.profile-card__body {
  position: relative;
}

.btn::after,
.entry-card__media::after,
.profile-card__body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    190px circle at var(--gx, -999px) var(--gy, -999px),
    rgba(232, 212, 170, 1) 0%,
    rgba(201, 180, 135, .62) 34%,
    rgba(201, 180, 135, 0) 72%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}

.btn.is-lit::after,
.entry-card__media.is-lit::after,
.profile-card__body.is-lit::after {
  opacity: 1;
}

/* 浅底按钮上金光会糊，收一半 */
.btn--primary::after {
  opacity: 0;
  mix-blend-mode: normal;
  filter: none;
}

.btn--primary.is-lit::after {
  opacity: .55;
}

/* 减少动效时不要这层 */
@media (prefers-reduced-motion: reduce) {
  .btn::after,
  .entry-card__media::after,
  .profile-card__body::after { display: none; }
}

/* 只给读屏与搜索引擎，视觉上不占位 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════
   视频播放层 — 点击影片卡放大播放
   自带开始键与进度条，关闭时等比缩回卡片
   ═══════════════════════════════════════════════════════ */

body.is-vlocked { overflow: hidden; }

.vl {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
}

.vl.is-mounted { display: block; }

.vl__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 7, .95);
  opacity: 0;
  transition: opacity .52s var(--ease);
  -webkit-backdrop-filter: blur(12px) saturate(1.04);
  backdrop-filter: blur(12px) saturate(1.04);
}

.vl.is-open .vl__backdrop { opacity: 1; }

.vl__frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.vl__stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--media-radius);
  background: #000;
  transform-origin: 50% 50%;
  box-shadow: 0 42px 120px rgba(0, 0, 0, .72);
  isolation: isolate;
  cursor: pointer;
  will-change: transform;
}

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

/* 开始键：暂停时浮在画面中央 */
.vl__big {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78px;
  height: 78px;
  margin: -39px 0 0 -39px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(237, 234, 227, .34);
  border-radius: 50%;
  background: rgba(8, 9, 10, .42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  transform: scale(.9);
  pointer-events: none;
  transition: opacity .34s var(--ease), transform .34s var(--ease),
              border-color .3s var(--ease), background .3s var(--ease);
}

.vl__stage.is-paused .vl__big {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.vl__big:hover {
  border-color: rgba(201, 180, 135, .72);
  background: rgba(8, 9, 10, .58);
  transform: scale(1.04);
}

.vl__big:active { transform: scale(.97); }

/* 底部控制条 */
.vl__ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 46px 16px 13px;
  background: linear-gradient(to top,
    rgba(0, 0, 0, .8) 0%,
    rgba(0, 0, 0, .46) 44%,
    rgba(0, 0, 0, 0) 100%);
  opacity: 1;
  transition: opacity .34s var(--ease);
}

.vl__stage.is-idle .vl__ui { opacity: 0; }
.vl__stage.is-idle { cursor: none; }

.vl__btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background .24s var(--ease), color .24s var(--ease);
}

.vl__btn:hover { background: rgba(237, 234, 227, .12); }

.vl__btn:focus-visible {
  outline: 1px solid rgba(201, 180, 135, .8);
  outline-offset: 2px;
}

.vl__btn--play .vl__i-pause { display: none; }
.vl__btn--play.is-playing .vl__i-play { display: none; }
.vl__btn--play.is-playing .vl__i-pause { display: block; }

/* 进度条 */
.vl__progress {
  position: relative;
  flex: 1 1 auto;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}

.vl__progress:focus-visible { outline: none; }

.vl__track {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(237, 234, 227, .2);
  overflow: hidden;
  transition: height .18s var(--ease);
}

.vl__progress:hover .vl__track,
.vl__progress.is-drag .vl__track,
.vl__progress:focus-visible .vl__track { height: 5px; }

.vl__buffer,
.vl__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
}

.vl__buffer { background: rgba(237, 234, 227, .26); }
.vl__fill { background: var(--accent); }

.vl__knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 0 3px rgba(8, 9, 10, .45);
  transform: translateY(-50%) scale(0);
  transition: transform .2s var(--ease);
  pointer-events: none;
}

.vl__progress:hover .vl__knob,
.vl__progress.is-drag .vl__knob,
.vl__progress:focus-visible .vl__knob { transform: translateY(-50%) scale(1); }

.vl__time {
  flex: 0 0 auto;
  min-width: 82px;
  text-align: right;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .07em;
  color: rgba(237, 234, 227, .74);
  font-variant-numeric: tabular-nums;
}

/* 子视频条：排在播放器与标题之间，横向可滚 */
.vl__clips {
  display: none;
  gap: 8px;
  margin-top: 12px;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .44s var(--ease) .12s, transform .44s var(--ease) .12s;
}

.vl__clips::-webkit-scrollbar { display: none; }
.vl__clips.is-on { display: flex; }
.vl.is-open .vl__clips { opacity: 1; transform: none; }

.vl__clip {
  position: relative;
  flex: none;
  width: 132px;
  height: 74px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(237, 234, 227, .14);
  border-radius: 4px;
  background: #0b0c0e;
  cursor: pointer;
  opacity: .62;
  transition: opacity .3s var(--ease), border-color .3s var(--ease);
}

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

.vl__clip:hover { opacity: 1; border-color: rgba(201, 180, 135, .45); }
.vl__clip.is-on { opacity: 1; border-color: rgba(201, 180, 135, .74); }

.vl__clip:focus-visible {
  outline: 1px solid rgba(201, 180, 135, .8);
  outline-offset: 2px;
}

.vl__clipno {
  position: absolute;
  left: 5px;
  bottom: 3px;
  font-family: var(--ui);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: rgba(237, 234, 227, .9);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
  pointer-events: none;
}

/* 标题与序号 */
.vl__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 2px 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .44s var(--ease) .1s, transform .44s var(--ease) .1s;
}

.vl.is-open .vl__cap { opacity: 1; transform: none; }

.vl__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--text);
}

.vl__no {
  font-family: var(--ui);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}

/* 关闭 */
.vl__close {
  position: fixed;
  top: 22px;
  right: 22px;
  width: 42px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(237, 234, 227, .16);
  border-radius: 50%;
  background: rgba(12, 13, 15, .68);
  color: var(--text-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s var(--ease) .08s, background .3s var(--ease),
              border-color .3s var(--ease), color .3s var(--ease),
              transform .2s var(--ease);
}

.vl.is-open .vl__close { opacity: 1; }

.vl__close:hover {
  background: rgba(237, 234, 227, .07);
  border-color: rgba(201, 180, 135, .55);
  color: var(--text);
}

.vl__close:active { transform: scale(.94); }

@media (max-width: 720px) {
  .vl__big { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
  .vl__ui { gap: 8px; padding: 40px 10px 10px; }
  .vl__time { min-width: 68px; font-size: 10px; }
  .vl__title { font-size: 14px; }
  .vl__close { top: 14px; right: 14px; width: 38px; height: 38px; }
  .vl__clips { margin-top: 10px; gap: 6px; }
  .vl__clip { width: 104px; height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .vl__backdrop, .vl__big, .vl__ui, .vl__cap, .vl__clips, .vl__close { transition-duration: .01s; }
}