/////////////////////////////////////////////
// Initialize when DOM content is loaded
/////////////////////////////////////////////
document.addEventListener("DOMContentLoaded", () => {
  document.documentElement.classList.add("ready");
});

/////////////////////////////////////////////
// Navbar Scroll Down/Up Open/Close
/////////////////////////////////////////////
(function initNavbarScrollBehavior() {
  let previousScrollPos = window.pageYOffset;
  window.addEventListener("scroll", () => {
    const nav = document.querySelector("[nav]");
    if (!nav) return;
    const currentScrollPos = window.pageYOffset;
    nav.classList.toggle(
      "scrolled",
      currentScrollPos > window.innerHeight * 0.1,
    );
    nav.classList.toggle("scroll-down", currentScrollPos > previousScrollPos);
    previousScrollPos = currentScrollPos;
  });
})();

// Navbar mobile menu toggle
(function initMobileMenuToggle() {
  const menuButtons = document.querySelectorAll("[menu-btn]");
  const nav = document.querySelector("[nav]");
  if (!menuButtons.length || !nav) return;
  menuButtons.forEach((btn) => {
    btn.addEventListener("click", () => {
      nav.classList.toggle("open");
    });
  });
})();

/////////////////////////////////////////////
// Lenis
/////////////////////////////////////////////
const lenis = new Lenis({
  lerp: 0.1,
  wheelMultiplier: 0.7,
  gestureOrientation: "vertical",
});

function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);

$("[data-lenis-start]").on("click", () => lenis.start());

$("[data-lenis-stop]").on("click", () => lenis.stop());

$("[data-lenis-toggle]").on("click", function toggleLenis() {
  $(this).toggleClass("stop-scroll");
  lenis[$(this).hasClass("stop-scroll") ? "stop" : "start"]();
});

/////////////////////////////////////////////
// MODAL
/////////////////////////////////////////////
(function initModals() {
  const openers = document.querySelectorAll("[open-modal]");
  if (!openers.length) return;
  openers.forEach((btn) => {
    btn.addEventListener("click", () => {
      const target = btn.getAttribute("open-modal");
      const modal = document.querySelector(`[modal="${target}"]`);
      if (modal) modal.classList.add("open");
    });
  });
  document.querySelectorAll("[close-modal]").forEach((btn) => {
    btn.addEventListener("click", () => {
      const target = btn.getAttribute("close-modal");
      if (target) {
        const modal = document.querySelector(`[modal="${target}"]`);
        if (modal) modal.classList.remove("open");
        return;
      }
      const nearestModal = btn.closest("[modal]");
      if (nearestModal) nearestModal.classList.remove("open");
    });
  });
})();

/////////////////////////////////////////////
// HOMEPAGE // EPISODE CARDS - Active State
/////////////////////////////////////////////
setTimeout(function () {
  const episodeCards = document.querySelectorAll(".episode-card");
  if (episodeCards.length === 0) return;

  // Group cards by their common parent (each "component" of cards)
  const groups = new Map();
  episodeCards.forEach(function (card) {
    const parent = card.parentElement;
    if (!groups.has(parent)) groups.set(parent, []);
    groups.get(parent).push(card);
  });

  // For each group, activate the first child and scope click handling to that group
  groups.forEach(function (cardsInGroup) {
    cardsInGroup[0].classList.add("active");
    cardsInGroup.forEach(function (card) {
      card.addEventListener("click", function () {
        cardsInGroup.forEach(function (c) {
          c.classList.remove("active");
        });
        card.classList.add("active");
      });
    });
  });
}, 2000);

////////////////////////////////
// MIRROR CLICK
////////////////////////////////
handleMirrorBtn();
function handleMirrorBtn() {
  let mirrorBtns = document.querySelectorAll("[mirror-trigger-btn]");
  if (mirrorBtns.length < 1) return;
  mirrorBtns.forEach((btn) => {
    btn.addEventListener("click", () => {
      document.querySelector(btn.getAttribute("mirror-trigger-btn")).click();
    });
  });
}

////////////////////////////////
// BORDER GLOW HOVER
////////////////////////////////
function initHoverBorderGlow(root = document) {
  root.querySelectorAll("[hover-border-glow]").forEach((el) => {
    if (el.dataset.hbgReady) return;
    el.dataset.hbgReady = "true";
    const color = el.getAttribute("hover-border-glow") || "#99ffe8";
    el.style.setProperty("--glow-color", color);
    const size = el.getAttribute("hover-border-glow-size");
    const width = el.getAttribute("hover-border-glow-width");
    if (size) el.style.setProperty("--glow-size", size);
    if (width) el.style.setProperty("--glow-width", width);
  });
}

const DEFAULT_MARGIN = 100;

function updateGlowProximity(mouseX, mouseY) {
  document.querySelectorAll("[hover-border-glow]").forEach((el) => {
    const margin =
      parseFloat(el.getAttribute("hover-border-glow-margin")) || DEFAULT_MARGIN;
    const rect = el.getBoundingClientRect();
    const dx = Math.max(rect.left - mouseX, 0, mouseX - rect.right);
    const dy = Math.max(rect.top - mouseY, 0, mouseY - rect.bottom);
    const dist = Math.sqrt(dx * dx + dy * dy);
    if (dist > margin) {
      el.style.setProperty("--glow-opacity", 0);
      return;
    }
    const proximity = 1 - dist / margin;
    el.style.setProperty("--glow-opacity", proximity.toFixed(3));
    const x = ((mouseX - rect.left) / rect.width) * 100;
    const y = ((mouseY - rect.top) / rect.height) * 100;
    el.style.setProperty("--x", `${x}%`);
    el.style.setProperty("--y", `${y}%`);
  });
}

let hbgLatestX = 0;
let hbgLatestY = 0;
let hbgTicking = false;

function onHbgMouseMove(e) {
  hbgLatestX = e.clientX;
  hbgLatestY = e.clientY;
  if (!hbgTicking) {
    hbgTicking = true;
    requestAnimationFrame(() => {
      updateGlowProximity(hbgLatestX, hbgLatestY);
      hbgTicking = false;
    });
  }
}

function isDesktopPointer() {
  return window.matchMedia("(hover: hover) and (pointer: fine)").matches;
}

function setupHoverBorderGlow() {
  if (!isDesktopPointer()) return;
  if (!document.querySelector("[hover-border-glow]")) return;

  initHoverBorderGlow();
  window.addEventListener("mousemove", onHbgMouseMove);

  const hbgObserver = new MutationObserver(() => {
    if (isDesktopPointer() && document.querySelector("[hover-border-glow]")) {
      initHoverBorderGlow();
      window.addEventListener("mousemove", onHbgMouseMove);
    }
  });
  hbgObserver.observe(document.body, { childList: true, subtree: true });
}

document.addEventListener("DOMContentLoaded", setupHoverBorderGlow);

/* ============================================================
   VIDEO — Vidstack players, bg videos, modal videos, controls
   Now supports: native <video>/MP4, YouTube, and Vimeo in the
   custom [video-wrap] controls (Section 3).
   ============================================================ */

