/* Interactive Logo - Add to ALL pages */
.logo {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.logo:hover {
    transform: translateY(-2px);
}

.logo:active {
    transform: scale(0.95);
}

.logo img,
.logo-icon {
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.logo:hover img,
.logo:hover .logo-icon {
    transform: rotate(360deg) scale(1.1);
}

.logo.clicked img,
.logo.clicked .logo-icon {
    animation: logo-bounce 0.6s ease;
}

@keyframes logo-bounce {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-10px) rotate(10deg);
    }

    50% {
        transform: translateY(0) rotate(0deg);
    }

    75% {
        transform: translateY(-5px) rotate(-10deg);
    }
}

/* Logo Click Handler - Add to script section */
/*
document.addEventListener('DOMContentLoaded', () => {
    const logo = document.querySelector('.logo');
    if (logo) {
        logo.addEventListener('click', (e) => {
            if (logo.closest('a')) {
                e.preventDefault();
                logo.classList.add('clicked');
                setTimeout(() => {
                    logo.classList.remove('clicked');
                    window.location.href = logo.closest('a').href || 'index.html';
                }, 600);
            }
        });
    }
});
*/