<!-- Paste this before the closing </body> tag in theme.liquid -->

<div id="pg-anim-wrapper">
  <div id="pg-anim-bg">
    <!-- Paste animation HTML here (if needed) -->
  </div>
</div>

<style>
  #pg-anim-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
  }

  #pg-anim-bg {
    position: relative;
    width: 100%;
    height: 100%;
  }

  body {
    overflow: auto !important;
  }

  /* Paste animation CSS here */
</style>

<script>
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      mutation.addedNodes.forEach((node) => {
        if (node.nodeName === 'CANVAS' && node.parentNode === document.body) {
          document.getElementById('pg-anim-bg').appendChild(node);
          node.style.position = 'absolute';
          node.style.top = '0';
          node.style.left = '0';
          node.style.width = '100%';
          node.style.height = '100%';
        }
      });
    });
  });

  observer.observe(document.body, { childList: true });

  document.addEventListener('mousemove', (e) => {
    const canvas = document.querySelector('#pg-anim-bg canvas');
    if (canvas) {
      canvas.dispatchEvent(new MouseEvent('mousemove', {
        clientX: e.clientX,
        clientY: e.clientY,
        bubbles: true
      }));
    }
  });

  // Paste animation JS here
</script>

<!-- Paste this before the closing </body> tag in theme.liquid -->

<div id="pg-anim-wrapper">
  <div id="pg-anim-bg">
    <!-- Paste animation HTML here (if needed) -->
  </div>
</div>

<style>
  #pg-anim-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
  }

  #pg-anim-bg {
    position: relative;
    width: 100%;
    height: 100%;
  }

  body {
    overflow: auto !important;
  }

  /* Paste animation CSS here */
</style>

<script>
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      mutation.addedNodes.forEach((node) => {
        if (node.nodeName === 'CANVAS' && node.parentNode === document.body) {
          document.getElementById('pg-anim-bg').appendChild(node);
          node.style.position = 'absolute';
          node.style.top = '0';
          node.style.left = '0';
          node.style.width = '100%';
          node.style.height = '100%';
        }
      });
    });
  });

  observer.observe(document.body, { childList: true });

  document.addEventListener('mousemove', (e) => {
    const canvas = document.querySelector('#pg-anim-bg canvas');
    if (canvas) {
      canvas.dispatchEvent(new MouseEvent('mousemove', {
        clientX: e.clientX,
        clientY: e.clientY,
        bubbles: true
      }));
    }
  });

  // Paste animation JS here
</script>