/* ============================================================
 * 作品集：跟随滑动作品墙（保留）+ 混合宫格 + 站内灯箱播放器
 * ============================================================ */
.works { background: var(--bg-0); }

/* ============ 跟随滑动作品墙（原效果保留） ============ */
.works-wall { margin: 3.2rem 0 4rem; }
.works-wall-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: 1.1rem;
  overflow: hidden;
  /* 两侧渐隐：长廊出入有纵深 */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* 测量完成后：行切绝对定位，容器高度由 JS 硬算写入 */
.works-wall-inner.ready { display: block; }
.works-wall-inner.ready .ww-row { position: absolute; left: 0; }

.ww-row {
  display: flex;
  gap: 0.9rem;
  width: calc(var(--wf, 1.25) * 100%);
  will-change: transform;
}
/* 行宽逐级放大：越靠下的行行进距离越长 → 独立漂移速度 */
.ww-row--0 { --wf: 1.25; }
.ww-row--1 { --wf: 3; }
.ww-row--2 { --wf: 5; }

.ww-cell {
  display: block;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: clamp(8.5rem, 21vh, 14.5rem);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  cursor: pointer;
  transition: border-color 0.5s;
}
.ww-cell:hover { border-color: rgba(212,175,55,0.5); }
.ww-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.82);
  transition: filter 0.8s, transform 1.2s var(--ease-lux);
}
.ww-cell:hover img { filter: saturate(1.05) brightness(0.98); transform: scale(1.05); }
.ww-cell::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,10,0) 45%, rgba(8,8,10,0.85) 100%);
}
/* 作品墙视频格播放徽标 */
.ww-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 2.6rem; height: 2.6rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--gold-hi);
  background: rgba(8,8,10,0.55);
  border: 1px solid rgba(212,175,55,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform 0.5s var(--ease-lux), background 0.4s, box-shadow 0.4s;
}
.ww-cell.is-video:hover .ww-play {
  transform: translate(-50%, -50%) scale(1.12);
  background: rgba(212,175,55,0.2);
  box-shadow: 0 0 26px rgba(212,175,55,0.35);
}
.ww-cap {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 0.85rem;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.ww-cap b {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ww-cap span {
  font-family: var(--latin);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  color: var(--gold);
  flex: none;
}
.works-wall-hint {
  margin-top: 1.2rem;
  text-align: center;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  color: var(--ink-dim);
}

/* ============ 筛选 chips ============ */
.works-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin: 3.4rem 0 2.4rem;
}
.wfilter {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: border-color 0.45s, color 0.45s, background 0.45s, box-shadow 0.45s;
}
.wfilter:hover { border-color: rgba(212,175,55,0.45); color: var(--ink); }
.wfilter.active {
  border-color: rgba(212,175,55,0.65);
  color: var(--gold-hi);
  background: rgba(212,175,55,0.08);
  box-shadow: 0 0 22px rgba(212,175,55,0.16);
}
.wfilter-cn { font-family: var(--serif); font-size: 0.92rem; letter-spacing: 0.24em; }
.wfilter-en { font-family: var(--latin); font-size: 0.56rem; letter-spacing: 0.26em; color: var(--ink-faint); }
.wfilter.active .wfilter-en { color: var(--gold); }
.wfilter-count { font-size: 0.78rem; opacity: 0.85; }

/* ============ 混合宫格（图片 + 视频） ============ */
.works-grid { margin-bottom: 1rem; }
.works-grid-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.2rem;
}
.g-cell {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  cursor: pointer;
  background:
    radial-gradient(18rem 12rem at 50% 0%, rgba(212,175,55,0.06), transparent 65%),
    linear-gradient(160deg, #15131a, #0c0b10);
  transition: border-color 0.5s, box-shadow 0.5s;
}
.g-cell:hover {
  border-color: rgba(212,175,55,0.55);
  box-shadow: 0 20px 54px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,175,55,0.14);
}
.g-media { position: absolute; inset: 0; overflow: hidden; }
/* 加载占位：图片解码前的微 shimmer 底 */
.g-media::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(212,175,55,0.05) 30%, rgba(212,175,55,0.13) 45%, rgba(212,175,55,0.05) 60%);
  background-size: 220% 100%;
  animation: g-shimmer 1.7s linear infinite;
  pointer-events: none;
}
@keyframes g-shimmer {
  0% { background-position: 130% 0; }
  100% { background-position: -90% 0; }
}
.g-media img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.85);
  transition: transform 1.2s var(--ease-lux), filter 0.9s;
}
.g-cell:hover .g-media img { transform: scale(1.07); filter: saturate(1.05) brightness(0.98); }
.g-cell::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,10,0) 38%, rgba(8,8,10,0.9) 100%);
  pointer-events: none;
}
/* 视频格播放键 */
.g-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 3.4rem; height: 3.4rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--gold-hi);
  background: rgba(8,8,10,0.5);
  border: 1px solid rgba(212,175,55,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 0 8px rgba(212,175,55,0.08), 0 0 30px rgba(212,175,55,0.25);
  transition: transform 0.6s var(--ease-lux), background 0.5s, box-shadow 0.5s;
}
.g-cell.is-video:hover .g-play {
  transform: translate(-50%, -50%) scale(1.12);
  background: rgba(212,175,55,0.22);
  box-shadow: 0 0 0 8px rgba(212,175,55,0.12), 0 0 44px rgba(212,175,55,0.4);
}
.g-duration {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  z-index: 3;
  font-family: var(--latin);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: rgba(8,8,10,0.6);
  border: 1px solid var(--line-soft);
  padding: 0.22rem 0.55rem;
}
.g-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 2rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.g-meta { font-size: 0.64rem; letter-spacing: 0.26em; color: var(--gold); }
.g-title {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  line-height: 1.5;
}
.g-plus {
  margin-top: 0.35rem;
  align-self: flex-start;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  color: var(--gold);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s, transform 0.6s var(--ease-lux);
}
.g-cell:hover .g-plus { opacity: 1; transform: translateY(0); }

