<script>
(function() {
    function init() {
        const header = document.querySelector('header#header');
        const logoAnchors = document.querySelectorAll('header#header div.header-title-logo a');

        if (!header || !logoAnchors.length) return;

        const originalSrc = logoAnchors[0].querySelector('img').src;
        const scrollSrc = 'https://static1.squarespace.com/static/68e76308aed1a71b949019ad/t/6a1d8c209c41d54b8fb73612/1780321312386/wordmark.png';

        logoAnchors.forEach(function(anchor) {
            const img = anchor.querySelector('img');
            if (!img) return;

            const h = img.getBoundingClientRect().height;
            const w = img.getBoundingClientRect().width;

            const wrapper = document.createElement('div');
            wrapper.style.cssText = 'position:relative;overflow:hidden;width:' + w + 'px;height:' + h + 'px;';
            anchor.appendChild(wrapper);
            wrapper.appendChild(img);

            img.style.cssText += 'position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;transform:translateY(0%);transition:transform 0.4s ease;';

            const scrollImg = document.createElement('img');
            scrollImg.src = scrollSrc;
            scrollImg.alt = img.alt;
            scrollImg.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;transform:translateY(100%);transition:transform 0.4s ease;';
            wrapper.appendChild(scrollImg);

            anchor._logoWrapper = { img, scrollImg };
        });

        let currentState = null;

        function changeLogo(state) {
            if (state === currentState) return;
            currentState = state;

            logoAnchors.forEach(function(anchor) {
                if (!anchor._logoWrapper) return;
                const { img, scrollImg } = anchor._logoWrapper;

                if (state === 'shrink') {
                    img.style.transform = 'translateY(-100%)';
                    scrollImg.style.transform = 'translateY(-20%)';
                } else {
                    img.style.transform = 'translateY(0%)';
                    scrollImg.style.transform = 'translateY(100%)';
                }
            });
        }

        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.attributeName === 'class') {
                    changeLogo(header.classList.contains('shrink') ? 'shrink' : 'original');
                }
            });
        });

        observer.observe(header, { attributes: true, attributeFilter: ['class'] });
    }

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