(function () {
  // Gate the entire script on the presence of at least one [video-wrap]
  // element. If none exists on the page, skip everything below — including
  // Vidstack player init and background/modal video lazy-loading — so the
  // script does nothing at all on pages without [video-wrap].
  if (!document.querySelector("[video-wrap]")) return;

  /* ---------- 0. Shared script-loading helpers ---------- */
  function loadScript(src) {
    return new Promise((resolve, reject) => {
      const existing = document.querySelector(`script[src="${src}"]`);
      if (existing) {
        if (existing.dataset.loaded === "true") return resolve();
        existing.addEventListener("load", () => resolve());
        existing.addEventListener("error", reject);
        return;
      }
      const script = document.createElement("script");
      script.src = src;
      script.onload = () => {
        script.dataset.loaded = "true";
        resolve();
      };
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }

  function loadYouTubeAPI() {
    if (window.__ytApiPromise) return window.__ytApiPromise;
    window.__ytApiPromise = new Promise((resolve) => {
      if (window.YT && window.YT.Player) return resolve(window.YT);
      const prevCallback = window.onYouTubeIframeAPIReady;
      window.onYouTubeIframeAPIReady = () => {
        prevCallback && prevCallback();
        resolve(window.YT);
      };
      if (!document.querySelector('script[src*="youtube.com/iframe_api"]')) {
        const tag = document.createElement("script");
        tag.src = "https://www.youtube.com/iframe_api";
        document.head.appendChild(tag);
      }
    });
    return window.__ytApiPromise;
  }

  function loadVimeoAPI() {
    if (window.Vimeo && window.Vimeo.Player)
      return Promise.resolve(window.Vimeo);
    if (window.__vimeoApiPromise) return window.__vimeoApiPromise;
    window.__vimeoApiPromise = loadScript(
      "https://player.vimeo.com/api/player.js",
    ).then(() => window.Vimeo);
    return window.__vimeoApiPromise;
  }

  /* ---------- 1. Vidstack players (video-source-player) ---------- */
  async function initializePlayers() {
    const players = document.querySelectorAll("video-source-player");
    if (!players.length) return;

    [
      "https://cdn.vidstack.io/player/theme.css",
      "https://cdn.vidstack.io/player/video.css",
    ].forEach((href) => {
      if (!document.querySelector(`link[href="${href}"]`)) {
        const link = document.createElement("link");
        link.rel = "stylesheet";
        link.href = href;
        document.head.appendChild(link);
      }
    });

    const getYouTubeId = (url) =>
      (url.match(
        /(?:youtu\.be\/|youtube\.com\/(?:embed\/|watch\?v=))([^?&/]+)/,
      ) || [])[1];
    const getVimeoId = (url) => (url.match(/vimeo\.com\/(\d+)/) || [])[1];

    const fetchJSON = async (url) => {
      try {
        const res = await fetch(url);
        return res.ok ? res.json() : null;
      } catch {
        return null;
      }
    };

    const getYouTubeMeta = async (id) => {
      const data = await fetchJSON(
        `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${id}&format=json`,
      );
      return {
        title: data?.title || "",
        poster: `https://img.youtube.com/vi/${id}/maxresdefault.jpg`,
      };
    };

    const getVimeoMeta = async (id) => {
      const data = await fetchJSON(
        `https://vimeo.com/api/oembed.json?url=https://vimeo.com/${id}`,
      );
      return { title: data?.title || "", poster: data?.thumbnail_url || "" };
    };

    const { VidstackPlayer, VidstackPlayerLayout } =
      await import("https://cdn.vidstack.io/player");

    for (let i = 0; i < players.length; i++) {
      const el = players[i];
      const src = el.getAttribute("data-src");
      const provider = el.getAttribute("data-provider");
      let title = el.getAttribute("data-title") || "";
      let poster = el.getAttribute("data-poster") || "";

      if (provider === "youtube") {
        const meta = await getYouTubeMeta(getYouTubeId(src));
        title ||= meta.title;
        poster ||= meta.poster;
      }

      if (provider === "vimeo") {
        const meta = await getVimeoMeta(getVimeoId(src));
        title ||= meta.title;
        poster ||= meta.poster;
      }

      el.id = `video-player-${i}`;
      try {
        const player = await VidstackPlayer.create({
          target: `#${el.id}`,
          src,
          title,
          poster,
          playsinline: true,
          layout: new VidstackPlayerLayout(),
        });
        player.addEventListener("play", () => console.log("▶️ Playing:", src));
        player.addEventListener("pause", () => console.log("⏸ Paused:", src));
      } catch (err) {
        console.error("Vidstack init failed:", err);
      }
    }
  }

  /* ---------- 2. Lazy-load bg videos, modal videos & embed iframes ---------- */
  document.addEventListener("DOMContentLoaded", () => {
    const loadVideo = (el) => {
      if (!el.dataset.src) return;

      // Plain iframes (YouTube / Vimeo embeds) just need src swapped in.
      if (el.tagName === "IFRAME") {
        console.log("➡️ Loading embed:", el.dataset.src);
        el.src = el.dataset.src;
        el.removeAttribute("data-src");
        return;
      }

      console.log("➡️ Loading video:", el.dataset.src);
      el.src = el.dataset.src;
      el.removeAttribute("data-src");
      el.muted = true;
      el.loop = true;
      el.setAttribute("playsinline", "");
      el.setAttribute("webkit-playsinline", "");
      el.load();
      el.play().catch(() => console.log("⏸ Autoplay blocked:", el.src));
    };

    // Background videos — load when 20% visible
    const bgVideos = document.querySelectorAll(
      "video[play-bg-video][data-src]",
    );
    const bgObserver = new IntersectionObserver(
      (entries, obs) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            loadVideo(entry.target);
            obs.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.2 },
    );
    bgVideos.forEach((v) => bgObserver.observe(v));

    // video-source-player elements — defer modal ones until modal opens
    document
      .querySelectorAll(".video-source-player[data-src]")
      .forEach((el) => {
        const modal = el.closest(".modal");
        const tryLoad = () => {
          if (!el.dataset.loaded) {
            el.dataset.loaded = "true";
            loadVideo(el);
          }
        };

        if (modal) {
          const mo = new MutationObserver((mutations) => {
            mutations.forEach(() => {
              if (modal.classList.contains("open")) {
                tryLoad();
                mo.disconnect();
              }
            });
          });
          mo.observe(modal, { attributes: true, attributeFilter: ["class"] });
        } else {
          const vpObserver = new IntersectionObserver(
            (entries, obs) => {
              entries.forEach((entry) => {
                if (entry.isIntersecting) {
                  tryLoad();
                  obs.unobserve(entry.target);
                }
              });
            },
            { threshold: 0.2 },
          );
          vpObserver.observe(el);
        }
      });

    // [video-wrap] media (video OR iframe) with data-src — lazy load the same way
    document
      .querySelectorAll(
        "[video-wrap] video[data-src], [video-wrap] iframe[data-src]",
      )
      .forEach((el) => {
        const wrapObserver = new IntersectionObserver(
          (entries, obs) => {
            entries.forEach((entry) => {
              if (entry.isIntersecting) {
                loadVideo(entry.target);
                obs.unobserve(entry.target);
              }
            });
          },
          { threshold: 0.2 },
        );
        wrapObserver.observe(el);
      });
  });

  /* ---------- 3. Custom video-wrap controls (native / YouTube / Vimeo) ---------- */

  // Format seconds → M:SS or H:MM:SS
  function formatTime(secs) {
    if (!isFinite(secs) || isNaN(secs)) return "0:00";
    const h = Math.floor(secs / 3600);
    const m = Math.floor((secs % 3600) / 60);
    const s = Math.floor(secs % 60);
    return h > 0
      ? `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`
      : `${m}:${String(s).padStart(2, "0")}`;
  }

  /* --- Detect which kind of media lives inside a [video-wrap] --- */
  function detectMedia(wrap) {
    const video = wrap.querySelector("video");
    if (video)
      return {
        type: "native",
        el: video,
        autoplay: video.hasAttribute("autoplay"),
        loop: video.hasAttribute("loop"),
      };

    const iframe = wrap.querySelector("iframe");
    if (iframe) {
      const src = iframe.getAttribute("src") || iframe.dataset.src || "";
      const autoplay = iframe.hasAttribute("autoplay");
      const loop = iframe.hasAttribute("loop");
      if (/youtube\.com|youtu\.be/i.test(src))
        return { type: "youtube", el: iframe, autoplay, loop };
      if (/vimeo\.com/i.test(src))
        return { type: "vimeo", el: iframe, autoplay, loop };
    }
    return null;
  }

  /* --- Pull a YouTube video ID out of an embed URL (needed for the loop=1+playlist trick) --- */
  function getYouTubeIdFromUrl(url) {
    const match = url.match(/(?:youtu\.be\/|youtube\.com\/embed\/)([^?&/]+)/);
    return match ? match[1] : null;
  }

  /* --- Make sure embed iframes can actually be controlled + fullscreened,
       have their native chrome hidden, and support autoplay/loop --- */
  function prepareEmbedIframe(
    iframe,
    type,
    { autoplay = false, loop = false } = {},
  ) {
    iframe.setAttribute(
      "allow",
      "autoplay; fullscreen; picture-in-picture; encrypted-media",
    );
    iframe.setAttribute("allowfullscreen", "");

    const rawSrc = iframe.getAttribute("src") || iframe.dataset.src;
    if (!rawSrc) return;

    try {
      const url = new URL(rawSrc, window.location.href);

      if (type === "youtube") {
        if (!url.searchParams.has("enablejsapi"))
          url.searchParams.set("enablejsapi", "1");
        if (!url.searchParams.has("origin"))
          url.searchParams.set("origin", window.location.origin);
        // Hide YouTube's own chrome — controls, related-video grid, keyboard shortcuts, branding.
        url.searchParams.set("controls", "0");
        url.searchParams.set("modestbranding", "1");
        url.searchParams.set("rel", "0");
        url.searchParams.set("iv_load_policy", "3");
        url.searchParams.set("disablekb", "1");
        if (autoplay) {
          url.searchParams.set("autoplay", "1");
          url.searchParams.set("mute", "1"); // browsers only allow autoplay when muted
        }
        if (loop) {
          url.searchParams.set("loop", "1");
          // YouTube's loop param only works when paired with playlist=<same video id>.
          const id = getYouTubeIdFromUrl(url.toString());
          if (id) url.searchParams.set("playlist", id);
        }
      }

      if (type === "vimeo") {
        // Hide Vimeo's own chrome — play button, title/byline/portrait overlay, share icon.
        url.searchParams.set("controls", "0");
        url.searchParams.set("title", "0");
        url.searchParams.set("byline", "0");
        url.searchParams.set("portrait", "0");
        if (autoplay) {
          url.searchParams.set("autoplay", "1");
          url.searchParams.set("muted", "1"); // browsers only allow autoplay when muted
        }
        if (loop) url.searchParams.set("loop", "1");
      }

      const newSrc = url.toString();
      if (iframe.hasAttribute("src")) iframe.setAttribute("src", newSrc);
      else iframe.dataset.src = newSrc;
    } catch {
      /* malformed URL — leave as-is */
    }
  }

  /* --- Adapter: native <video> --- */
  function createNativeAdapter(video, { autoplay, loop } = {}) {
    // Browsers only allow autoplay when muted — enforce that so the attribute
    // combo actually works instead of silently failing.
    if (autoplay) video.muted = true;
    return Promise.resolve({
      type: "native",
      mediaEl: video,
      loop,
      supportsIOSFullscreen: true,
      play: () => video.play().catch(() => {}), // swallow autoplay-policy rejections
      pause: () => video.pause(),
      isPaused: () => video.paused,
      isMuted: () => video.muted,
      setMuted: (m) => {
        video.muted = m;
      },
      getCurrentTime: () => video.currentTime || 0,
      getDuration: () => video.duration || 0,
      seek: (t) => {
        video.currentTime = t;
      },
      getFullscreenTarget: () => video,
      on: (evt, cb) => video.addEventListener(evt, cb),
    });
  }

  /* --- Adapter: YouTube (via IFrame Player API) --- */
  function createYouTubeAdapter(initialIframe, { autoplay, loop } = {}) {
    let iframe = initialIframe;
    prepareEmbedIframe(iframe, "youtube", { autoplay, loop });

    return loadYouTubeAPI().then(
      (YT) =>
        new Promise((resolve) => {
          const listeners = {};
          const emit = (evt) => (listeners[evt] || []).forEach((cb) => cb());
          let ready = false;
          let priming = !autoplay; // suppress play/pause emits during the brief "wake up" sequence below
          let unmuteUnlocked = false; // becomes true after the one-time reload-based unmute below
          let ytPlayer;
          let wasPlayingAtUnmute = false; // remembers play state across the unmute-triggered iframe reload

          function bindPlayer() {
            ytPlayer = new YT.Player(iframe, {
              events: {
                onReady: () => {
                  ready = true;
                  if (!unmuteUnlocked) {
                    // Prime the postMessage channel: without an initial play/pause
                    // round-trip, the very first command sent from OUR custom
                    // controls can get silently dropped until the person clicks
                    // YouTube's own (hidden) controls once. A muted play+immediate
                    // pause "wakes up" the player so subsequent commands land
                    // reliably. `priming` suppresses the play/pause events this
                    // causes so the custom play button doesn't flicker on load.
                    ytPlayer.mute();
                    ytPlayer.playVideo();
                    if (!autoplay) {
                      setTimeout(() => {
                        ytPlayer.pauseVideo();
                        priming = false;
                      }, 30);
                    } else {
                      // Autoplay can silently fail to actually start (slow init,
                      // resource contention with other embeds on a busy page,
                      // etc.) even though nothing threw. Verify shortly after
                      // and retry once if it never actually started, so the
                      // video doesn't get stuck on a black first frame.
                      setTimeout(() => {
                        const state = ytPlayer.getPlayerState();
                        if (
                          state !== YT.PlayerState.PLAYING &&
                          state !== YT.PlayerState.BUFFERING
                        ) {
                          ytPlayer.playVideo();
                        }
                      }, 800);
                    }
                  } else {
                    priming = false; // re-bound after an unmute reload — nothing to prime anymore
                    // The reload's autoplay param can silently get blocked by the
                    // browser's unmuted-autoplay policy (this is common inside
                    // nested iframes, and more likely under rapid repeated
                    // clicks). Retry play explicitly — twice, since a single
                    // retry can still lose the race — then resync the controls
                    // to whatever actually happened so the play/pause button
                    // never gets stuck showing a stale state.
                    if (wasPlayingAtUnmute) ytPlayer.playVideo();
                    setTimeout(() => {
                      if (
                        wasPlayingAtUnmute &&
                        ytPlayer.getPlayerState() !== YT.PlayerState.PLAYING
                      ) {
                        ytPlayer.playVideo();
                      }
                      setTimeout(() => {
                        emit(
                          ytPlayer.getPlayerState() === YT.PlayerState.PLAYING
                            ? "play"
                            : "pause",
                        );
                      }, 700);
                    }, 500);
                  }
                  emit("loadedmetadata");
                  resolve(adapter); // no-op after the first call — a promise only resolves once
                },
                onStateChange: (e) => {
                  if (priming) return;
                  if (e.data === YT.PlayerState.PLAYING) emit("play");
                  else if (e.data === YT.PlayerState.PAUSED) emit("pause");
                  else if (e.data === YT.PlayerState.ENDED) emit("ended");
                },
              },
            });
          }

          bindPlayer();

          const adapter = {
            type: "youtube",
            get mediaEl() {
              return iframe;
            },
            loop,
            supportsIOSFullscreen: false,
            play: () => ytPlayer.playVideo(),
            pause: () => ytPlayer.pauseVideo(),
            isPaused: () =>
              !ready || ytPlayer.getPlayerState() !== YT.PlayerState.PLAYING,
            isMuted: () => ready && ytPlayer.isMuted(),
            setMuted: (m) => {
              if (!ready) return;
              if (m) {
                ytPlayer.mute();
                return;
              }
              if (unmuteUnlocked) {
                ytPlayer.unMute();
                return;
              }
              // Browsers specifically block a script-triggered unMute() on a
              // cross-origin iframe that autoplayed muted — this is Chrome's
              // documented anti-abuse measure against "autoplay muted, then
              // silently unmute" and it holds even from within a genuine click
              // handler, until the iframe has had direct in-frame interaction.
              // The reliable fix: reload with the unmuted state baked in. A
              // fresh navigation that's a direct result of this click IS
              // allowed to play with sound, and it also unlocks plain
              // unMute() calls for the rest of this iframe's lifetime.
              //
              // Important: YouTube's IFrame API does NOT support rebinding a
              // second YT.Player to an iframe element that already has one —
              // doing so returns a broken player object (methods throw "is
              // not a function"). So instead of just changing iframe.src, we
              // swap in a genuinely fresh iframe element and bind fresh.
              unmuteUnlocked = true;
              const currentTime = ytPlayer.getCurrentTime() || 0;
              const wasPlaying =
                ytPlayer.getPlayerState() === YT.PlayerState.PLAYING;
              wasPlayingAtUnmute = wasPlaying;
              ready = false;
              try {
                const url = new URL(iframe.src);
                url.searchParams.set("mute", "0");
                url.searchParams.set("autoplay", wasPlaying ? "1" : "0");
                url.searchParams.set("start", String(Math.floor(currentTime)));
                const freshIframe = iframe.cloneNode(false);
                freshIframe.setAttribute("src", url.toString());
                iframe.replaceWith(freshIframe);
                iframe = freshIframe;
              } catch {
                /* malformed URL — nothing we can do, leave as-is */
              }
              bindPlayer();
            },
            getCurrentTime: () => (ready ? ytPlayer.getCurrentTime() || 0 : 0),
            getDuration: () => (ready ? ytPlayer.getDuration() || 0 : 0),
            seek: (t) => ready && ytPlayer.seekTo(t, true),
            getFullscreenTarget: () => iframe,
            on: (evt, cb) => {
              listeners[evt] = listeners[evt] || [];
              listeners[evt].push(cb);
            },
          };
        }),
    );
  }

  /* --- Adapter: Vimeo (via Player.js SDK) --- */
  function createVimeoAdapter(initialIframe, { autoplay, loop } = {}) {
    let iframe = initialIframe;
    prepareEmbedIframe(iframe, "vimeo", { autoplay, loop });

    return loadVimeoAPI().then(
      (Vimeo) =>
        new Promise((resolve) => {
          const listeners = {};
          const emit = (evt) => (listeners[evt] || []).forEach((cb) => cb());
          let priming = !autoplay; // suppress play/pause emits during the brief "wake up" sequence below
          let unmuteUnlocked = false; // becomes true after the one-time reload-based unmute below
          let player;
          let wasPlayingAtUnmute2 = false; // remembers play state across the unmute-triggered iframe reload
          let seekAtUnmute2 = 0; // remembers playhead position across the unmute-triggered iframe reload

          // Vimeo's getCurrentTime()/getDuration() are async, so we cache the
          // last known value + wall-clock time and interpolate synchronously,
          // the same trick the original native code used for smooth progress.
          const cache = {
            time: 0,
            duration: 0,
            wall: performance.now(),
            paused: true,
            muted: false,
          };

          function bindPlayer() {
            player = new Vimeo.Player(iframe);

            player.getVolume().then((v) => (cache.muted = v === 0));

            player.on("timeupdate", (data) => {
              cache.time = data.seconds;
              if (data.duration) cache.duration = data.duration;
              cache.wall = performance.now();
            });
            player.on("play", () => {
              cache.paused = false;
              cache.wall = performance.now();
              if (!priming) emit("play");
            });
            player.on("pause", () => {
              cache.paused = true;
              if (!priming) emit("pause");
            });
            player.on("ended", () => {
              cache.paused = true;
              emit("ended");
            });
            player.on("seeked", (data) => {
              cache.time = data.seconds;
              cache.wall = performance.now();
            });

            // Wait for both readiness AND duration together — fetching duration
            // separately created a race where the UI could render before the
            // value arrived, leaving the total-time display stuck at 0:00.
            Promise.all([player.ready(), player.getDuration()]).then(
              ([, duration]) => {
                cache.duration = duration;
                if (!unmuteUnlocked) {
                  // Same priming trick as YouTube: wake up the postMessage channel
                  // with a muted play+pause round-trip so the first real command
                  // from our custom controls isn't the one that gets dropped.
                  // `priming` suppresses the resulting play/pause events so the
                  // custom play button doesn't flicker on load.
                  player.setVolume(0).then(() => {
                    player
                      .play()
                      .then(() => {
                        if (!autoplay) {
                          setTimeout(
                            () => player.pause().then(() => (priming = false)),
                            30,
                          );
                        } else {
                          // Same rationale as YouTube: the play() promise resolving
                          // doesn't guarantee playback actually started — verify
                          // shortly after and retry once if it's still paused, so
                          // the video doesn't get stuck on a black first frame.
                          setTimeout(() => {
                            player.getPaused().then((paused) => {
                              if (paused) player.play().catch(() => {});
                            });
                          }, 800);
                        }
                      })
                      .catch(() => {
                        priming = false;
                        if (autoplay) {
                          setTimeout(() => player.play().catch(() => {}), 800);
                        }
                      });
                  });
                } else {
                  priming = false; // re-bound after an unmute reload — nothing to prime anymore
                  // Same rationale as YouTube: the reload's autoplay param can get
                  // blocked by the browser (more likely under rapid repeated
                  // clicks), so retry explicitly — twice, since a single retry
                  // can still lose the race — and re-seek to where we left off,
                  // then resync the controls to whatever actually happened so
                  // the play/pause button never gets stuck.
                  player
                    .setCurrentTime(seekAtUnmute2)
                    .catch(() => {})
                    .then(() => {
                      if (wasPlayingAtUnmute2) player.play().catch(() => {});
                      setTimeout(() => {
                        player.getPaused().then((paused) => {
                          if (paused && wasPlayingAtUnmute2) {
                            player.play().catch(() => {});
                            setTimeout(() => {
                              player
                                .getPaused()
                                .then((paused2) =>
                                  emit(paused2 ? "pause" : "play"),
                                );
                            }, 700);
                          } else {
                            emit(paused ? "pause" : "play");
                          }
                        });
                      }, 500);
                    });
                }
                emit("loadedmetadata");
                resolve(adapter); // no-op after the first call — a promise only resolves once
              },
            );
          }

          bindPlayer();

          const adapter = {
            type: "vimeo",
            get mediaEl() {
              return iframe;
            },
            loop,
            supportsIOSFullscreen: false,
            play: () => player.play().catch(() => {}), // swallow autoplay-policy rejections
            pause: () => player.pause(),
            isPaused: () => cache.paused,
            isMuted: () => cache.muted,
            setMuted: (m) => {
              if (m) {
                cache.muted = true;
                player.setVolume(0).catch(() => {});
                return;
              }
              if (unmuteUnlocked) {
                cache.muted = false;
                player.setVolume(1).catch(() => {});
                return;
              }
              // Same restriction as YouTube: browsers block a script-triggered
              // volume-up on a cross-origin iframe that autoplayed muted, even
              // from within a genuine click handler, until the iframe has had
              // direct in-frame interaction. Reloading with the unmuted state
              // baked in is a fresh navigation that's a direct result of this
              // click, which browsers do allow to play with sound — and it
              // unlocks plain setVolume() calls for the rest of this iframe's
              // lifetime.
              //
              // As with YouTube, we swap in a genuinely fresh iframe element
              // rather than just changing src in place — reusing the same
              // element for a second Vimeo.Player instance is unreliable.
              unmuteUnlocked = true;
              cache.muted = false;
              const currentTime = cache.time;
              const wasPlaying = !cache.paused;
              wasPlayingAtUnmute2 = wasPlaying;
              seekAtUnmute2 = currentTime;
              try {
                const url = new URL(iframe.src);
                url.searchParams.set("muted", "0");
                url.searchParams.set("autoplay", wasPlaying ? "1" : "0");
                url.hash = `t=${Math.floor(currentTime)}s`;
                const freshIframe = iframe.cloneNode(false);
                freshIframe.setAttribute("src", url.toString());
                iframe.replaceWith(freshIframe);
                iframe = freshIframe;
              } catch {
                /* malformed URL — nothing we can do, leave as-is */
              }
              bindPlayer();
            },
            getCurrentTime: () => {
              if (cache.paused) return cache.time;
              const elapsed = (performance.now() - cache.wall) / 1000;
              return Math.min(cache.time + elapsed, cache.duration || Infinity);
            },
            getDuration: () => cache.duration,
            seek: (t) => {
              cache.time = t;
              cache.wall = performance.now();
              player.setCurrentTime(t).catch(() => {});
            },
            getFullscreenTarget: () => iframe,
            on: (evt, cb) => {
              listeners[evt] = listeners[evt] || [];
              listeners[evt].push(cb);
            },
          };
        }),
    );
  }

  function createAdapter(media) {
    const opts = { autoplay: media.autoplay, loop: media.loop };
    if (media.type === "native") return createNativeAdapter(media.el, opts);
    if (media.type === "youtube") return createYouTubeAdapter(media.el, opts);
    if (media.type === "vimeo") return createVimeoAdapter(media.el, opts);
    return Promise.resolve(null);
  }

  const wraps = document.querySelectorAll("[video-wrap]");
  const wrapAdapters = new WeakMap();

  function syncMute(wrap) {
    const adapter = wrapAdapters.get(wrap);
    if (!adapter) return;
    adapter.setMuted(wrap.getAttribute("video-wrap") === "mute");
  }

  async function initVideoWrap(wrap) {
    const media = detectMedia(wrap);
    if (!media) return; // nothing recognizable inside this wrap

    // Browsers refuse to autoplay unmuted media — force muted so `autoplay`
    // actually works instead of silently doing nothing.
    if (media.autoplay && wrap.getAttribute("video-wrap") !== "mute") {
      console.warn(
        '[video-wrap] autoplay requires starting muted — forcing video-wrap="mute" on',
        wrap,
      );
      wrap.setAttribute("video-wrap", "mute");
    }

    const adapter = await createAdapter(media);
    if (!adapter) return;
    wrapAdapters.set(wrap, adapter);
    syncMute(wrap);

    // querySelectorAll for buttons — every matching element inside this
    // wrap gets wired up, so you can have as many as you like.
    const audioBtns = [...wrap.querySelectorAll("[audio-btn]")];
    const ppBtns = [...wrap.querySelectorAll("[play-pause-btn]")];
    const fsBtns = [...wrap.querySelectorAll("[full-screen-btn]")];

    // Single elements — one progress track / thumb / time display per wrap
    const progWrap = wrap.querySelector("[video-progress-wrap]");
    const progBar = wrap.querySelector("[video-progress]");
    const thumbEl = wrap.querySelector("[video-progress-thumb]");
    const currentEl = wrap.querySelector("[video-current-duration]");
    const totalEl = wrap.querySelector("[video-total-duration]");

    // Shared flag: true while the user is actively dragging the progress bar.
    // The scrubbing code calls adapter.pause()/play() internally to freeze the
    // video while dragging — that fires real 'pause'/'play' events on the
    // adapter, which would otherwise flip [play-pause-btn] even though the
    // user never actually paused. Suppress those UI updates while this is true.
    let isScrubbing = false;

    // ── Play / pause ─────────────────────────────────────────
    if (ppBtns.length) {
      const syncAllPpBtns = () => {
        if (isScrubbing) return; // ignore adapter pause/play events caused by scrubbing itself
        const state = adapter.isPaused() ? "pause" : "play";
        ppBtns.forEach((btn) => btn.setAttribute("play-pause-btn", state));
      };
      ppBtns.forEach((btn) => {
        btn.addEventListener("click", () =>
          adapter.isPaused() ? adapter.play() : adapter.pause(),
        );
      });
      adapter.on("play", syncAllPpBtns);
      adapter.on("pause", syncAllPpBtns);
      syncAllPpBtns();
    }

    // ── Mute / unmute ──────────────────────────────────────────
    audioBtns.forEach((btn) => {
      btn.addEventListener("click", () => {
        const state = wrap.getAttribute("video-wrap");
        wrap.setAttribute("video-wrap", state === "mute" ? "unmute" : "mute");
      });
    });

    // ── Fullscreen ───────────────────────────────────────────
    if (fsBtns.length) {
      const isIOS =
        /iphone|ipad|ipod/i.test(navigator.userAgent) ||
        (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
      const setAllFsBtns = (state) =>
        fsBtns.forEach((btn) => btn.setAttribute("full-screen-btn", state));

      const fsTarget = wrap;
      const requestFS = (el) =>
        el.requestFullscreen?.() ||
        el.webkitRequestFullscreen?.() ||
        el.mozRequestFullScreen?.() ||
        el.msRequestFullscreen?.();
      const exitFS = () =>
        document.exitFullscreen?.() ||
        document.webkitExitFullscreen?.() ||
        document.mozCancelFullScreen?.() ||
        document.msExitFullscreen?.();
      const getFullscreenEl = () =>
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullscreenElement ||
        null;

      const syncAllFsBtns = () => {
        const active =
          getFullscreenEl() === fsTarget ||
          getFullscreenEl() === adapter.getFullscreenTarget();
        setAllFsBtns(active ? "exit" : "enter");
      };

      fsBtns.forEach((btn) => {
        btn.addEventListener("click", () => {
          if (getFullscreenEl()) {
            exitFS();
          } else {
            const req = requestFS(fsTarget);
            req?.catch?.(() => requestFS(adapter.getFullscreenTarget()));
          }
        });
      });

      document.addEventListener("fullscreenchange", syncAllFsBtns);
      document.addEventListener("webkitfullscreenchange", syncAllFsBtns);
      document.addEventListener("mozfullscreenchange", syncAllFsBtns);
      document.addEventListener("MSFullscreenChange", syncAllFsBtns);
    }

    // ── Progress bar + time display ──────────────────────────
    let rafId = null;

    const renderFrame = () => {
      renderOnce();
      rafId = requestAnimationFrame(renderFrame);
    };

    const renderOnce = () => {
      const duration = adapter.getDuration() || 0;
      const current = Math.min(
        adapter.getCurrentTime() || 0,
        duration || Infinity,
      );
      const ratio = duration ? current / duration : 0;
      if (progBar) progBar.style.width = `${ratio * 100}%`;
      if (thumbEl) thumbEl.style.left = `${ratio * 100}%`;
      if (totalEl) totalEl.textContent = formatTime(duration);
      if (currentEl) currentEl.textContent = formatTime(current);
    };

    adapter.on("play", () => {
      cancelAnimationFrame(rafId);
      rafId = requestAnimationFrame(renderFrame);
    });

    adapter.on("pause", () => {
      cancelAnimationFrame(rafId);
      renderOnce();
    });

    adapter.on("ended", () => {
      cancelAnimationFrame(rafId);
      // For YouTube/Vimeo the loop=1 embed param usually handles this on its
      // own, but it's occasionally unreliable (e.g. loop param ignored when
      // combined with certain other params) — so fall back to restarting
      // manually. Native <video loop> is already handled natively and won't
      // even fire 'ended', so this is a harmless no-op for it.
      if (adapter.loop) {
        adapter.seek(0);
        adapter.play();
        return;
      }
      if (progBar) progBar.style.width = "100%";
      if (thumbEl) thumbEl.style.left = "100%";
      if (currentEl) currentEl.textContent = formatTime(adapter.getDuration());
    });

    adapter.on("loadedmetadata", renderOnce);
    renderOnce();

    // ── Scrubbing ─────────────────────────────────────────────
    if (progWrap) {
      let dragging = false;
      let wasPlaying = false;

      const ratioFromEvent = (e) => {
        const rect = progWrap.getBoundingClientRect();
        const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
        return Math.min(Math.max(x / rect.width, 0), 1);
      };

      const applyRatio = (ratio) => {
        if (progBar) progBar.style.width = `${ratio * 100}%`;
        if (thumbEl) thumbEl.style.left = `${ratio * 100}%`;
        const duration = adapter.getDuration() || 0;
        if (currentEl) currentEl.textContent = formatTime(ratio * duration);
      };

      const startScrub = (e) => {
        if (!progWrap) return;
        dragging = true;
        isScrubbing = true; // suppress play-pause-btn flip from the pause() below
        wasPlaying = !adapter.isPaused();
        if (wasPlaying) adapter.pause();
        progWrap.setAttribute("data-scrubbing", "");
        cancelAnimationFrame(rafId);
        applyRatio(ratioFromEvent(e));
      };

      const moveScrub = (e) => {
        if (!dragging || !adapter.getDuration()) return;
        e.cancelable && e.preventDefault();
        applyRatio(ratioFromEvent(e));
      };

      const endScrub = (e) => {
        if (!dragging) return;
        dragging = false;
        progWrap?.removeAttribute("data-scrubbing");
        const safeRatio = isNaN(ratioFromEvent(e)) ? 0 : ratioFromEvent(e);
        const duration = adapter.getDuration() || 0;
        adapter.seek(safeRatio * duration);
        applyRatio(safeRatio);
        if (wasPlaying) adapter.play();
        isScrubbing = false; // resume normal play-pause-btn syncing
      };

      progWrap?.addEventListener("mousedown", (e) => startScrub(e));
      window.addEventListener("mousemove", (e) => moveScrub(e));
      window.addEventListener("mouseup", (e) => endScrub(e));
      progWrap?.addEventListener("touchstart", (e) => startScrub(e), {
        passive: true,
      });
      window.addEventListener("touchmove", (e) => moveScrub(e), {
        passive: false,
      });
      window.addEventListener("touchend", (e) => endScrub(e));
    }

    // When the wrap is unmuted, mute all others
    const attrObserver = new MutationObserver((mutations) => {
      mutations.forEach(({ target }) => {
        syncMute(target);
        if (target.getAttribute("video-wrap") === "unmute") {
          wraps.forEach((w) => {
            if (w !== target) w.setAttribute("video-wrap", "mute");
          });
        }
      });
    });
    wraps.forEach((w) =>
      attrObserver.observe(w, {
        attributes: true,
        attributeFilter: ["video-wrap"],
      }),
    );
  }

  /* ---------- 4. Kick everything off ---------- */
  wraps.forEach(initVideoWrap);
  initializePlayers();
})();

/////////////////////////////////////////////
// Standalone Carousel (Embla-powered)
/////////////////////////////////////////////
(function () {
  "use strict";
  function debounce(fn, wait) {
    let timeoutId;
    return (...args) => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => fn(...args), wait);
    };
  }
  function handleError(error, context) {
    console.error(`[${context}]`, error);
  }
  const logger = {
    log: (...args) => console.log(...args),
    warn: (...args) => console.warn(...args),
  };
  const _libraryPromises = {};
  function isLibraryLoaded(name) {
    if (name === "embla") return typeof window.EmblaCarousel !== "undefined";
    return false;
  }
  function loadLibrary(name) {
    if (isLibraryLoaded(name)) return Promise.resolve();
    if (_libraryPromises[name]) return _libraryPromises[name];
    const urls = {
      embla:
        "https://cdn.jsdelivr.net/npm/embla-carousel@8/embla-carousel.umd.js",
    };
    const url = urls[name];
    if (!url) return Promise.reject(new Error(`Unknown library: ${name}`));
    _libraryPromises[name] = new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.src = url;
      script.onload = () => resolve();
      script.onerror = () => reject(new Error(`Failed to load ${url}`));
      document.head.appendChild(script);
    });
    return _libraryPromises[name];
  }
  let carouselLibraryLoaded = false;
  let loadPromise = null;
  let pendingSliders = [];
  let carouselObserver = null;
  let carouselUid = 0;
  const syncedSliderGroups = new Map();
  const VIEWPORT_SELECTOR = "[carousel-wrapper]";
  const CONTAINER_SELECTOR = "[carousel]";
  const BTNS_WRAPPER_SELECTOR = "[carousel-btns]";
  const PREV_BTN_SELECTOR =
    '[carousel-prev-btn], [carousel-btns] [aria-label="Previous slide"]';
  const NEXT_BTN_SELECTOR =
    '[carousel-next-btn], [carousel-btns] [aria-label="Next slide"]';
  const NAV_BTN_FALLBACK_SELECTOR = "[carousel-btn], button";
  const DOTS_CONTAINER_SELECTOR = "[carousel-dots]";
  const SLIDE_BTN_SELECTOR = "[data-slide-btn]";
  const SLIDE_FALLBACK_SELECTOR = "[carousel-item]";
  const PROGRESS_BAR_SELECTOR = "[carousel-progress-bar]";
  const PROGRESS_FILL_SELECTOR = "[carousel-progress-fill]";
  const MOBILE_MAX_WIDTH = 767;
  const TABLET_MAX_WIDTH = 991;
  function prefersReducedMotion() {
    return (
      typeof window !== "undefined" &&
      window.matchMedia &&
      window.matchMedia("(prefers-reduced-motion: reduce)").matches
    );
  }
  function resetFadeInlineStyles(slider) {
    const carouselContainer = slider.querySelector(CONTAINER_SELECTOR);
    if (!carouselContainer) return;
    carouselContainer.style.position = "";
    carouselContainer.style.display = "";
    carouselContainer.style.height = "";
    carouselContainer.style.transform = "";
    carouselContainer.style.transition = "";
    Array.from(carouselContainer.children).forEach((slide) => {
      slide.style.position = "";
      slide.style.inset = "";
      slide.style.width = "";
      slide.style.opacity = "";
      slide.style.zIndex = "";
      slide.style.willChange = "";
      slide.style.transition = "";
      slide.style.pointerEvents = "";
    });
  }
  function getCarouselTokens(slider) {
    const attrValue = slider.getAttribute("data-carousel");
    if (!attrValue) return [];
    return attrValue
      .toLowerCase()
      .split(/[\s,|]+/)
      .map((token) => token.trim())
      .filter(Boolean);
  }
  function isFadeCarousel(slider) {
    return (
      slider.hasAttribute("data-fade") ||
      slider.getAttribute("data-effect") === "fade" ||
      getCarouselTokens(slider).includes("fade")
    );
  }
  const ensureFadeCarouselAnimateStyles = (() => {
    let injected = false;
    const CSS_TEXT = `\n[carousel-text-animate] { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }\n.is-active [carousel-text-animate] { opacity: 1; transform: translateY(0); }\n.is-active [carousel-text-animate]:nth-child(1) { transition-delay: 0.3s; }\n.is-active [carousel-text-animate]:nth-child(2) { transition-delay: 0.45s; }\n.is-active [carousel-text-animate]:nth-child(3) { transition-delay: 0.6s; }\n[carousel-img-animate] { opacity: 0; transform: scale(0.95); transition: opacity 0.6s ease, transform 0.6s ease; }\n.is-active [carousel-img-animate] { opacity: 1; transform: scale(1); transition-delay: 0.2s; }\n`;
    return () => {
      if (injected || typeof document === "undefined") return;
      injected = true;
      const style = document.createElement("style");
      style.setAttribute("data-carousel-fade-animate", "true");
      style.textContent = CSS_TEXT;
      document.head.appendChild(style);
    };
  })();
  const ensureDotButtonResetStyles = (() => {
    let injected = false;
    const CSS_TEXT = `\n:where(button[carousel-dot]) {\n  appearance: none; -webkit-appearance: none; background: none; border: 0;\n  border-radius: 0; padding: 0; margin: 0; font: inherit; color: inherit;\n  line-height: inherit; cursor: pointer;\n}\n`;
    return () => {
      if (injected || typeof document === "undefined") return;
      injected = true;
      const style = document.createElement("style");
      style.setAttribute("data-carousel-dot-reset", "true");
      style.textContent = CSS_TEXT;
      document.head.appendChild(style);
    };
  })();
  const ensureActiveInViewStyles = (() => {
    let injected = false;
    const CSS_TEXT = `\n[data-carousel][data-active-in-view] [carousel] > * { cursor: pointer; }\n[data-carousel][data-active-in-view] [carousel] > .is-active { position: relative; z-index: 2; }\n`;
    return () => {
      if (injected || typeof document === "undefined") return;
      injected = true;
      const style = document.createElement("style");
      style.setAttribute("data-carousel-active-in-view-style", "true");
      style.textContent = CSS_TEXT;
      document.head.appendChild(style);
    };
  })();
  function shouldInitForViewport(slider) {
    const tokens = getCarouselTokens(slider);
    const onlyMobile = tokens.includes("mobile");
    const onlyTablet = tokens.includes("tablet");
    if (!onlyMobile && !onlyTablet) return true;
    if (typeof window === "undefined") return true;
    if (onlyMobile)
      return window.matchMedia(`(max-width: ${MOBILE_MAX_WIDTH}px)`).matches;
    return window.matchMedia(`(max-width: ${TABLET_MAX_WIDTH}px)`).matches;
  }
  async function loadCarouselLibrary() {
    if (carouselLibraryLoaded || isLibraryLoaded("embla"))
      return Promise.resolve();
    if (loadPromise) return loadPromise;
    loadPromise = (async () => {
      try {
        await loadLibrary("embla");
        if (typeof window.EmblaCarousel === "undefined") {
          throw new Error("Carousel library failed to load");
        }
        carouselLibraryLoaded = true;
        if (pendingSliders.length > 0) {
          logger.log(
            `Initializing ${pendingSliders.length} pending carousel(s)...`,
          );
          initializeCarousels(pendingSliders);
          pendingSliders = [];
        }
        return true;
      } catch (error) {
        handleError(error, "Carousel Library Loader");
        loadPromise = null;
        throw error;
      }
    })();
    return loadPromise;
  }
  async function loadAndInitSlider(slider) {
    if (slider._carouselInitialized) return;
    if (!carouselLibraryLoaded && !pendingSliders.includes(slider)) {
      pendingSliders.push(slider);
    }
    if (!carouselLibraryLoaded) {
      await loadCarouselLibrary();
    }
    if (carouselLibraryLoaded && !slider._carouselInitialized) {
      initializeCarousels([slider]);
    }
  }
  function initCarousel() {
    const sliders = document.querySelectorAll("[data-carousel]");
    if (!sliders.length) return;
    if (Array.from(sliders).some(isFadeCarousel))
      ensureFadeCarouselAnimateStyles();
    if (
      Array.from(sliders).some((s) => s.hasAttribute("data-active-in-view"))
    ) {
      ensureActiveInViewStyles();
    }
    logger.log(
      `⏳ Found ${sliders.length} carousel(s) - will load when visible...`,
    );
    if (carouselObserver) carouselObserver.disconnect();
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;
          const slider = entry.target;
          if (!shouldInitForViewport(slider)) return;
          observer.unobserve(slider);
          slider.setAttribute("data-carousel-observed", "true");
          loadAndInitSlider(slider);
        });
      },
      {
        root: null,
        rootMargin: "200px",
        threshold: 0,
      },
    );
    carouselObserver = observer;
    sliders.forEach((slider) => observer.observe(slider));
  }
  function initializeCarousels(sliderList) {
    if (!sliderList || !sliderList.length) return;
    sliderList.forEach((slider) => {
      if (slider._carouselInitialized) return;
      if (!shouldInitForViewport(slider)) return;
      const carouselRoot = slider.querySelector(VIEWPORT_SELECTOR) || slider;
      const carouselViewport =
        slider.querySelector(VIEWPORT_SELECTOR) || carouselRoot;
      const carouselContainer = slider.querySelector(CONTAINER_SELECTOR);
      if (!carouselViewport) {
        logger.warn("Carousel viewport not found in slider:", slider);
        return;
      }
      const resolvedContainer =
        carouselContainer || carouselViewport.children[0];
      if (!resolvedContainer) {
        logger.warn(
          "Carousel has no slides container — check DOM structure:",
          slider,
        );
        return;
      }
      slider._carouselInitialized = true;
      const navButtonsWrapper = slider.querySelector(BTNS_WRAPPER_SELECTOR);
      const fallbackNavButtons = navButtonsWrapper
        ? Array.from(
            navButtonsWrapper.querySelectorAll(NAV_BTN_FALLBACK_SELECTOR),
          )
        : [];
      const explicitNextBtn =
        slider.querySelector("[slider-next-btn]") ||
        slider.querySelector(NEXT_BTN_SELECTOR);
      const explicitPrevBtn =
        slider.querySelector("[slider-prev-btn]") ||
        slider.querySelector(PREV_BTN_SELECTOR);
      const prevBtn = explicitPrevBtn || fallbackNavButtons[0] || null;
      let nextBtn =
        explicitNextBtn ||
        (fallbackNavButtons.length > 1
          ? fallbackNavButtons[1]
          : fallbackNavButtons[0]) ||
        null;
      if (prevBtn && nextBtn && prevBtn === nextBtn) nextBtn = null;
      let slideButtons = [];
      let slideButtonIndices = [];
      const customProgressBar = slider.querySelector(PROGRESS_BAR_SELECTOR);
      const syncId = slider.getAttribute("data-sync");
      const centerMode = slider.hasAttribute("data-center");
      const centerBounds = slider.hasAttribute("data-center-bounds");
      const clickToCenter = slider.hasAttribute("data-click-center");
      const activeInView = slider.hasAttribute("data-active-in-view");
      const slideAllView = slider.hasAttribute("data-slide-all-view");
      const loopMode = slider.hasAttribute("data-loop");
      const disableDrag = slider.hasAttribute("data-no-drag");
      const dragFree = slider.hasAttribute("data-drag-free");
      const autoplayEnabled = slider.hasAttribute("data-autoplay");
      const autoplayStopOnInteraction = slider.hasAttribute(
        "data-autoplay-stop-on-interaction",
      );
      const pauseOnHover = slider.hasAttribute("data-pause-on-hover");
      const fadeMode = isFadeCarousel(slider);
      const verticalMode = slider.hasAttribute("data-vertical");
      const slideClassesEnabled = slider.hasAttribute("data-slide-classes");
      const alignAttr = slider.getAttribute("data-align");
      const autoplayDelayAttr = slider.getAttribute("data-autoplay-delay");
      const autoplayDelay = Number.isFinite(
        Number.parseInt(autoplayDelayAttr, 10),
      )
        ? Number.parseInt(autoplayDelayAttr, 10)
        : 8e3;
      const fadeDurationAttr = slider.getAttribute("data-fade-duration");
      const fadeDuration = Number.isFinite(
        Number.parseInt(fadeDurationAttr, 10),
      )
        ? Math.max(150, Number.parseInt(fadeDurationAttr, 10))
        : 650;
      const fadeEase =
        slider.getAttribute("data-fade-ease") ||
        "cubic-bezier(0.22, 1, 0.36, 1)";
      // --- NEW: starting slide index support ---
      // Usage: <div data-carousel data-start-index="2"> starts on the 3rd slide (0-based).
      // Accepts negative values to count from the end, e.g. "-1" for the last slide.
      // If data-center is set and no explicit data-start-index is given, default to
      // the middle slide instead of slide 0.
      const startIndexAttr = slider.getAttribute("data-start-index");
      let requestedStartIndex = Number.parseInt(startIndexAttr, 10);
      if (!Number.isFinite(requestedStartIndex)) {
        if (centerMode) {
          const initialSlideCount = resolvedContainer.children.length;
          requestedStartIndex =
            initialSlideCount > 0 ? Math.floor((initialSlideCount - 1) / 2) : 0;
        } else {
          requestedStartIndex = 0;
        }
      }
      const carouselOptions = {
        container: resolvedContainer,
        align: alignAttr || (centerMode ? "center" : "start"),
        containScroll: fadeMode
          ? "keepSnaps"
          : centerMode && !centerBounds
            ? false
            : centerMode
              ? "keepSnaps"
              : "trimSnaps",
        loop: fadeMode ? false : loopMode,
        draggable: fadeMode ? false : !disableDrag,
        watchDrag: fadeMode ? false : !disableDrag,
        dragFree: fadeMode ? false : dragFree,
        axis: verticalMode ? "y" : "x",
        watchResize: !fadeMode,
        // "auto" tells Embla to scroll by however many slides are
        // currently visible in the viewport (a full "page" at a time)
        // instead of the default one-slide-per-interaction behavior.
        slidesToScroll: fadeMode ? 1 : slideAllView ? "auto" : 1,
        // Embla resolves negative indices and clamps out-of-range values
        // internally, so we can pass the raw parsed value straight through.
        startIndex: requestedStartIndex,
      };
      let carouselApi = null;
      const cleanupTasks = [];
      let scrollToIndex = () => {};
      let restartAutoplay = null;
      let lastButtonStateKey = null;
      let progressRafId = null;
      let progressStartTime = null;
      let progressResumeOffset = 0;
      let interactionHold = false;
      let progressFillEl = null;
      let fadeLayoutSlideCount = 0;
      function getProgressFill() {
        if (!customProgressBar) return null;
        if (progressFillEl) return progressFillEl;
        progressFillEl = customProgressBar.querySelector(
          PROGRESS_FILL_SELECTOR,
        );
        if (!progressFillEl && customProgressBar.children.length === 1) {
          progressFillEl = customProgressBar.firstElementChild;
          progressFillEl.setAttribute("carousel-progress-fill", "");
        }
        return progressFillEl;
      }
      function cancelProgressBar(reset = true) {
        if (progressRafId !== null) {
          cancelAnimationFrame(progressRafId);
          progressRafId = null;
        }
        progressStartTime = null;
        if (reset && customProgressBar) {
          const fill = getProgressFill();
          if (fill) {
            fill.style.transition = "none";
            fill.style.width = "0%";
          }
        }
      }
      function startProgressBar(resume = false) {
        if (!customProgressBar || !autoplayEnabled) return;
        if (prefersReducedMotion()) return;
        const fill = getProgressFill();
        if (!fill) return;
        if (!resume) {
          progressResumeOffset = 0;
          fill.style.transition = "none";
          fill.style.width = "0%";
          fill.offsetWidth;
        }
        if (interactionHold) return;
        progressStartTime = null;
        function tick(timestamp) {
          if (progressStartTime === null) {
            progressStartTime = timestamp - progressResumeOffset;
            progressResumeOffset = 0;
          }
          const elapsed = timestamp - progressStartTime;
          const progress = Math.min((elapsed / autoplayDelay) * 100, 100);
          fill.style.width = `${progress}%`;
          if (carouselApi) {
            const totalSlides = carouselApi.scrollSnapList().length;
            const currentIndex = carouselApi.selectedScrollSnap();
            customProgressBar.setAttribute(
              "data-progress",
              Math.round(progress),
            );
            customProgressBar.setAttribute(
              "data-current-slide",
              currentIndex + 1,
            );
            customProgressBar.setAttribute("data-total-slides", totalSlides);
          }
          if (progress < 100) {
            progressRafId = requestAnimationFrame(tick);
            return;
          }
          progressRafId = null;
          progressStartTime = null;
          if (carouselApi) {
            if (fadeMode) stepFade(1);
            else if (carouselApi.canScrollNext()) carouselApi.scrollNext();
            else carouselApi.scrollTo(0);
          }
        }
        progressRafId = requestAnimationFrame(tick);
      }
      function updateStaticProgressBar() {
        if (!customProgressBar || autoplayEnabled || !carouselApi) return;
        const fill = getProgressFill();
        if (!fill) return;
        const totalSlides = carouselApi.scrollSnapList().length;
        const currentIndex = carouselApi.selectedScrollSnap();
        const progress =
          totalSlides > 1
            ? Math.round((currentIndex / (totalSlides - 1)) * 100)
            : 100;
        fill.style.width = `${progress}%`;
        customProgressBar.setAttribute("data-progress", progress);
        customProgressBar.setAttribute("data-current-slide", currentIndex + 1);
        customProgressBar.setAttribute("data-total-slides", totalSlides);
      }
      function getSlides() {
        if (carouselContainer) return Array.from(carouselContainer.children);
        return Array.from(slider.querySelectorAll(SLIDE_FALLBACK_SELECTOR));
      }
      // Maps each scroll-snap ("page") to the slide indices it contains.
      // Falls back to one-slide-per-snap if Embla's internal registry
      // isn't available for some reason.
      function getSnapSlideIndices() {
        if (!carouselApi) return [];
        try {
          const engine =
            typeof carouselApi.internalEngine === "function"
              ? carouselApi.internalEngine()
              : null;
          if (
            engine &&
            Array.isArray(engine.slideRegistry) &&
            engine.slideRegistry.length
          ) {
            return engine.slideRegistry;
          }
        } catch (_) {}
        return carouselApi.scrollSnapList().map((_, i) => [i]);
      }
      // Returns the slide indices that should be treated as "active" right
      // now. In data-slide-all-view mode this is every slide in the current
      // page/group; otherwise it's just the single selected slide.
      function getActiveIndices() {
        if (!carouselApi) return [];
        if (
          slideAllView &&
          !fadeMode &&
          typeof carouselApi.slidesInView === "function"
        ) {
          const inView = carouselApi.slidesInView();
          if (inView.length) return inView;
        }
        return [carouselApi.selectedScrollSnap()];
      }
      function stepFade(direction) {
        if (!carouselApi) return;
        const totalSlides = carouselApi.scrollSnapList().length;
        if (totalSlides < 2) return;
        const currentIndex = carouselApi.selectedScrollSnap();
        scrollToIndex(
          (currentIndex + direction + totalSlides) % totalSlides,
          true,
        );
      }
      function applyFadeLayout(remeasure = false) {
        if (!fadeMode || !carouselContainer) return;
        const slides = getSlides();
        if (!slides.length) return;
        carouselContainer.style.transform = "none";
        carouselContainer.style.transition = "none";
        const alreadyLaidOut =
          !remeasure &&
          fadeLayoutSlideCount === slides.length &&
          slides.every((s) => s.style.position === "absolute");
        if (alreadyLaidOut) return;
        const previousHeight = carouselContainer.style.height;
        if (remeasure && fadeLayoutSlideCount > 0) {
          carouselContainer.style.height = "";
          carouselContainer.style.display = "";
          carouselContainer.style.position = "";
          slides.forEach((slide) => {
            slide.style.position = "";
            slide.style.inset = "";
            slide.style.width = "";
          });
        }
        const maxHeight = slides.reduce(
          (max, slide) => Math.max(max, slide.offsetHeight),
          0,
        );
        carouselViewport.style.overflow = "hidden";
        carouselContainer.style.position = "relative";
        carouselContainer.style.display = "block";
        if (maxHeight > 0) carouselContainer.style.height = `${maxHeight}px`;
        else if (previousHeight)
          carouselContainer.style.height = previousHeight;
        slides.forEach((slide) => {
          slide.style.position = "absolute";
          slide.style.inset = "0";
          slide.style.width = "100%";
          slide.style.willChange = "opacity";
          slide.style.transition = `opacity ${fadeDuration}ms ${fadeEase}`;
        });
        fadeLayoutSlideCount = slides.length;
      }
      function ensureDots() {
        const dotsContainer = slider.querySelector(DOTS_CONTAINER_SELECTOR);
        const slides = getSlides();
        if (!slides.length) return;
        // In slide-all-view mode, dots represent pages (groups of slides)
        // rather than individual slides.
        const groupIndices =
          slideAllView && !fadeMode ? getSnapSlideIndices() : null;
        const dotCount =
          groupIndices && groupIndices.length
            ? groupIndices.length
            : slides.length;
        if (dotsContainer) {
          const existingDots =
            dotsContainer.querySelectorAll(SLIDE_BTN_SELECTOR);
          if (existingDots.length > 0) {
            if (existingDots.length !== dotCount) {
              logger.warn(
                `Carousel has ${dotCount} ${groupIndices ? "page(s)" : "slide(s)"} but ${existingDots.length} dot buttons. Button count should match.`,
              );
            }
          } else {
            dotsContainer.innerHTML = "";
            ensureDotButtonResetStyles();
            const fragment = document.createDocumentFragment();
            for (let index = 0; index < dotCount; index += 1) {
              const dot = document.createElement("button");
              dot.type = "button";
              dot.className = "carousel-dot";
              dot.setAttribute("carousel-dot", "");
              dot.setAttribute("data-slide-btn", "");
              dot.setAttribute("aria-label", `Go to slide ${index + 1}`);
              fragment.appendChild(dot);
            }
            dotsContainer.appendChild(fragment);
          }
        }
        slideButtons = Array.from(slider.querySelectorAll(SLIDE_BTN_SELECTOR));
        slideButtons.sort((a, b) => {
          const aIndex = a.hasAttribute("data-slide-index")
            ? Number.parseInt(a.getAttribute("data-slide-index"), 10)
            : null;
          const bIndex = b.hasAttribute("data-slide-index")
            ? Number.parseInt(b.getAttribute("data-slide-index"), 10)
            : null;
          if (aIndex !== null && bIndex !== null) return aIndex - bIndex;
          if (aIndex !== null) return -1;
          if (bIndex !== null) return 1;
          const position = a.compareDocumentPosition(b);
          return position & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
        });
        slideButtons = slideButtons.slice(0, dotCount);
        const claimedIndices = new Set();
        slideButtons.forEach((button) => {
          if (button.hasAttribute("data-slide-index")) {
            claimedIndices.add(
              Number.parseInt(button.getAttribute("data-slide-index"), 10),
            );
          }
        });
        let nextFreeIndex = 0;
        slideButtonIndices = slideButtons.map((button, arrayIndex) => {
          if (button.hasAttribute("data-slide-index")) {
            return Number.parseInt(button.getAttribute("data-slide-index"), 10);
          }
          if (groupIndices) {
            // Point each auto-generated dot at the first slide of its page,
            // so scrollTo() lands on the correct group.
            const targetSlides = groupIndices[arrayIndex];
            return targetSlides && targetSlides.length
              ? targetSlides[0]
              : arrayIndex;
          }
          while (claimedIndices.has(nextFreeIndex)) nextFreeIndex += 1;
          claimedIndices.add(nextFreeIndex);
          return nextFreeIndex;
        });
      }
      function updateActiveSlides() {
        if (!carouselApi) return;
        const slides = getSlides();
        if (!slides.length) return;
        if (fadeMode) {
          if (!carouselContainer) {
            logger.warn(
              "Fade mode requires a carousel container inside the slider.",
            );
            return;
          }
          applyFadeLayout();
        }
        const activeIndices = getActiveIndices();
        const activeIndex = activeIndices.length
          ? activeIndices[0]
          : carouselApi.selectedScrollSnap();
        const visibleIndices =
          slideClassesEnabled && carouselApi.slidesInView
            ? carouselApi.slidesInView()
            : null;
        slides.forEach((slide, index) => {
          Array.from(slide.classList).forEach((className) => {
            if (/^(upcoming|upcomming|passed)-\d+$/.test(className))
              slide.classList.remove(className);
          });
          slide.classList.toggle("is-active", activeIndices.includes(index));
          if (fadeMode) {
            const isActive = index === activeIndex;
            slide.style.opacity = isActive ? "1" : "0";
            slide.style.zIndex = isActive ? "2" : "1";
            slide.style.pointerEvents = isActive ? "auto" : "none";
            if (isActive) {
              slide.removeAttribute("aria-hidden");
              slide.inert = false;
            } else {
              if (slide.contains(document.activeElement))
                slider.focus({
                  preventScroll: true,
                });
              slide.setAttribute("aria-hidden", "true");
              slide.inert = true;
            }
          }
          if (!slideClassesEnabled) return;
          slide.classList.toggle(
            "is-visible",
            fadeMode ? index === activeIndex : visibleIndices.includes(index),
          );
          slide.classList.toggle("is-passed", index < activeIndex);
          slide.classList.toggle("is-upcoming", index > activeIndex);
          slide.classList.toggle("is-prev", index === activeIndex - 1);
          slide.classList.toggle("is-next", index === activeIndex + 1);
          if (index > activeIndex)
            slide.classList.add(`upcoming-${index - activeIndex}`);
          else if (index < activeIndex)
            slide.classList.add(`passed-${activeIndex - index}`);
        });
        updateSlideButtons(activeIndex);
      }
      function updateSlideButtons(activeIndex) {
        if (!slideButtons.length) return;
        let activeButton = null;
        slideButtons.forEach((button, arrayIndex) => {
          const buttonIndex = slideButtonIndices[arrayIndex] ?? arrayIndex;
          const isActive = buttonIndex === activeIndex;
          button.classList.toggle("is-active", isActive);
          if (isActive) {
            activeButton = button;
            button.setAttribute("aria-current", "true");
          } else {
            button.removeAttribute("aria-current");
          }
        });
        keepActiveSlideButtonInView(activeButton);
      }
      function keepActiveSlideButtonInView(activeButton) {
        if (!activeButton) return;
        const scrollParent = findHorizontalScrollParent(activeButton);
        if (!scrollParent) return;
        const parentRect = scrollParent.getBoundingClientRect();
        const buttonRect = activeButton.getBoundingClientRect();
        const sidePadding = 8;
        const isOutOfView =
          buttonRect.left < parentRect.left + sidePadding ||
          buttonRect.right > parentRect.right - sidePadding;
        if (!isOutOfView) return;
        const parentCenter = parentRect.left + parentRect.width / 2;
        const buttonCenter = buttonRect.left + buttonRect.width / 2;
        const delta = buttonCenter - parentCenter;
        const targetScrollLeft = Math.max(
          0,
          Math.min(
            scrollParent.scrollWidth - scrollParent.clientWidth,
            scrollParent.scrollLeft + delta,
          ),
        );
        scrollParent.scrollTo({
          left: targetScrollLeft,
          behavior: prefersReducedMotion() ? "auto" : "smooth",
        });
      }
      function findHorizontalScrollParent(element) {
        let current = element.parentElement;
        while (current && current !== slider) {
          const styles = window.getComputedStyle(current);
          const overflowX = styles.overflowX;
          const hasOverflowingContent =
            current.scrollWidth > current.clientWidth + 1;
          const canScrollX =
            hasOverflowingContent &&
            (overflowX === "auto" ||
              overflowX === "scroll" ||
              overflowX === "hidden");
          if (canScrollX) return current;
          current = current.parentElement;
        }
        return null;
      }
      function updateButtonStates() {
        if (!carouselApi) return;
        const canPrev = carouselApi.canScrollPrev();
        const canNext = carouselApi.canScrollNext();
        const slides = getSlides();
        const effectiveCanPrev = fadeMode && slides.length > 1 ? true : canPrev;
        const effectiveCanNext = fadeMode && slides.length > 1 ? true : canNext;
        const bothDisabled = !effectiveCanPrev && !effectiveCanNext;
        const stateKey = JSON.stringify({
          effectiveCanPrev: effectiveCanPrev,
          effectiveCanNext: effectiveCanNext,
          bothDisabled: bothDisabled,
          hasNavWrapper: Boolean(navButtonsWrapper),
          hasPrev: Boolean(prevBtn),
          hasNext: Boolean(nextBtn),
        });
        if (stateKey === lastButtonStateKey) return;
        lastButtonStateKey = stateKey;
        if (navButtonsWrapper) {
          navButtonsWrapper.style.display = bothDisabled ? "none" : "";
          navButtonsWrapper.setAttribute("aria-hidden", String(bothDisabled));
        }
        if (prevBtn) {
          prevBtn.style.pointerEvents = effectiveCanPrev ? "auto" : "none";
          prevBtn.style.opacity = effectiveCanPrev ? "1" : "0.5";
          prevBtn.style.display = bothDisabled ? "none" : "";
          prevBtn.setAttribute("aria-disabled", String(!effectiveCanPrev));
          prevBtn.setAttribute("tabindex", effectiveCanPrev ? "0" : "-1");
        }
        if (nextBtn) {
          nextBtn.style.pointerEvents = effectiveCanNext ? "auto" : "none";
          nextBtn.style.opacity = effectiveCanNext ? "1" : "0.5";
          nextBtn.style.display = bothDisabled ? "none" : "";
          nextBtn.setAttribute("aria-disabled", String(!effectiveCanNext));
          nextBtn.setAttribute("tabindex", effectiveCanNext ? "0" : "-1");
        }
      }
      try {
        carouselApi = window.EmblaCarousel(carouselViewport, carouselOptions);
        carouselViewport._carousel = carouselApi;
        slider._carouselInstance = carouselApi;
        scrollToIndex = (index, jump = false) => {
          if (carouselApi) carouselApi.scrollTo(index, jump);
        };
        ensureDots();
        const slides = getSlides();
        if (
          !slideAllView &&
          slideButtons.length !== slides.length &&
          slideButtons.length > 0
        ) {
          logger.warn(
            `Carousel has ${slides.length} slides but ${slideButtons.length} slide buttons. Button indices may not match slide indices.`,
          );
        }
        if (!carouselViewport.id) {
          carouselUid += 1;
          carouselViewport.id = `carousel-viewport-${carouselUid}`;
        }
        resolvedContainer.setAttribute("aria-live", "polite");
        slides.forEach((slide, index) => {
          if (!slide.hasAttribute("role")) slide.setAttribute("role", "group");
          if (!slide.hasAttribute("aria-roledescription"))
            slide.setAttribute("aria-roledescription", "slide");
          if (!slide.hasAttribute("aria-label"))
            slide.setAttribute(
              "aria-label",
              `${index + 1} of ${slides.length}`,
            );
        });
        // For fade-mode carousels the visual "active" slide is driven entirely
        // by updateActiveSlides()/applyFadeLayout(), which read the current
        // selectedScrollSnap(). Embla's startIndex option already moves that
        // selection before this point, so no extra jump call is required here
        // — but we still lay things out fresh so the correct slide fades in
        // as visible on first paint instead of momentarily flashing slide 0.
        updateButtonStates();
        updateActiveSlides();
        if (!autoplayEnabled) updateStaticProgressBar();
        if (autoplayEnabled) {
          let autoplayIntervalId = null;
          let autoplayStoppedByInteraction = false;
          const setLiveRegion = (rotating) =>
            resolvedContainer.setAttribute(
              "aria-live",
              rotating ? "off" : "polite",
            );
          const startAutoplay = (resumeProgress = false) => {
            if (interactionHold) return;
            if (prefersReducedMotion()) return;
            setLiveRegion(true);
            if (customProgressBar) {
              startProgressBar(resumeProgress);
              return;
            }
            if (autoplayIntervalId) return;
            autoplayIntervalId = window.setInterval(() => {
              if (!carouselApi) return;
              if (fadeMode) {
                stepFade(1);
                return;
              }
              if (carouselApi.canScrollNext()) carouselApi.scrollNext();
              else carouselApi.scrollTo(0);
            }, autoplayDelay);
          };
          const stopAutoplay = () => {
            setLiveRegion(false);
            cancelProgressBar(true);
            if (autoplayIntervalId) {
              window.clearInterval(autoplayIntervalId);
              autoplayIntervalId = null;
            }
          };
          restartAutoplay = () => {
            if (autoplayStopOnInteraction) return;
            stopAutoplay();
            startAutoplay();
          };
          slider._carouselAutoplay = {
            suspend: stopAutoplay,
            resume: () => {
              stopAutoplay();
              startAutoplay();
            },
          };
          cleanupTasks.push(() => {
            delete slider._carouselAutoplay;
          });
          startAutoplay();
          if (autoplayStopOnInteraction) {
            const stopHandler = () => {
              autoplayStoppedByInteraction = true;
              stopAutoplay();
            };
            slider.addEventListener("pointerdown", stopHandler);
            slider.addEventListener("keydown", stopHandler);
            cleanupTasks.push(() => {
              slider.removeEventListener("pointerdown", stopHandler);
              slider.removeEventListener("keydown", stopHandler);
            });
          }
          if (pauseOnHover) {
            let pointerOver = false;
            let focusWithin = false;
            const updateHold = () => {
              const shouldHold = pointerOver || focusWithin;
              if (shouldHold === interactionHold) return;
              interactionHold = shouldHold;
              if (shouldHold) {
                setLiveRegion(false);
                if (customProgressBar) {
                  if (progressRafId !== null && progressStartTime !== null) {
                    progressResumeOffset =
                      performance.now() - progressStartTime;
                  }
                  cancelProgressBar(false);
                } else if (autoplayIntervalId) {
                  window.clearInterval(autoplayIntervalId);
                  autoplayIntervalId = null;
                }
              } else if (!autoplayStoppedByInteraction) {
                startAutoplay(true);
              }
            };
            const pointerEnterHandler = () => {
              pointerOver = true;
              updateHold();
            };
            const pointerLeaveHandler = () => {
              pointerOver = false;
              updateHold();
            };
            const focusInHandler = () => {
              focusWithin = true;
              updateHold();
            };
            const focusOutHandler = (event) => {
              if (event.relatedTarget && slider.contains(event.relatedTarget))
                return;
              focusWithin = false;
              updateHold();
            };
            slider.addEventListener("mouseenter", pointerEnterHandler);
            slider.addEventListener("mouseleave", pointerLeaveHandler);
            slider.addEventListener("focusin", focusInHandler);
            slider.addEventListener("focusout", focusOutHandler);
            cleanupTasks.push(() => {
              slider.removeEventListener("mouseenter", pointerEnterHandler);
              slider.removeEventListener("mouseleave", pointerLeaveHandler);
              slider.removeEventListener("focusin", focusInHandler);
              slider.removeEventListener("focusout", focusOutHandler);
            });
          }
          cleanupTasks.push(() => stopAutoplay());
        }
        const onSelect = () => {
          updateButtonStates();
          updateActiveSlides();
          if (autoplayEnabled && customProgressBar) {
            cancelProgressBar(false);
            startProgressBar();
          } else if (autoplayEnabled && !customProgressBar && restartAutoplay) {
            restartAutoplay();
          } else if (!autoplayEnabled) {
            updateStaticProgressBar();
          }
        };
        const onScroll = () => {
          if (fadeMode) applyFadeLayout();
        };
        const onReInit = () => {
          ensureDots();
          updateButtonStates();
          updateActiveSlides();
          if (!autoplayEnabled) updateStaticProgressBar();
        };
        carouselApi.on("select", onSelect);
        carouselApi.on("scroll", onScroll);
        carouselApi.on("reInit", onReInit);
        const onSlidesInView = () => {
          if (slideClassesEnabled) updateActiveSlides();
        };
        if (slideClassesEnabled) carouselApi.on("slidesInView", onSlidesInView);
        cleanupTasks.push(() => {
          carouselApi.off("select", onSelect);
          carouselApi.off("scroll", onScroll);
          carouselApi.off("reInit", onReInit);
          if (slideClassesEnabled)
            carouselApi.off("slidesInView", onSlidesInView);
        });
        if (fadeMode) {
          const SWIPE_THRESHOLD = 50;
          let swipeStartX = null;
          let swipeStartY = null;
          let isSwiping = false;
          const onPointerDown = (e) => {
            if (e.pointerType === "mouse" && e.button !== 0) return;
            swipeStartX = e.clientX;
            swipeStartY = e.clientY;
            isSwiping = true;
          };
          const onPointerUp = (e) => {
            if (!isSwiping || swipeStartX === null) return;
            isSwiping = false;
            const deltaX = e.clientX - swipeStartX;
            const deltaY = e.clientY - swipeStartY;
            swipeStartX = null;
            swipeStartY = null;
            if (Math.abs(deltaY) > Math.abs(deltaX)) return;
            if (Math.abs(deltaX) < SWIPE_THRESHOLD) return;
            stepFade(deltaX < 0 ? 1 : -1);
            if (restartAutoplay) restartAutoplay();
          };
          const onPointerCancel = () => {
            isSwiping = false;
            swipeStartX = null;
            swipeStartY = null;
          };
          carouselViewport.addEventListener("pointerdown", onPointerDown);
          carouselViewport.addEventListener("pointerup", onPointerUp);
          carouselViewport.addEventListener("pointercancel", onPointerCancel);
          cleanupTasks.push(() => {
            carouselViewport.removeEventListener("pointerdown", onPointerDown);
            carouselViewport.removeEventListener("pointerup", onPointerUp);
            carouselViewport.removeEventListener(
              "pointercancel",
              onPointerCancel,
            );
          });
        }
        if (dragFree && !fadeMode) {
          const DRAG_THRESHOLD = 0.05;
          const snapAfterDrag = () => {
            if (!carouselApi) return;
            const snapList = carouselApi.scrollSnapList();
            const currentIndex = carouselApi.selectedScrollSnap();
            const lastIndex = snapList.length - 1;
            const progress = carouselApi.scrollProgress();
            const currentSnap = snapList[currentIndex];
            const dragDelta = progress - currentSnap;
            let targetIndex = currentIndex;
            if (dragDelta > DRAG_THRESHOLD) {
              targetIndex = loopMode
                ? (currentIndex + 1) % snapList.length
                : Math.min(currentIndex + 1, lastIndex);
            } else if (dragDelta < -DRAG_THRESHOLD) {
              targetIndex = loopMode
                ? (currentIndex - 1 + snapList.length) % snapList.length
                : Math.max(currentIndex - 1, 0);
            }
            carouselApi.scrollTo(targetIndex);
            if (restartAutoplay) restartAutoplay();
          };
          carouselApi.on("pointerUp", snapAfterDrag);
          cleanupTasks.push(() => carouselApi.off("pointerUp", snapAfterDrag));
        }
        const resizeHandler = debounce(() => {
          if (!fadeMode || !carouselApi) return;
          const currentIndex = carouselApi.selectedScrollSnap();
          resetFadeInlineStyles(slider);
          carouselApi.reInit();
          const total = carouselApi.scrollSnapList().length;
          if (currentIndex > 0 && currentIndex < total)
            carouselApi.scrollTo(currentIndex, true);
        }, 150);
        window.addEventListener("resize", resizeHandler);
        cleanupTasks.push(() =>
          window.removeEventListener("resize", resizeHandler),
        );
        if (nextBtn) {
          const nextHandler = () => {
            if (fadeMode) {
              stepFade(1);
              return;
            }
            carouselApi.scrollNext();
            updateButtonStates();
            if (restartAutoplay) restartAutoplay();
          };
          nextBtn.addEventListener("click", nextHandler);
          if (!nextBtn.hasAttribute("aria-label"))
            nextBtn.setAttribute("aria-label", "Next slide");
          if (nextBtn.tagName !== "BUTTON")
            nextBtn.setAttribute("role", "button");
          cleanupTasks.push(() =>
            nextBtn.removeEventListener("click", nextHandler),
          );
        }
        if (prevBtn) {
          const prevHandler = () => {
            if (fadeMode) {
              stepFade(-1);
              return;
            }
            carouselApi.scrollPrev();
            updateButtonStates();
            if (restartAutoplay) restartAutoplay();
          };
          prevBtn.addEventListener("click", prevHandler);
          if (!prevBtn.hasAttribute("aria-label"))
            prevBtn.setAttribute("aria-label", "Previous slide");
          if (prevBtn.tagName !== "BUTTON")
            prevBtn.setAttribute("role", "button");
          cleanupTasks.push(() =>
            prevBtn.removeEventListener("click", prevHandler),
          );
        }
        if (slideButtons.length) {
          slideButtons.forEach((button, index) => {
            const resolvedIndex = slideButtonIndices[index] ?? index;
            const targetIndex = Math.max(
              0,
              Math.min(resolvedIndex, slides.length - 1),
            );
            const clickHandler = () => {
              scrollToIndex(targetIndex, fadeMode);
              if (restartAutoplay) restartAutoplay();
            };
            const keyHandler = (e) => {
              if (e.key === "Enter" || e.key === " ") {
                e.preventDefault();
                clickHandler();
              }
            };
            button.addEventListener("click", clickHandler);
            button.addEventListener("keydown", keyHandler);
            if (button.tagName !== "BUTTON") {
              button.setAttribute("role", "button");
              if (!button.hasAttribute("tabindex"))
                button.setAttribute("tabindex", "0");
            }
            if (!button.hasAttribute("aria-label"))
              button.setAttribute(
                "aria-label",
                `Go to slide ${targetIndex + 1}`,
              );
            if (!button.hasAttribute("aria-controls"))
              button.setAttribute("aria-controls", carouselViewport.id);
            cleanupTasks.push(() => {
              button.removeEventListener("click", clickHandler);
              button.removeEventListener("keydown", keyHandler);
            });
          });
        }
        if (clickToCenter || activeInView) {
          getSlides().forEach((slide, index) => {
            const slideHandler = () => scrollToIndex(index, fadeMode);
            slide.addEventListener("click", slideHandler);
            cleanupTasks.push(() =>
              slide.removeEventListener("click", slideHandler),
            );
          });
        }
        if (!slider._keyboardSetup) {
          const keyboardHandler = (event) => {
            const nextKey = verticalMode ? "ArrowDown" : "ArrowRight";
            const prevKey = verticalMode ? "ArrowUp" : "ArrowLeft";
            if (event.key === nextKey) {
              event.preventDefault();
              if (fadeMode) stepFade(1);
              else carouselApi.scrollNext();
              if (restartAutoplay) restartAutoplay();
            } else if (event.key === prevKey) {
              event.preventDefault();
              if (fadeMode) stepFade(-1);
              else carouselApi.scrollPrev();
              if (restartAutoplay) restartAutoplay();
            }
          };
          slider.addEventListener("keydown", keyboardHandler);
          slider.tabIndex = 0;
          slider.setAttribute("role", "region");
          slider.setAttribute("aria-roledescription", "carousel");
          if (
            !slider.hasAttribute("aria-label") &&
            !slider.hasAttribute("aria-labelledby")
          ) {
            slider.setAttribute("aria-label", "Featured content");
          }
          slider._keyboardSetup = true;
          cleanupTasks.push(() =>
            slider.removeEventListener("keydown", keyboardHandler),
          );
        }
        registerSyncedSlider(syncId, carouselApi);
        slider._carouselCleanup = cleanupTasks;
      } catch (error) {
        cleanupTasks.forEach((cleanup) => {
          try {
            cleanup();
          } catch (_) {}
        });
        if (carouselApi) {
          try {
            carouselApi.destroy();
          } catch (_) {}
        }
        delete slider._keyboardSetup;
        slider._carouselInitialized = false;
        slider._carouselInstance = null;
        if (carouselViewport) carouselViewport._carousel = null;
        handleError(error, "Carousel Initialization");
      }
    });
    logger.log(`✅ ${sliderList.length} carousel(s) initialized`);
  }
  function getCarouselElementFromRoot(element) {
    if (!element) return null;
    return element.hasAttribute("data-carousel")
      ? element
      : element.querySelector?.("[data-carousel]") || null;
  }
  function getCarouselAutoplayControls(selector) {
    const element =
      typeof selector === "string"
        ? document.querySelector(selector)
        : selector;
    const carouselRoot = getCarouselElementFromRoot(element) || element;
    return carouselRoot?._carouselAutoplay || null;
  }
  function getCarouselInstance(selector) {
    const element =
      typeof selector === "string"
        ? document.querySelector(selector)
        : selector;
    if (!element) return null;
    return (
      element._carouselInstance ||
      element._carousel ||
      element.querySelector?.(VIEWPORT_SELECTOR)?._carousel ||
      null
    );
  }
  async function ensureCarouselInitialized(selector) {
    const root =
      typeof selector === "string"
        ? document.querySelector(selector)
        : selector;
    const slider = getCarouselElementFromRoot(root) || root;
    if (!slider) return null;
    const existing = getCarouselInstance(slider);
    if (existing) return existing;
    await loadAndInitSlider(slider);
    return new Promise((resolve) => {
      let attempts = 0;
      const maxAttempts = 200;
      const tick = () => {
        const api = getCarouselInstance(slider);
        if (api) {
          resolve(api);
          return;
        }
        if (attempts >= maxAttempts) {
          resolve(null);
          return;
        }
        attempts += 1;
        window.setTimeout(tick, 50);
      };
      tick();
    });
  }
  function reinitCarouselsIn(container) {
    container.querySelectorAll("[data-carousel]").forEach((slider) => {
      if (slider._carouselInitialized) {
        resetFadeInlineStyles(slider);
        if (Array.isArray(slider._carouselCleanup)) {
          slider._carouselCleanup.forEach((fn) => {
            try {
              fn();
            } catch (_) {}
          });
          slider._carouselCleanup = null;
        }
        const viewport = slider.querySelector(VIEWPORT_SELECTOR);
        const api = slider._carouselInstance || viewport?._carousel;
        if (api) {
          try {
            api.destroy();
          } catch (_) {}
        }
        slider._carouselInitialized = false;
        slider._carouselInstance = null;
        if (viewport) viewport._carousel = null;
        delete slider._keyboardSetup;
      }
      loadAndInitSlider(slider);
    });
  }
  function destroyCarousels() {
    if (carouselObserver) {
      carouselObserver.disconnect();
      carouselObserver = null;
    }
    document.querySelectorAll("[data-carousel]").forEach((slider) => {
      if (Array.isArray(slider._carouselCleanup)) {
        slider._carouselCleanup.forEach((cleanup) => {
          try {
            cleanup();
          } catch (error) {
            handleError(error, "Carousel Cleanup");
          }
        });
        slider._carouselCleanup = null;
      }
      const viewport = slider.querySelector?.(VIEWPORT_SELECTOR) || null;
      const carouselApi =
        slider._carouselInstance || viewport?._carousel || null;
      if (carouselApi) carouselApi.destroy();
      resetFadeInlineStyles(slider);
      slider._carouselInitialized = false;
      slider._carouselInstance = null;
      if (viewport) viewport._carousel = null;
      delete slider._keyboardSetup;
    });
    syncedSliderGroups.clear();
  }
  function registerSyncedSlider(syncId, carouselApi) {
    if (!syncId || !carouselApi) return;
    if (!syncedSliderGroups.has(syncId))
      syncedSliderGroups.set(syncId, new Set());
    const group = syncedSliderGroups.get(syncId);
    group.add(carouselApi);
    const syncHandler = () => {
      const targetIndex = carouselApi.selectedScrollSnap();
      group.forEach((otherCarousel) => {
        if (otherCarousel === carouselApi) return;
        if (otherCarousel.selectedScrollSnap() === targetIndex) return;
        otherCarousel.scrollTo(targetIndex);
      });
    };
    carouselApi.on("select", syncHandler);
    carouselApi.on("reInit", syncHandler);
    carouselApi.on("destroy", () => {
      carouselApi.off("select", syncHandler);
      carouselApi.off("reInit", syncHandler);
      group.delete(carouselApi);
      if (group.size === 0) syncedSliderGroups.delete(syncId);
    });
  }
  window.CarouselControls = {
    getInstance: getCarouselInstance,
    getAutoplayControls: getCarouselAutoplayControls,
    ensureInitialized: ensureCarouselInitialized,
    reinitIn: reinitCarouselsIn,
    destroyAll: destroyCarousels,
  };
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initCarousel);
  } else {
    initCarousel();
  }
})();

