<script>
document.addEventListener('DOMContentLoaded', function() {
    const header = document.querySelector('header#header');
    const logoImg = document.querySelector('header#header div.header-title a img');
    
    const originalLogo = logoImg ? logoImg.src : '';
    const scrollLogo = 'https://secure.gravatar.com/avatar/?s=300&d=monsterid&r=g';
    
    if (logoImg) {
        logoImg.style.transition = 'opacity 0.3s ease-in-out';
    }
    
    function changeLogo(newSrc) {
        if (logoImg && logoImg.src !== newSrc) {
            logoImg.style.opacity = '0';
            setTimeout(function() {
                logoImg.src = newSrc;
                logoImg.style.opacity = '1';
            }, 150);
        }
    }
    
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                if (header.classList.contains('shrink')) {
                    changeLogo(scrollLogo);
                } else {
                    changeLogo(originalLogo);
                }
            }
        });
    });
    
    if (header) {
        observer.observe(header, {
            attributes: true,
            attributeFilter: ['class']
        });
    }
});
</script>