/* ============================================================
   作品详情的交互和动效（js/detail-fx.js）。--dx-bg / --dx-a / --dx-a-ink 是从这件作品的第一张图里取的颜色
   ============================================================ */
body.dx-tinted, .viewer.dx-tinted { background: var(--dx-bg); transition: background-color 1s var(--ease); }
.dx-tinted { --seal: var(--dx-a-ink); }
.viewer.dx-tinted .viewer-bar { background: linear-gradient(var(--dx-bg) 55%, transparent); }

/* ---------- 开头：标题一个字一个字升上来 ---------- */
.dx-title { display: inline; }
.dx-ch { display: inline-block; opacity: 0; transform: translateY(.55em) rotate(4deg); filter: blur(6px); }
.story.dx-go .dx-ch { opacity: 1; transform: none; filter: none; transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease); transition-delay: calc(120ms + var(--i) * 45ms); }

/* ---------- 开头的图：跟着鼠标倾斜，高光跟着走，平时轻轻浮着 ---------- */
.st-fig.dx-hero { position: relative; perspective: 1100px; }
.st-fig.dx-hero > img, .st-fig.dx-hero > .dx-glare {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--ease);
}
.story.dx-go .st-fig.dx-hero:not(.dx-film) { animation: dxFloat 6s ease-in-out 1.2s infinite; }
@keyframes dxFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.dx-glare {
  position: absolute; inset: 0; border-radius: 6px; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .7), transparent 50%);
  opacity: 0; transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.st-open:hover .dx-glare { opacity: 1; }
.dx-hint {
  position: absolute; left: 50%; bottom: -34px; translate: -50% 0; white-space: nowrap;
  font-size: 12px; letter-spacing: .14em; color: var(--ink-2);
  opacity: 0; transition: opacity .5s var(--ease) .1s;
}
.dx-hint::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--dx-a, var(--seal)); vertical-align: 1px; animation: dxPulse 1.6s ease-in-out infinite; }
@keyframes dxPulse { 50% { transform: scale(1.6); opacity: .4; } }
.story.dx-go .dx-hint { opacity: 1; }
.st-open:hover .dx-hint { opacity: 0; }

/* ---------- 放大镜 ---------- */
.st-fig.dx-zoomable { position: relative; cursor: zoom-in; }
.dx-lens {
  position: absolute; left: 0; top: 0; z-index: 3; width: 170px; height: 170px; border-radius: 50%;
  background-repeat: no-repeat; pointer-events: none;
  box-shadow: 0 0 0 3px #fff, 0 18px 40px -12px rgba(0, 0, 0, .45);
  opacity: 0; scale: .6; transition: opacity .25s var(--ease), scale .35s var(--ease);
}
.dx-lens.on { opacity: 1; scale: 1; }

/* ---------- 往下滚：拉帘子 ---------- */
.st-fig.dx-wipe > img, .st-fig.dx-wipe > video { clip-path: inset(100% 0 0 0 round 6px); transform: scale(1.06); }
.st-fig.dx-wipe.is-combo > img { clip-path: inset(100% 0 0 0); }
.st-fig.dx-wipe.dx-in > img, .st-fig.dx-wipe.dx-in > video {
  clip-path: inset(0 0 0 0 round 6px); transform: none;
  transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1), transform 1.4s var(--ease);
}
.st-fig.dx-wipe.is-cut > img { clip-path: inset(100% 0 0 0); }
.st-fig.dx-wipe.is-cut.dx-in > img { clip-path: inset(0); }

