/* Shared interaction and player primitives. The exhibition composition lives in theme.css. */
@font-face { font-family: LocalSong; src: local("Noto Serif CJK SC"), local("Source Han Serif SC"), local("STSong"), local("SimSun"); }
:root { --ease: cubic-bezier(.22,.61,.36,1); --cw: 200px; --persp: 1450px; }
* { box-sizing: border-box; }
html { background: var(--bg); scrollbar-width: none; overscroll-behavior: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; min-height: 100dvh; overflow-x: hidden; color: var(--ink); background: var(--bg); font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; overscroll-behavior: none; }
body.loading { overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; background: none; border: 0; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
button:disabled { opacity: .3; cursor: default; }
button:active { scale: .98; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Interactive film covers rotate or play; dragging must not create a browser selection. */
#orb, #orb *, .grid-card, .grid-card *, #featured-film, #featured-film * { -webkit-user-select: none; user-select: none; }
#orb img, .grid-card img, #featured-film img { -webkit-user-drag: none; }
[hidden] { display: none !important; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.round-button, .icon-button { display: grid; place-items: center; border-radius: 50%; width: 48px; height: 48px; transition: background .25s, border-color .25s, scale .25s; }
.round-button:hover, .icon-button:hover { scale: 1.04; }
.card-play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%,-50%); display: grid; place-items: center; border-radius: 50%; opacity: 0; transition: opacity .25s; pointer-events: none; }
.card-play svg { width: 18px; height: 18px; }
.card:hover .card-play, .card:focus-visible .card-play, .grid-card:hover .card-play, .grid-card:focus-visible .card-play, .mobile-card.is-current .card-play, .mobile-card:focus-visible .card-play { opacity: 1; }
.card:focus-visible { opacity: 1 !important; }
#viewer { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 60px 6vw; opacity: 0; }
.scrim { position: absolute; inset: 0; background: #17130feb; }
.player { position: relative; width: min(1120px,88vw,calc((100dvh - 150px)*1.77778)); will-change: transform, opacity; }
.video-wrap { position: relative; aspect-ratio: 16/9; background: #17130f; border-radius: 12px; overflow: hidden; }
.video-wrap video { width: 100%; height: 100%; display: block; object-fit: contain; }
.video-wrap:fullscreen { border: 0; border-radius: 0; width: 100vw; height: 100dvh; aspect-ratio: auto; display: grid; place-items: center; }
.video-wrap:fullscreen video { height: 100dvh; }
.controls { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 12px 2px; border-radius: 16px; transition: opacity .25s; }
#close { position: absolute; right: 16px; top: 16px; z-index: 4; width: 44px; height: 44px; }
.control-row { display: flex; align-items: center; gap: 10px; height: 46px; }
.icon-button { width: 40px; height: 40px; }
.icon-button svg { width: 20px; height: 20px; }
.control-spacer { flex: 1; }
#seek { display: block; position: relative; width: 100%; height: 20px; margin: 0; appearance: none; background: transparent; cursor: pointer; --progress: 0%; }
#seek::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right,var(--ink) var(--progress),#f1d9b638 var(--progress)); border-radius: 2px; }
#seek::-webkit-slider-thumb { appearance: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); margin-top: -4px; }
#seek::-moz-range-track { height: 2px; background: #f1d9b638; }
#seek::-moz-range-progress { height: 2px; background: var(--ink); }
#seek::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--ink); }
#center-play, #retry { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; }
#center-play { opacity: 0; pointer-events: none; }
.paused #center-play { opacity: 1; pointer-events: auto; }
.buffering { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px; border: 1px solid #e2bd8933; border-top-color: var(--ink); border-radius: 50%; animation: spin 1s linear infinite; opacity: 0; pointer-events: none; }
.waiting .buffering { opacity: 1; }
.waiting #center-play { opacity: 0; }
.film-navigation { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 24px; }
.film-navigation .round-button { width: 44px; height: 44px; }
#previous svg { transform: rotate(180deg); }
#film-dots { display: flex; gap: 7px; align-items: center; max-width: 50vw; flex-wrap: wrap; justify-content: center; }
#film-dots i { width: 3px; height: 3px; border-radius: 50%; background: #c8965f55; transition: background .25s, scale .25s; }
#film-dots i.active { background: var(--ink); scale: 1.6; }
body.viewing .chrome { pointer-events: none; visibility: hidden; }
body.viewing #stage, body.viewing #dust, body.viewing .orbital-lines { visibility: hidden; }
@keyframes spin { to { rotate: 360deg; } }
@media(max-width:767px) {
  #viewer { padding: 24px 12px; }
  .player { width: 100%; }
  .controls { left: 8px; right: 8px; bottom: 8px; padding: 5px 9px 1px; }
  .control-row { height: 44px; }
  #close { top: 10px; right: 10px; }
  .film-navigation { gap: 18px; }
  #film-dots { gap: 6px; }
}
@media(max-height:520px) and (orientation:landscape) {
  #viewer { padding: 12px 56px; }
  .player { width: min(78vw,calc((100dvh - 82px)*1.77778)); }
  .film-navigation { margin-top: 10px; }
  .film-navigation .round-button { width: 36px; height: 36px; }
  .controls { bottom: 8px; padding-top: 2px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  #dust { display: none; }
}