<style>
  body {
    overflow-x: hidden;
  }

  .floating-word {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-size: 28px;
    font-weight: bold;
    color: black;
    transform: translate(-50%, -50%);
    animation: fadeWord 1.8s ease forwards;
    white-space: nowrap;
  }

  @keyframes fadeWord {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.8);
    }

    15% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translate(-50%, -70%) scale(1);
    }
  }

  .random-image {
    position: fixed;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
</style>

<script>
document.addEventListener("DOMContentLoaded", async () => {

  const GALLERY_URL = "/gallery-1";

  const markerWords = [
    "yes",
    "again",
    "look",
    "echo",
    "memory",
    "signal",
    "soft",
    "wild"
  ];

  let galleryImages = [];

  try {

    const response = await fetch(GALLERY_URL);

    const html = await response.text();

    const parser = new DOMParser();

    const doc = parser.parseFromString(html, "text/html");

    const imgs = Array.from(doc.querySelectorAll("img"));

    galleryImages = imgs
      .map(img => img.src)
      .filter(src =>
        src &&
        !src.includes("static1.squarespace.com/static/")
      );

    galleryImages = [...new Set(galleryImages)];

    console.log("Loaded gallery images:", galleryImages);

  } catch (err) {

    console.error("Could not load gallery images:", err);

  }

  let imagePool = [];

  function shuffle(array) {

    let currentIndex = array.length;

    while (currentIndex !== 0) {

      const randomIndex = Math.floor(Math.random() * currentIndex);

      currentIndex--;

      [array[currentIndex], array[randomIndex]] = [
        array[randomIndex],
        array[currentIndex]
      ];

    }

    return array;
  }

  function refillPool() {
    imagePool = shuffle([...galleryImages]);
  }

  function getNextImage() {

    if (imagePool.length === 0) {
      refillPool();
    }

    return imagePool.pop();

  }

  refillPool();

  let currentImage = null;

  document.addEventListener("click", (e) => {

    /*
      RANDOM WORD
    */

    const word = document.createElement("div");

    word.className = "floating-word";

    word.textContent =
      markerWords[Math.floor(Math.random() * markerWords.length)];

    word.style.left = e.clientX + "px";

    word.style.top = e.clientY + "px";

    document.body.appendChild(word);

    setTimeout(() => {
      word.remove();
    }, 1800);

    /*
      REMOVE OLD IMAGE
    */

    if (currentImage) {
      currentImage.remove();
      currentImage = null;
    }

    /*
      GET NEXT IMAGE
    */

    const imgSrc = getNextImage();

    if (!imgSrc) return;

    /*
      CREATE IMAGE
    */

    const img = document.createElement("img");

    img.src = imgSrc;

    img.className = "random-image";

    /*
      MEDIUM / LARGE SIZE
    */

    const width = 350 + Math.random() * 350;

    img.style.width = width + "px";

    img.style.height = "auto";

    /*
      RANDOM POSITION
    */

    const maxX = window.innerWidth - width;

    const maxY = window.innerHeight - 500;

    const x = Math.max(0, Math.random() * maxX);

    const y = Math.max(0, Math.random() * maxY);

    img.style.left = x + "px";

    img.style.top = y + "px";

    document.body.appendChild(img);

    /*
      FADE IN
    */

    requestAnimationFrame(() => {
      img.style.opacity = "1";
    });

    /*
      SAVE CURRENT IMAGE
    */

    currentImage = img;

  });

});
</script>