/** Shopify CDN: Minification failed

Line 16:3 Unexpected "("
Line 18:4 Unexpected "constructor("
Line 19:6 Expected identifier but found "super("
Line 20:10 Expected ":"
Line 21:10 Expected ":"
Line 24:4 Unexpected "connectedCallback("
Line 25:10 Expected ":"
Line 26:9 Unexpected "("
Line 27:12 Expected ":"
Line 28:8 Comments in CSS use "/* ... */" instead of "//"
... and 14 more hidden warnings

**/
if (!customElements.get("m-image-layer")) {
  class MImageLayer extends HTMLElement {
    constructor() {
      super();
      this.enableParallax = false;
      this.animations = [];
    }

    connectedCallback() {
      this.enableParallax = this.dataset.enableParallax === "true";
      if (this.enableParallax) {
        this.initElements();
        // Only init animations when element enters viewport
        MinimogTheme.Motion.inView(this, this.initAnimations.bind(this), { once: true });
      }
    }

    initElements() {
      this.firstImage = this.querySelector(".m-image-with-text__image-first");
      this.secondImage = this.querySelector(".m-image-with-text__image-second");

      if (!this.firstImage || !this.secondImage) {
        console.error("MImageLayer: Required elements not found.");
        return;
      }
    }

    initAnimations() {
      // Animate only when in view
      this.animateElement(this.secondImage, [`translateY(30%)`, `translateX(0)`]);
      this.animateElement(this.firstImage, [`translateY(-5%)`, `translateX(0)`]);
    }

    animateElement(element, transforms) {
      if (!element) return;
      const anim = MinimogTheme.Motion.scroll(
        MinimogTheme.Motion.animate(
          element,
          { transform: transforms },
          { easing: "linear" }
        ),
        {
          target: element,
          offset: ["start end", "end start"],
        }
      );
      this.animations.push(anim);
    }
  }

  customElements.define("m-image-layer", MImageLayer);
}