<!-- Logo Scroll -->
<script>
(function() {
  function init() {
    function getVisibleImg() {
      const imgs = document.querySelectorAll('.header-title-logo img');
      for (const img of imgs) {
        const rect = img.getBoundingClientRect();
        if (rect.width > 0 && rect.height > 0) return img;
      }
      return imgs[0];
    }

    const nativeImg = getVisibleImg();
    if (!nativeImg || nativeImg.dataset.floatInit) return;
    nativeImg.dataset.floatInit = 'true';

    const logoOriginal = 'https://images.squarespace-cdn.com/content/v1/68e76308aed1a71b949019ad/39927631-efdc-416d-94de-46b0b9c49dba/wordmark+centered.png?format=1500w';
    const logoShrink = 'https://static1.squarespace.com/static/68e76308aed1a71b949019ad/t/6a1d8c209c41d54b8fb73612/1780321312386/wordmark.png';

    nativeImg.style.visibility = 'hidden';

    const float = document.createElement('img');
    float.src = logoOriginal;

    const floatSize = 80;
    const shrinkSize = 40;

    float.style.cssText = `
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: ${floatSize}px;
      width: auto;
      z-index: 9999;
      pointer-events: none;
    `;
    document.body.appendChild(float);

    let state = 'center';
    let animating = false;

    function getHeaderCenter() {
      const visibleImg = getVisibleImg();
      const rect = visibleImg.getBoundingClientRect();
      return {
        top: rect.top + rect.height / 2,
        left: rect.left + rect.width / 2
      };
    }

    function setTransition(on) {
      float.style.transition = on ? 'top 0.8s ease, left 0.8s ease, height 0.8s ease' : 'none';
    }

    function scrollToHeader() {
      if (animating) return;
      animating = true;
      state = 'moving-to-header';

      const pos = getHeaderCenter();
      setTransition(true);
      float.style.top = pos.top + 'px';
      float.style.left = pos.left + 'px';
      float.style.height = shrinkSize + 'px';

      float.addEventListener('transitionend', function handler(e) {
        if (e.propertyName !== 'top') return;
        float.removeEventListener('transitionend', handler);
        float.style.visibility = 'hidden';
        const visibleImg = getVisibleImg();
        visibleImg.src = logoShrink;
        visibleImg.style.visibility = 'visible';
        state = 'header';
        animating = false;
      });
    }

    function scrollToCenter() {
      if (animating) return;
      animating = true;
      state = 'moving-to-center';

      const visibleImg = getVisibleImg();
      visibleImg.style.visibility = 'hidden';

      const pos = getHeaderCenter();
      float.src = logoOriginal;
      float.style.visibility = 'visible';

      setTransition(false);
      float.style.top = pos.top + 'px';
      float.style.left = pos.left + 'px';
      float.style.height = shrinkSize + 'px';

      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          setTransition(true);
          float.style.top = '50%';
          float.style.left = '50%';
          float.style.height = floatSize + 'px';

          float.addEventListener('transitionend', function handler(e) {
            if (e.propertyName !== 'top') return;
            float.removeEventListener('transitionend', handler);
            state = 'center';
            animating = false;
          });
        });
      });
    }

    let lastScrollY = window.scrollY;

    window.addEventListener('scroll', () => {
      const currentY = window.scrollY;
      if (currentY > lastScrollY && state === 'center') {
        scrollToHeader();
      } else if (currentY < lastScrollY && currentY === 0 && state === 'header') {
        scrollToCenter();
      }
      lastScrollY = currentY;
    });
  }

  document.addEventListener('DOMContentLoaded', init);
  window.addEventListener('mercury:load', init);
})();
</script>