// --- 3D Interactive Button Logic ---
const buttons = document.querySelectorAll('.interactive-button');

buttons.forEach(button => {
    // Event listener for mouse movement over the button
    button.addEventListener('mousemove', (e) => {
        const rect = button.getBoundingClientRect();
        
        // Calculate cursor position relative to the button's center
        const x = e.clientX - rect.left - rect.width / 2;
        const y = e.clientY - rect.top - rect.height / 2;

        // Calculate rotation values based on cursor position
        const rotateY = (x / rect.width) * 20;
        const rotateX = (y / rect.height) * -20;

        // Apply the 3D transformation
        button.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.10, 1.10, 1.10)`;
    });

    // Event listener for when the mouse leaves the button
    button.addEventListener('mouseleave', () => {
        // Reset the button to its original state
        button.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)';
        button.style.transition = 'transform 0.06s linear'; // Fast reset animation
    });
    
    // Event listener for when the mouse enters the button area
    button.addEventListener('mouseenter', () => {
         // Make the initial transform instant
         button.style.transition = 'transform 0.05s linear';
    });
});