/* 宫格筛选切换过渡 */
.grid-enter-active, .grid-leave-active { transition: opacity 0.45s var(--ease-lux), transform 0.45s var(--ease-lux); }
.grid-enter-from { opacity: 0; transform: scale(0.94) translateY(16px); }
.grid-leave-to { opacity: 0; transform: scale(0.97); }
.grid-move { transition: transform 0.5s var(--ease-lux); }

/* ============ 站内灯箱播放器（Plyr 内核 + 金色定制） ============ */
.jl-player {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 5vh 4vw;
  background: rgba(5,5,7,0.93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: zoom-out;
  --plyr-color-main: #d4af37;
  --plyr-video-control-color: #f3ead8;
  --plyr-video-control-color-hover: #0b0a08;
  --plyr-video-control-background-hover: #d4af37;
  --plyr-range-fill-background: #d4af37;
  --plyr-video-progress-buffered-background: rgba(212,175,55,0.25);
  --plyr-control-icon-size: 16px;
  --plyr-font-family: inherit;
  --plyr-video-controls-background: linear-gradient(transparent, rgba(8,6,3,0.9));
}
.jl-player-stage {
  position: relative;
  width: min(1100px, 94vw);
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line);
  box-shadow: 0 50px 150px rgba(0,0,0,0.8), 0 0 60px rgba(212,175,55,0.08);
  cursor: default;
}
.jl-player-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.jl-player .plyr { height: 100%; }
.jl-player .plyr__video-wrapper { height: 100%; background: #000; }
.jl-player .plyr--full-ui input[type=range] { color: #d4af37; }
/* 中央大播放键：金底深色三角 + 呼吸金光 */
.jl-player .plyr__control--overlaid {
  background: rgba(212,175,55,0.92);
  color: #0b0a08;
  box-shadow: 0 0 0 8px rgba(212,175,55,0.16), 0 14px 44px rgba(0,0,0,0.55);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), background 0.25s;
}
.jl-player .plyr__control--overlaid:hover,
.jl-player .plyr__control--overlaid:active { background: #e8c85e; color: #0b0a08; transform: scale(1.08); }
.plyr, .plyr * { -webkit-tap-highlight-color: transparent; }
.plyr__control, .plyr__control--overlaid, .plyr__controls__item, .plyr button {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.plyr__control:focus, .plyr__control--overlaid:focus { outline: none; box-shadow: none; }
.plyr__control:focus-visible { outline: 1px solid rgba(212,175,55,0.6); outline-offset: 2px; box-shadow: none; }
.plyr__control--overlaid:focus-visible { box-shadow: 0 0 0 4px rgba(212,175,55,0.35); }

/* 顶部信息条（关闭按钮可点，其余穿透） */
.jl-player-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.4rem;
  background: linear-gradient(180deg, rgba(0,0,0,0.65), transparent);
  pointer-events: none;
}
.jl-player-tag {
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
.jl-player-close {
  pointer-events: auto;
  width: 2.6rem; height: 2.6rem;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  background: rgba(8,8,10,0.6);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.4s var(--ease-lux);
}
.jl-player-close:hover { border-color: var(--gold); color: var(--gold); transform: rotate(90deg); }
/* 上一/下一个 */
.jl-player-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 3.1rem; height: 3.1rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  background: rgba(8,8,10,0.55);
  color: var(--ink);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: all 0.4s var(--ease-lux);
}
.jl-player-nav:hover { border-color: var(--gold); color: var(--gold); }
.jl-player-prev { left: 1.2rem; }
.jl-player-next { right: 1.2rem; }

/* 灯箱底部信息条 */
.jl-player-cap {
  width: min(1100px, 94vw);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem;
}
.jl-player-cap-info h3 {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.jl-player-cap-info p {
  margin-top: 0.4rem;
  color: var(--ink-dim);
  font-size: 0.86rem;
  line-height: 1.8;
  max-width: 46rem;
}
.jl-player-count {
  flex-shrink: 0;
  font-size: 1rem;
  letter-spacing: 0.2em;
}

/* 灯箱开合过渡 */
.player-enter-active, .player-leave-active { transition: opacity 0.5s var(--ease-lux); }
.player-enter-active .jl-player-stage, .player-leave-active .jl-player-stage {
  transition: transform 0.6s var(--ease-spring-soft), opacity 0.45s;
}
.player-enter-active .jl-player-cap, .player-leave-active .jl-player-cap {
  transition: transform 0.6s var(--ease-lux), opacity 0.45s;
}
.player-enter-from, .player-leave-to { opacity: 0; }
.player-enter-from .jl-player-stage { transform: scale(0.9) translateY(24px); }
.player-leave-to .jl-player-stage { transform: scale(0.95) translateY(12px); }
.player-enter-from .jl-player-cap { transform: translateY(16px); opacity: 0; }
.player-leave-to .jl-player-cap { transform: translateY(10px); opacity: 0; }

/* ============ 返回顶部 ============ */
.back-top {
  position: fixed;
  right: 2rem; bottom: 2rem;
  z-index: 9500;
  width: 3.2rem; height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,12,16,0.85);
  border: 1px solid rgba(212,175,55,0.4);
  color: var(--gold);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity 0.5s var(--ease-lux), transform 0.55s var(--ease-spring), background 0.4s, box-shadow 0.4s;
}
.back-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-top:hover { background: rgba(212,175,55,0.18); box-shadow: 0 0 26px rgba(212,175,55,0.3); }

/* ============ 响应式 ============ */
@media (max-width: 860px) {
  .ww-row--0 { --wf: 2.5; }
  .ww-row--1 { --wf: 5; }
  .ww-row--2 { --wf: 7.5; }
  .ww-cell { height: clamp(6.5rem, 18vh, 9rem); }
  .ww-cap b { font-size: 0.82rem; }
  .works-grid-inner { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.9rem; }
}
@media (max-width: 560px) {
  .works-filter { gap: 0.5rem; margin: 2.6rem 0 1.8rem; }
  .wfilter { padding: 0.55rem 0.85rem; gap: 0.45rem; }
  .wfilter-cn { font-size: 0.8rem; letter-spacing: 0.16em; }
  .works-grid-inner { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .g-cap { padding: 1.4rem 0.7rem 0.7rem; }
  .g-title { font-size: 0.82rem; }
  .g-meta { font-size: 0.56rem; letter-spacing: 0.16em; }
  .g-play { width: 2.7rem; height: 2.7rem; }
  .g-duration { top: 0.55rem; right: 0.55rem; font-size: 0.62rem; }
  .g-plus { display: none; }
  .jl-player { padding: 0; justify-content: center; }
  .jl-player-stage { width: 100vw; }
  .jl-player-cap { width: 100vw; padding: 1rem 4vw 2.4rem; }
  .jl-player-cap-info p { font-size: 0.8rem; }
  .jl-player-nav { width: 2.5rem; height: 2.5rem; font-size: 1.4rem; }
  .jl-player-prev { left: 0.5rem; }
  .jl-player-next { right: 0.5rem; }
  .back-top { right: 1.1rem; bottom: 1.1rem; width: 2.7rem; height: 2.7rem; }
}

/* 减弱动效偏好：作品墙静态陈列，禁绝漂移 */
@media (prefers-reduced-motion: reduce) {
  .ww-row { transform: none !important; width: 100%; }
  .g-media::before { animation: none; }
}