/*
 * AL Image Scroll Zoom
 * The zoomed state only exists after JavaScript marks an element as ready.
 * Without JavaScript, images remain at their normal scale.
 */

.al-scroll-zoom,
.al-scroll-zoom > .elementor-widget-container,
.al-scroll-zoom .elementor-widget-container {
  overflow: hidden;
}

.al-scroll-zoom img {
  display: block;
  transform: scale(1) !important;
  transform-origin: center center;
  backface-visibility: hidden;
}

.al-scroll-zoom.al-zoom-ready:not(.al-inview) img {
  transform: scale(var(--al-zoom-start, 1.35)) !important;
  transition: transform var(--al-zoom-duration, 1200ms)
    var(--al-zoom-easing, cubic-bezier(.22, .61, .36, 1)) !important;
  will-change: transform;
}

.al-scroll-zoom.al-zoom-ready.al-inview img {
  transform: scale(1) !important;
  transition: transform var(--al-zoom-duration, 1200ms)
    var(--al-zoom-easing, cubic-bezier(.22, .61, .36, 1)) !important;
  will-change: transform;
}

.al-scroll-zoom.al-zoom-complete img {
  will-change: auto;
}

/*
 * Product galleries often finish their own initialization after window.load.
 * Animate the targeted cover wrapper with keyframes there, rather than the
 * image transition used on Creative Elements pages. This prevents a gallery
 * refresh from skipping the first painted scale.
 */
body#product .al-scroll-zoom.al-zoom-ready img,
body.page-product .al-scroll-zoom.al-zoom-ready img {
  transform: scale(1) !important;
  transition: none !important;
}

/*
 * Keep the product cover in its starting zoom from the first styled paint.
 * The page therefore never shows scale(1) before jumping to the zoomed state.
 */
body#product .al-scroll-zoom,
body.page-product .al-scroll-zoom {
  transform: scale(var(--al-product-zoom-start, 1.25));
  transform-origin: center center;
  backface-visibility: hidden;
}

body#product .al-scroll-zoom.al-product-animate,
body.page-product .al-scroll-zoom.al-product-animate {
  animation: al-product-image-zoom-out var(--al-zoom-duration, 1200ms)
    var(--al-zoom-easing, cubic-bezier(.22, .61, .36, 1)) both;
  transform-origin: center center;
  will-change: transform;
}

body#product .al-scroll-zoom.al-product-animate.al-zoom-complete,
body.page-product .al-scroll-zoom.al-product-animate.al-zoom-complete {
  will-change: auto;
}

@keyframes al-product-image-zoom-out {
  from {
    transform: scale(var(--al-product-zoom-start, 1.25));
  }

  to {
    transform: scale(1);
  }
}

@media (max-width: 767px) {
  .al-scroll-zoom {
    --al-zoom-start: 1.22;
    --al-zoom-duration: 1000ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .al-scroll-zoom img {
    transform: scale(1) !important;
    transition: none !important;
  }

  body#product .al-scroll-zoom,
  body.page-product .al-scroll-zoom {
    animation: none !important;
    transform: none !important;
  }
}