<script>
(() => {
  "use strict";

  document.documentElement.classList.add("zrp-enhanced");

  function init() {
    document.querySelectorAll(".zrp-button-widget .elementor-button")
      .forEach((button, index) => {
        if (button.dataset.zrpInit === "true") return;
        button.dataset.zrpInit = "true";

        const href = button.getAttribute("href") || "";
        let target = null;

        try {
          if (href.startsWith("#") && href.length > 1) {
            target = document.getElementById(
              decodeURIComponent(href.slice(1))
            );
          }
        } catch (_) {}

        if (target) {
          button.setAttribute("aria-controls", target.id);
          button.setAttribute(
            "aria-expanded",
            target.classList.contains("zrp-revealed") ? "true" : "false"
          );
        }

        if (!button.querySelector(".zrp-ring")) {
          const pathId =
            "zrp-circle-" + Date.now().toString(36) + "-" + index;

          const decoration = document.createElement("span");
          decoration.setAttribute("aria-hidden", "true");

          decoration.innerHTML = `
            <svg class="zrp-ring" viewBox="0 0 250 250"
              xmlns="http://www.w3.org/2000/svg">
              <defs>
                <path id="${pathId}"
                  d="M125 125 m-99 0 a99 99 0 1 1 198 0 a99 99 0 1 1 -198 0"/>
              </defs>

              <circle class="zrp-orbit" cx="125" cy="125" r="116"/>

              <text>
                <textPath href="#${pathId}" startOffset="0%"
                  textLength="295" lengthAdjust="spacing">
                  EXPLORE · CREATE · DISCOVER ·
                </textPath>
              </text>

              <text>
                <textPath href="#${pathId}" startOffset="50%"
                  textLength="295" lengthAdjust="spacing">
                  EXPLORE · CREATE · DISCOVER ·
                </textPath>
              </text>

              <circle class="zrp-spark" cx="125" cy="9" r="3"/>
            </svg>

            <span class="zrp-center">
              <span class="zrp-world"></span>
              <span class="zrp-door zrp-door-left"></span>
              <span class="zrp-door zrp-door-right"></span>

              <span class="zrp-arrow">
                <svg viewBox="0 0 48 48"
                  xmlns="http://www.w3.org/2000/svg">
                  <path d="M24 7V39M12 27L24 39L36 27"/>
                </svg>
              </span>
            </span>
          `;

          button.appendChild(decoration);
        }

        button.classList.add("zrp-ready");

        const ring = button.querySelector(".zrp-ring");
        const reduced = matchMedia("(prefers-reduced-motion: reduce)");
        const hover = matchMedia("(hover: hover) and (pointer: fine)");

        let angle = 0;
        let speed = 12;
        let previous = null;
        let frame = 0;
        let entered = false;
        let focused = false;
        let visible = true;

        function stop() {
          cancelAnimationFrame(frame);
          frame = 0;
          previous = null;
        }

        function animate(now) {
          frame = 0;

          if (reduced.matches || !visible || document.hidden) return;

          const dt = previous === null
            ? 0
            : Math.min(50, now - previous);

          previous = now;

          const targetSpeed = button.matches(
            ".zrp-peek, .zrp-opened"
          ) ? 0 : 12;

          speed += (targetSpeed - speed) *
            (1 - Math.exp(-dt / 170));

          angle = (angle + speed * dt / 1000) % 360;
          ring.style.transform = `rotate(${angle}deg)`;

          if (targetSpeed === 0 && speed < .02) {
            speed = 0;
            previous = null;
            return;
          }

          frame = requestAnimationFrame(animate);
        }

        function resume() {
          if (!frame && !reduced.matches && visible && !document.hidden) {
            previous = null;
            frame = requestAnimationFrame(animate);
          }
        }

        function update() {
          button.classList.toggle("zrp-peek", entered || focused);
          resume();
        }

        button.addEventListener("pointerenter", event => {
          if (hover.matches && event.pointerType === "mouse") {
            entered = true;
            update();
          }
        });

        button.addEventListener("pointerleave", () => {
          entered = false;
          update();
        });

        button.addEventListener("focus", () => {
          focused = button.matches(":focus-visible");
          update();
        });

        button.addEventListener("blur", () => {
          focused = false;
          update();
        });

        let switching = false;

        button.addEventListener("click", async event => {
          if (
            !target ||
            event.button !== 0 ||
            event.ctrlKey || event.metaKey ||
            event.shiftKey || event.altKey
          ) return;

          event.preventDefault();

          /* בעכבר ובמגע: רק העיגול המרכזי מפעיל את הכניסה.
             מקלדת וטכנולוגיה מסייעת יכולות להפעיל את הכפתור. */
          if (event.detail !== 0) {
            const center = button.querySelector(".zrp-center");
            const rect = center.getBoundingClientRect();

            const dx =
              (event.clientX - rect.left - rect.width / 2) /
              (rect.width / 2);

            const dy =
              (event.clientY - rect.top - rect.height / 2) /
              (rect.height / 2);

            if (dx * dx + dy * dy > 1) return;
          }

          if (switching) return;
          switching = true;

          const intro = button.closest(".zrp-intro");
          const stage = intro?.parentElement;

          /* שומרים על גובה המעטפת כדי למנוע קפיצה במעבר. */
          if (stage && stage.contains(target)) {
            stage.style.minHeight =
              stage.getBoundingClientRect().height + "px";
          }

          button.classList.add("zrp-opened");
          button.setAttribute("aria-expanded", "true");
          resume();

          /* יציאה עדינה של אזור השער */
          if (
            intro &&
            !reduced.matches &&
            typeof intro.animate === "function"
          ) {
            try {
              await intro.animate(
                [{ opacity: 1 }, { opacity: 0 }],
                { duration: 240, easing: "ease-out" }
              ).finished;
            } catch (_) {}
          }

          /* החלפת השער בגלריה */
          if (intro) intro.hidden = true;
          target.classList.add("zrp-revealed");
          stop();

          /* העברת המיקוד בלי לגלול */
          const heading = target.querySelector("h1,h2,h3") || target;

          if (!heading.hasAttribute("tabindex")) {
            heading.setAttribute("tabindex", "-1");
          }

          heading.focus({ preventScroll: true });

          /* כניסה עדינה של הגלריה */
          if (!reduced.matches && typeof target.animate === "function") {
            target.animate(
              [
                { opacity: 0, transform: "translateY(12px)" },
                { opacity: 1, transform: "translateY(0)" }
              ],
              {
                duration: 420,
                easing: "cubic-bezier(.2,.7,.2,1)"
              }
            );
          }
        });

        if ("IntersectionObserver" in window) {
          const observer = new IntersectionObserver(entries => {
            visible = entries[0].isIntersecting;

            if (!visible) {
              stop();
              entered = false;
              focused = false;
              button.classList.remove("zrp-opened", "zrp-peek");
            } else {
              resume();
            }
          });

          observer.observe(button);
        }

        document.addEventListener("visibilitychange", () => {
          document.hidden ? stop() : resume();
        });

        reduced.addEventListener("change", () => {
          stop();
          resume();
        });

        resume();
      });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init, { once: true });
  } else {
    init();
  }

  if (window.jQuery) {
    jQuery(window).on("elementor/frontend/init", () => {
      window.elementorFrontend?.hooks?.addAction(
        "frontend/element_ready/button.default",
        init
      );
      init();
    });
  }
})();
</script>