/* Gallery and film lightbox visuals (media-motion.js): each whole view fades with opacity;
   on a gallery photo change a copy of the previous photograph fades over the new one.
   While it appears the page shows through, so the default backdrop stays clear. */
#gallery-lightbox.media-motion-opening::backdrop,
#film-dialog.media-motion-opening::backdrop {
  background: transparent;
}

/* A closed <dialog> leaves the screen at once; keep it drawn, unclickable, for the fade. */
#gallery-lightbox.media-motion-closing,
#film-dialog.media-motion-closing {
  display: block;
  z-index: 50;
  pointer-events: none;
}

/* media.css drops the scrollbar while the lightbox is open. Keep its place while the page
   still shows through, so the page does not jump sideways; it is let go behind the full view. */
html:has(#gallery-lightbox.media-motion-opening),
html:has(#film-dialog.media-motion-opening) {
  scrollbar-gutter: stable;
}

/* Copy of the previous photograph during a photo change: the same box and fit as .media-image. */
.media-motion-ghost {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .media-motion,
  .media-motion .media-stage {
    opacity: 1 !important;
  }
}