/**
 * parallax-image.css
 *
 * Styles for the Bricks Parallax Image custom element.
 *
 * CSS custom properties (set by the Bricks controls or inline styles):
 *   --parallax-image-container-height  Height of the visible crop window
 *   --parallax-image-width Width of the <img>
 *   --parallax-image-height Height of the <img> (should exceed container)
 *   --parallax-image-left Horizontal offset of the <img>
 */

/* Outer root (.parallax-image) */
/*
 * Bricks injects its own width / margin / padding rules here via the normal
 * style panel, so we only set what Bricks won't touch.
 */
.parallax-image {
  display: block;
  /* Ensure the crop window clips correctly */
  overflow: hidden;
}

/* Crop window (.parallax-image-wrapper) */
/*
 * This is the visible rectangle. Its height is controlled by the
 * --parallax-image-container-height CSS variable (set via the Bricks control).
 * overflow:hidden clips the image that travels vertically.
 */
.parallax-image-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: var(--parallax-image-container-height, 400px);
}

/* The actual image (.parallax-image-img) */
/*
 * position:absolute so the JS can freely adjust `top` without affecting
 * document flow. Width / height come from CSS variables set by the Bricks
 * controls (imageWidth / imageHeight). Defaults fill the container.
 */
.parallax-image-img {
  position: absolute;
  left: var(--parallax-image-left, 0);
  top: 0;
  /* overridden by JS at runtime */
  width: var(--parallax-image-width, 100%);
  height: var(--parallax-image-height, 150%);
  /* taller than container = travel room */
  max-width: none;
  /* prevent theme resets from constraining the image */
  object-fit: cover;
  /* overridden by the objectFit Bricks control */
  object-position: center top;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: top;
  /* hint GPU compositing for the scroll animation */
}

/* Reduced-motion: disable the parallax travel */
@media (prefers-reduced-motion: reduce) {
  .parallax-image-img {
    top: 0 !important;
    will-change: auto;
  }
}