/* Silver stagecraft. These effects do not change any gallery dimensions. */
.motion-type {
  display: inline-block;
  overflow: clip;
  vertical-align: bottom;
  padding-block: 0.12em;
  margin-block: -0.12em;
  perspective: 800px;
}
.motion-letter {
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 100%;
  backface-visibility: hidden;
}
.zone .zone-title .motion-type,
.zone .zone-title .motion-letter {
  display: inline-block;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  vertical-align: baseline;
}
.zone .zone-title .motion-type { padding-block: 0.12em; margin-block: -0.12em; }
.hero-film__plate::before {
  transform: scaleX(var(--hero-line, 1));
  transform-origin: left center;
}
.motion-shutter {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: #050505;
  transform: scaleX(0);
  transform-origin: right center;
}
.motion-shutter::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(transparent, #d8dce3 45%, #fff 60%, transparent);
}
.zone-head { position: relative; }
.zone-head::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, #b5bdc8, #606871 52%, transparent);
  transform: scaleX(var(--zone-draw, 1));
  transform-origin: left center;
}

/* Fixed travel time per pixel, so hovering never jumps the track's position. */
.poster-strip[data-cloned] .poster-strip__track {
  animation-duration: var(--marquee, 46s);
  animation-play-state: paused;
  will-change: auto;
}
.poster-strip.is-running[data-cloned] .poster-strip__track {
  animation-play-state: running;
  will-change: transform;
}
.amb:not(.is-live) .amb__motif,
.amb:not(.is-live) .amb__motif i,
.motion-suspended .amb__motif,
.motion-suspended .amb__motif i {
  animation-play-state: paused;
}
.motion-suspended .amb { opacity: 0; }
.motion-suspended .poster-strip.is-running .poster-strip__track { animation-play-state: paused; }

.plate-cap { transition: transform 240ms var(--ease); }
.header-cta,
.footer-reference__button,
.sheet-toggle,
.zoom-btn,
.viewer-close {
  transition: background-color 200ms ease, border-color 200ms ease,
    color 200ms ease, scale 160ms var(--ease);
}
.header-cta:active,
.footer-reference__button:active,
.sheet-toggle:active,
.zoom-btn:active,
.viewer-close:active { scale: 0.96; }
.header-cta .icon,
.footer-reference__button .icon { transition: transform 260ms var(--ease); }
.header-cta:hover .icon,
.footer-reference__button:hover .icon { transform: translate(3px, -3px); }
.footer-reference__title { perspective: 900px; }
.footer-reference__title > span { transform-origin: 50% 100%; }

@media (hover: hover) and (pointer: fine) {
  .art::after,
  .motion-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 1px;
    border: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(180px circle at var(--light-x, 50%) var(--light-y, 50%),
      #f6f8ff, rgb(216 223 236 / 0.58) 36%, transparent 74%),
      linear-gradient(rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0.35;
    transition: opacity 220ms ease;
  }
  .art:hover::after,
  .art:focus-visible::after,
  .motion:hover .motion-frame::after,
  .motion:focus-visible .motion-frame::after { opacity: 1; }
  .plate:has(> .art:hover) > .plate-cap { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-shutter { display: none; }
  .art::after,
  .motion-frame::after { background: none; }
  .plate-cap,
  .header-cta,
  .footer-reference__button,
  .sheet-toggle,
  .zoom-btn,
  .viewer-close { transition: none; }
  .plate:has(> .art:hover) > .plate-cap,
  .header-cta:hover .icon,
  .footer-reference__button:hover .icon { transform: none; }
  .hero-film__plate::before,
  .zone-head::after { transform: none; }
}
@media (forced-colors: active), print {
  .motion-shutter,
  .zone-head::after { display: none; }
}