/* Parallax. The photo keeps the site's own size and position: the script only slides it a little.
   The photo's parent becomes the window it is seen through, so anything spilling outside it is cut off. */
.fx-parallax-host { overflow: hidden; overflow: clip; }
.fx-parallax { transform-origin: center; will-change: translate; }

/* Optional tint over the photo, for sites that want one: add class="fx-parallax-tint" to an empty
   element placed after the photo. Its color comes from --fx-parallax-tint, or the site background. */
.fx-parallax-tint {
  position: absolute;
  inset: 0;
  background: var(--fx-parallax-tint, var(--fx-bg, #000));
  opacity: var(--fx-parallax-tint-strength, .45);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .fx-parallax { translate: none !important; scale: none !important; }
}