/**
 * Main Interaction Script
 * Minimalist animations and custom cursor for that "Premium WIP" feel.
 */

document.addEventListener('DOMContentLoaded', () => {
    // Custom Cursor Logic
    const cursorDot = document.querySelector('.cursor-dot');
    const cursorOutline = document.querySelector('.cursor-outline');
    let isHovering = false;

    // Track mouse position
    window.addEventListener('mousemove', (e) => {
        const posX = e.clientX;
        const posY = e.clientY;

        // Custom dot follows exact position
        cursorDot.style.left = `${posX}px`;
        cursorDot.style.top = `${posY}px`;

        // Outline trails slightly with a small delay simulation via animationFrame
        // But for simplicity and performance in vanilla, we use transform directly
        cursorOutline.animate({
            left: `${posX}px`,
            top: `${posY}px`
        }, { duration: 150, fill: "forwards" });
    });

    // Hover effects on links and interactive elements
    const links = document.querySelectorAll('a, .status-badge, .art-piece-container');
    
    links.forEach(link => {
        link.addEventListener('mouseenter', () => {
            isHovering = true;
            cursorOutline.style.transform = 'translate(-50%, -50%) scale(1.5)';
            cursorOutline.style.backgroundColor = 'rgba(0,0,0,0.1)';
            cursorDot.style.transform = 'translate(-50%, -50%) scale(0.5)';
        });

        link.addEventListener('mouseleave', () => {
            isHovering = false;
            cursorOutline.style.transform = 'translate(-50%, -50%) scale(1)';
            cursorOutline.style.backgroundColor = 'transparent';
            cursorDot.style.transform = 'translate(-50%, -50%) scale(1)';
        });
    });

    // Simple 3D parallax on the art piece
    const artContainer = document.querySelector('.art-piece-container');
    const artPiece = document.querySelector('.art-piece');

    if (artContainer && artPiece) {
        artContainer.addEventListener('mousemove', (e) => {
            const rect = artContainer.getBoundingClientRect();
            const x = e.clientX - rect.left; // x position within the element.
            const y = e.clientY - rect.top;  // y position within the element.
            
            // Calculate rotation based on cursor position
            const centerX = rect.width / 2;
            const centerY = rect.height / 2;
            
            const rotateX = ((y - centerY) / centerY) * -15; // Max 15deg
            const rotateY = ((x - centerX) / centerX) * 15;  // Max 15deg

            artPiece.style.transform = `scale(1.05) perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
        });

        artContainer.addEventListener('mouseleave', () => {
            // Reset position
            artPiece.style.transform = 'scale(1) perspective(1000px) rotateX(0) rotateY(0)';
        });
    }
});