/* ---------- 这件作品用的颜色 ---------- */
.dx-pal { max-width: 1240px; margin: clamp(56px, 10vh, 110px) auto 0; }
.dx-pal-k { font-size: 13px; letter-spacing: .16em; color: var(--ink-2); }
.dx-pal-row { display: flex; gap: 8px; margin-top: 16px; height: clamp(72px, 9vw, 110px); }
.dx-sw {
  position: relative; flex: var(--w) 1 0; min-width: 64px; border-radius: 10px; background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 10px 12px;
  color: #15171C; text-align: left;
  transform-origin: bottom; transform: scaleY(0);
  transition: flex-grow .5s var(--ease), transform .3s var(--ease);
}
.dx-sw.is-dark { color: #fff; }
.dx-pal.in .dx-sw { transform: none; transition: flex-grow .5s var(--ease), transform .9s var(--ease) var(--d); }
.dx-sw:hover { flex-grow: calc(var(--w) * 2.2); }
.dx-sw b { font-family: var(--font-mono); font-weight: 400; font-size: 13px; letter-spacing: .06em; }
.dx-sw em { font-style: normal; font-size: 11px; letter-spacing: .08em; opacity: 0; max-height: 0; transition: opacity .3s var(--ease); }
.dx-sw:hover em { opacity: .85; max-height: 2em; }
.dx-sw.copied em { opacity: 1; max-height: 2em; font-size: 0; }
.dx-sw.copied em::after { content: attr(data-done) ' ✓'; font-size: 11px; }

/* ---------- 序号栏（左边中间） ---------- */
.dx-index {
  position: fixed; left: clamp(10px, 1.6vw, 28px); top: 50%; z-index: 60; translate: 0 -50%;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transition: opacity .6s var(--ease) .6s;
}
.viewer .dx-index { position: absolute; z-index: 3; }
.dx-index.in { opacity: 1; }
.dx-index button { display: flex; align-items: center; gap: 8px; padding: 3px 0; color: var(--ink-3); }
.dx-index b { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .06em; opacity: 0; transition: opacity .3s var(--ease); }
.dx-index i { display: block; width: 12px; height: 1px; background: currentColor; transition: width .4s var(--ease), background-color .4s var(--ease); }
.dx-index button:hover b, .dx-index button.on b { opacity: 1; }
.dx-index button.on { color: var(--dx-a-ink, var(--seal)); }
.dx-index button.on i { width: 28px; height: 2px; }
.dx-index:hover b { opacity: 1; }

/* ---------- 片子：跟着画面变色的光 + 时间轴 ---------- */
.st-fig.dx-film { position: relative; isolation: isolate; }
.dx-amb {
  position: absolute; left: -7%; top: -10%; width: 114%; height: 110%; z-index: -1;
  filter: blur(46px) saturate(1.5); opacity: .75; pointer-events: none;
  transition: opacity .8s var(--ease);
}
.dx-time { position: relative; padding: 16px 0 6px; cursor: pointer; }
.dx-time-track { position: relative; display: block; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.dx-time-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--dx-a, var(--seal)); transform-origin: left; transform: scaleX(0); }
.dx-tick { position: absolute; top: -4px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--ink); opacity: .55; }
.dx-time:hover .dx-time-track { height: 6px; margin-top: -1px; transition: height .2s var(--ease); }
.dx-time-tip {
  position: absolute; bottom: 30px; left: 0; translate: -50% 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none;
  opacity: 0; scale: .9; transition: opacity .2s var(--ease), scale .25s var(--ease);
}
.dx-time.hover .dx-time-tip { opacity: 1; scale: 1; }
.dx-time-img { display: none; width: 150px; aspect-ratio: 16 / 9; background: #111 center / cover no-repeat; border-radius: 6px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); }
.dx-time-tip.has-img .dx-time-img { display: block; }
.dx-time-tip b { padding: 3px 8px; border-radius: 4px; background: var(--ink); color: var(--bg); font-family: var(--font-mono); font-weight: 400; font-size: 12px; }

/* ---------- 上一个 / 下一个：封面跟着鼠标浮出来 ---------- */
.dx-pop {
  position: fixed; left: 0; top: 0; z-index: 900; width: 220px; pointer-events: none;
  opacity: 0; scale: .7; rotate: -4deg;
  transition: opacity .3s var(--ease), scale .45s var(--ease), rotate .45s var(--ease);
}
.dx-pop.on { opacity: 1; scale: 1; rotate: 0deg; }
.dx-pop span { display: block; width: 100%; aspect-ratio: 4 / 3; background: center / cover no-repeat; border-radius: 8px; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .5); }

@media (max-width: 900px) {
  .dx-index, .dx-hint { display: none; }
  .dx-pal-row { height: 64px; }
  .dx-sw { min-width: 0; }
  .dx-sw b { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .dx-ch, .st-fig.dx-wipe > img, .st-fig.dx-wipe > video { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
}

/* 抠掉底的图：高光是方的，会盖到图外面的空处，不要 */
.st-fig.is-cut .dx-glare { display: none; }