/* Start custom CSS for html, class: .elementor-element-77be8f9 */<style>
/* LACEDA — FULL SCREEN PRODUCT EXPERIENCE */

#laceda-pink,
#laceda-ivory,
#laceda-mocha {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100svh !important;
  margin: 0 !important;
  overflow: hidden !important;
  transition: opacity 1300ms ease-in-out !important;
}

#laceda-pink { z-index: 10; }
#laceda-ivory { z-index: 9; }
#laceda-mocha { z-index: 8; }

#bag-pink,
#bag-white,
#bag-black,
#corner-white,
#corner-black {
  transition: opacity 900ms ease !important;
}

.laceda-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.laceda-visible {
  opacity: 1 !important;
}

#laceda-animation-layer {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  overflow: hidden;
}

.laceda-flight {
  position: fixed;
  object-fit: contain;
  pointer-events: none;
  margin: 0 !important;
  max-width: none !important;
  max-height: none !important;
  will-change: left, top, width, height, opacity;
}

@media (max-width: 767px) {
  #laceda-pink,
  #laceda-ivory,
  #laceda-mocha {
    width: 100vw !important;
  }
}
<\/style>

<script>
(() => {
  const init = () => {
    const $ = id => document.getElementById(id);

    const panels = [
      $("laceda-pink"),
      $("laceda-ivory"),
      $("laceda-mocha")
    ];

    const bags = {
      pink: $("bag-pink"),
      white: $("bag-white"),
      black: $("bag-black"),
      cornerWhite: $("corner-white"),
      cornerBlack: $("corner-black")
    };

    if (!panels.every(Boolean) ||
        !Object.values(bags).every(Boolean)) {
      console.error("Laceda: One or more Elementor IDs are missing.");
      return;
    }

    if (window.lacedaCarouselInitialized) return;
    window.lacedaCarouselInitialized = true;

    const duration = 1350;
    let current = 0;
    let busy = false;
    let wheelTimer;

    const layer = document.createElement("div");
    layer.id = "laceda-animation-layer";
    document.body.appendChild(layer);

    const images = Object.values(bags);

    function imageOf(element) {
      return element.querySelector("img") || element;
    }

    function rectOf(element) {
      return imageOf(element).getBoundingClientRect();
    }

    function show(element, visible) {
      element.style.opacity = visible ? "1" : "0";
    }

    function makeFlight(element) {
      const img = imageOf(element);
      const rect = img.getBoundingClientRect();

      const clone = img.cloneNode(true);

      Object.assign(clone.style, {
        position: "fixed",
        left: rect.left + "px",
        top: rect.top + "px",
        width: rect.width + "px",
        height: rect.height + "px",
        objectFit: getComputedStyle(img).objectFit || "contain",
        zIndex: "999999",
        opacity: "1",
        pointerEvents: "none",
        margin: "0",
        maxWidth: "none",
        maxHeight: "none"
      });

      layer.appendChild(clone);
      return { clone, rect };
    }

    function flyTo(clone, start, end, fade = false) {
      const animation = clone.animate([
        {
          left: start.left + "px",
          top: start.top + "px",
          width: start.width + "px",
          height: start.height + "px",
          opacity: 1
        },
        {
          left: end.left + "px",
          top: end.top + "px",
          width: end.width + "px",
          height: end.height + "px",
          opacity: fade ? 0 : 1
        }
      ], {
        duration,
        easing: "cubic-bezier(.22,.61,.36,1)",
        fill: "forwards"
      });

      return animation.finished.catch(() => {});
    }

    function cornerTarget() {
      return {
        left: window.innerWidth * 0.035,
        top: window.innerHeight * 0.045,
        width: window.innerWidth * 0.13,
        height: window.innerHeight * 0.18
      };
    }

    function setState(index) {
      panels.forEach((panel, i) => {
        panel.style.opacity = i === index ? "1" : "0";
        panel.style.pointerEvents = i === index ? "auto" : "none";
        panel.style.zIndex = String(10 + i);
      });

      images.forEach(element => show(element, false));

      if (index === 0) {
        show(bags.pink, true);
        show(bags.cornerWhite, true);
      }

      if (index === 1) {
        show(bags.white, true);
        show(bags.cornerBlack, true);
      }

      if (index === 2) {
        show(bags.black, true);
      }

      current = index;
    }

    async function moveTo(next) {
      if (busy || next < 0 || next > 2 || next === current) return;

      busy = true;

      const previous = current;
      const forward = next > previous;

      const heroElements = [
        bags.pink,
        bags.white,
        bags.black
      ];

      const previousHero = heroElements[previous];
      const nextHero = heroElements[next];

      const outgoing = makeFlight(previousHero);
      const incomingCorner = forward
        ? makeFlight(previous === 0 ? bags.cornerWhite : bags.cornerBlack)
        : null;

      show(previousHero, false);

      if (incomingCorner) {
        show(previous === 0 ? bags.cornerWhite : bags.cornerBlack, false);
      }

      show(nextHero, false);

      // Begin the background crossfade
      panels[next].style.zIndex = "20";
      panels[next].style.opacity = "1";
      panels[previous].style.zIndex = "10";
      panels[previous].style.opacity = "0";

      const exitTarget = cornerTarget();

      const exitAnimation = flyTo(
        outgoing.clone,
        outgoing.rect,
        exitTarget,
        true
      );

      let incomingAnimation = Promise.resolve();

      if (incomingCorner) {
        const target = rectOf(nextHero);
        const source = incomingCorner.rect;

        incomingAnimation = flyTo(
          incomingCorner.clone,
          source,
          {
            left: target.left,
            top: target.top,
            width: target.width,
            height: target.height
          },
          false
        );
      }

      // Reverse movement: the previous hero returns to centre.
      if (!forward) {
        show(nextHero, true);
      }

      await Promise.all([exitAnimation, incomingAnimation]);

      outgoing.clone.remove();

      if (incomingCorner) {
        incomingCorner.clone.remove();
      }

      setState(next);

      busy = false;
    }

    // Initial state
    setState(0);

    // Scroll snapping
    window.addEventListener("wheel", event => {
      event.preventDefault();

      if (busy || Math.abs(event.deltaY) < 10) return;

      clearTimeout(wheelTimer);

      wheelTimer = setTimeout(() => {
        moveTo(current + (event.deltaY > 0 ? 1 : -1));
      }, 35);

    }, { passive: false });

    // Touch gestures
    let touchStart = 0;

    window.addEventListener("touchstart", event => {
      touchStart = event.touches[0].clientY;
    }, { passive: true });

    window.addEventListener("touchend", event => {
      if (busy) return;

      const difference = touchStart - event.changedTouches[0].clientY;

      if (Math.abs(difference) > 45) {
        moveTo(current + (difference > 0 ? 1 : -1));
      }
    }, { passive: true });

    // Keyboard navigation
    window.addEventListener("keydown", event => {
      if (event.key === "ArrowDown" || event.key === "PageDown") {
        event.preventDefault();
        moveTo(current + 1);
      }

      if (event.key === "ArrowUp" || event.key === "PageUp") {
        event.preventDefault();
        moveTo(current - 1);
      }
    });

  };

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init, { once: true });
  } else {
    init();
  }
})();
</script>/* End custom CSS */