/////////////////////////////////////////////
// SOCIAL SHARE BUTTONS
/////////////////////////////////////////////
(function () {
  var shareContainers = document.querySelectorAll("[data-share]");
  if (!shareContainers.length) return;

  function showToast(msg) {
    var t = document.getElementById("toast");
    if (!t) return;
    t.textContent = msg;
    t.classList.add("show");
    clearTimeout(showToast._timer);
    showToast._timer = setTimeout(function () {
      t.classList.remove("show");
    }, 2200);
  }

  function openPopup(url) {
    var w = 600,
      h = 500;
    var left = (screen.width - w) / 2;
    var top = (screen.height - h) / 2;
    window.open(
      url,
      "share",
      "width=" +
        w +
        ",height=" +
        h +
        ",left=" +
        left +
        ",top=" +
        top +
        ",noopener,noreferrer",
    );
  }

  function buildShareUrl(platform, data) {
    var url = encodeURIComponent(data.url);
    var title = encodeURIComponent(data.title || document.title);
    var text = encodeURIComponent(data.text || "");

    switch (platform) {
      case "x":
        return (
          "https://twitter.com/intent/tweet?url=" +
          url +
          (data.text ? "&text=" + text : "")
        );
      case "facebook":
        return "https://www.facebook.com/sharer/sharer.php?u=" + url;
      case "linkedin":
        return "https://www.linkedin.com/sharing/share-offsite/?url=" + url;
      case "whatsapp":
        return (
          "https://api.whatsapp.com/send?text=" +
          (data.text ? text + "%20" : "") +
          url
        );
      case "telegram":
        return (
          "https://t.me/share/url?url=" +
          url +
          (data.text ? "&text=" + text : "")
        );
      case "reddit":
        return "https://www.reddit.com/submit?url=" + url + "&title=" + title;
      case "pinterest":
        return (
          "https://pinterest.com/pin/create/button/?url=" +
          url +
          "&description=" +
          (data.text ? text : title)
        );
      case "messenger":
        return (
          "https://www.facebook.com/dialog/send?link=" +
          url +
          "&app_id=&redirect_uri=" +
          url
        );
      case "email":
        return (
          "mailto:?subject=" +
          title +
          "&body=" +
          (data.text ? text + "%0A%0A" : "") +
          url
        );
      default:
        return null;
    }
  }

  async function handleShare(btn) {
    var container = btn.closest("[data-share]");
    if (!container) return;

    var linkAttr = container.getAttribute("data-share");
    var data = {
      url: linkAttr && linkAttr.trim() ? linkAttr.trim() : window.location.href,
      title: container.getAttribute("data-share-title") || document.title,
      text: container.getAttribute("data-share-text") || "",
    };

    var platform = btn.getAttribute("data-share-to");

    if (platform === "copy") {
      try {
        await navigator.clipboard.writeText(data.url);
        showToast("Link copied to clipboard");
      } catch (e) {
        showToast("Could not copy link");
      }
      return;
    }

    if (platform === "native") {
      if (navigator.share) {
        try {
          await navigator.share({
            title: data.title,
            text: data.text,
            url: data.url,
          });
        } catch (e) {}
      } else {
        try {
          await navigator.clipboard.writeText(data.url);
          showToast("Link copied (native share not supported here)");
        } catch (e) {
          showToast("Sharing not supported on this device");
        }
      }
      return;
    }

    var shareUrl = buildShareUrl(platform, data);
    if (shareUrl) {
      openPopup(shareUrl);
    } else {
      console.warn("Unknown share target:", platform);
    }
  }

  document.addEventListener("click", function (e) {
    var btn = e.target.closest("[data-share-to]");
    if (btn) handleShare(btn);
  });

  shareContainers.forEach(function (container) {
    var mode = container.getAttribute("data-share-active");
    if (!mode) return;

    if (mode === "hover") {
      container.addEventListener("mouseenter", function () {
        container.classList.add("active");
      });
    }

    if (mode === "click") {
      container.addEventListener("click", function (e) {
        if (e.target.closest("[data-share-to]")) return;
        container.classList.toggle("active");
      });
    }

    container.addEventListener("mouseleave", function () {
      container.classList.remove("active");
    });

    document.addEventListener("click", function (e) {
      if (!container.contains(e.target)) {
        container.classList.remove("active");
      }
    });
  });
})();