script.js

// --- Custom Cursor Logic: Track mouse position and update cursor in real-time ---
// Replaces default browser cursor with custom dot and outline elements that follow mouse
const cursorDot = document.querySelector('.cursor-dot');
const cursorOutline = document.querySelector('.cursor-outline');

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

    cursorDot.style.left = `${posX}px`;
    cursorDot.style.top = `${posY}px`;

    // Slight delay for the outline
    cursorOutline.animate({
        left: `${posX}px`,
        top: `${posY}px`
    }, { duration: 500, fill: "forwards" });
});

// Interactive Elements Cursor Effect
const interactives = document.querySelectorAll('.interactive-element');
interactives.forEach(el => {
    el.addEventListener('mouseenter', () => {
        cursorOutline.style.width = '80px';
        cursorOutline.style.height = '80px';
        cursorOutline.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
        cursorOutline.style.mixBlendMode = 'difference';
    });
    el.addEventListener('mouseleave', () => {
        cursorOutline.style.width = '40px';
        cursorOutline.style.height = '40px';
        cursorOutline.style.backgroundColor = 'transparent';
        cursorOutline.style.mixBlendMode = 'normal';
    });
});

// --- Loader Logic ---
window.addEventListener('load', () => {
    const progress = document.getElementById('loader-progress');
    const loader = document.getElementById('loader');
    
    progress.style.width = '100%';
    
    setTimeout(() => {
        loader.style.transform = 'translateY(-100%)';
    }, 800);
});

// --- Mobile Menu Toggle Logic ---
// Handle hamburger menu button clicks to show/hide mobile navigation
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');

if (mobileMenuBtn) {
    mobileMenuBtn.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
    });

    // Close menu when a link is clicked
    const mobileMenuLinks = mobileMenu.querySelectorAll('a');
    mobileMenuLinks.forEach(link => {
        link.addEventListener('click', () => {
            mobileMenu.classList.add('hidden');
        });
    });
}

// --- Intersection Observer for Scroll Reveal ---
const observerOptions = {
    threshold: 0.1,
    rootMargin: "0px"
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('active');
        }
    });
}, observerOptions);

document.querySelectorAll('.reveal-text').forEach(el => observer.observe(el));

// --- Three.js Setup ---
const scene = new THREE.Scene();
// Fog for depth
scene.fog = new THREE.FogExp2(0x050505, 0.02);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true; // Enable shadows
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.getElementById('canvas-container').appendChild(renderer.domElement);

// --- Lighting (Premium Studio Look) ---
const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(ambientLight);

// Main key light
const spotLight = new THREE.SpotLight(0xffffff, 1);
spotLight.position.set(10, 20, 10);
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 2048;
spotLight.shadow.mapSize.height = 2048;
scene.add(spotLight);

// Rim light for definition
const rimLight = new THREE.SpotLight(0x00ff9d, 2); // Green rim light
rimLight.position.set(-10, 5, -5);
rimLight.lookAt(0, 0, 0);
scene.add(rimLight);

// Fill light
const fillLight = new THREE.PointLight(0x1a1a1a, 1);
fillLight.position.set(0, -5, 5);
scene.add(fillLight);

// --- Procedural Shoe Model Construction ---
const shoeGroup = new THREE.Group();

// Materials
const soleMaterial = new THREE.MeshPhysicalMaterial({
    color: 0x111111,
    metalness: 0.1,
    roughness: 0.8,
    clearcoat: 0.2
});

const upperMaterial = new THREE.MeshPhysicalMaterial({
    color: 0x111111,
    metalness: 0.4,
    roughness: 0.2,
    clearcoat: 1.0,
    clearcoatRoughness: 0.1,
    transmission: 0.1
});

const accentMaterial = new THREE.MeshStandardMaterial({
    color: 0x00ff9d,
    roughness: 0.3,
    metalness: 0.8
});

// 1. Sole
const soleGeo = new THREE.BoxGeometry(3.5, 0.5, 1.2);
const sole = new THREE.Mesh(soleGeo, soleMaterial);
sole.position.y = -1.0;
sole.castShadow = true;
sole.receiveShadow = true;
shoeGroup.add(sole);

// Sole Bump/Shape
const soleDetailGeo = new THREE.BoxGeometry(3.3, 0.1, 1.0);
const soleDetail = new THREE.Mesh(soleDetailGeo, accentMaterial);
soleDetail.position.set(0, -0.85, 0);
shoeGroup.add(soleDetail);

// 2. Main Body
const bodyGeo = new THREE.CylinderGeometry(1.0, 1.2, 1.4, 8);
const body = new THREE.Mesh(bodyGeo, upperMaterial);
body.rotation.x = Math.PI / 2; // Lie flat-ish
body.rotation.y = -0.2;
body.scale.set(1, 1, 0.8);
body.position.y = -0.2;
body.castShadow = true;
shoeGroup.add(body);

// 3. Heel Counter (The back part)
const heelGeo = new THREE.BoxGeometry(0.8, 1.0, 1.1);
const heel = new THREE.Mesh(heelGeo, upperMaterial);
heel.position.set(-0.8, -0.2, 0);
heel.castShadow = true;
shoeGroup.add(heel);

// 4. Tongue/Laces Area
const tongueGeo = new THREE.BoxGeometry(2.5, 0.3, 0.6);
const tongue = new THREE.Mesh(tongueGeo, upperMaterial);
tongue.rotation.y = -0.1;
tongue.position.set(0, 0.4, 0);
tongue.scale.set(0.8, 1, 1);
shoeGroup.add(tongue);

// 5. Laces (Ribbon style)
const laceGeo = new THREE.TorusGeometry(0.5, 0.05, 8, 32, Math.PI * 2);
for(let i=0; i<5; i++) {
    const lace = new THREE.Mesh(laceGeo, accentMaterial);
    lace.position.set(0.6 - (i*0.25), 0.55 - (i*0.12), 0.5);
    lace.rotation.y = -0.5 + (i * 0.1);
    shoeGroup.add(lace);
}

// 6. Shoe Box/Core (Visual center)
const coreGeo = new THREE.BoxGeometry(0.2, 1.8, 0.8);
const core = new THREE.Mesh(coreGeo, new THREE.MeshStandardMaterial({color: 0x00ff9d, emissive: 0x004422}));
core.position.set(0.5, 0.1, 0);
shoeGroup.add(core);

scene.add(shoeGroup);

// --- Particles ---
const particlesGeometry = new THREE.BufferGeometry();
const particlesCount = 700;
const posArray = new Float32Array(particlesCount * 3);

for(let i = 0; i < particlesCount * 3; i++) {
    posArray[i] = (Math.random() - 0.5) * 15;
}

particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
const particlesMaterial = new THREE.PointsMaterial({
    size: 0.02,
    color: 0x00ff9d,
    transparent: true,
    opacity: 0.8
});
const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
scene.add(particlesMesh);

// --- Camera Positioning ---
camera.position.z = 5;
camera.position.x = 2; // Offset to see shoe better

// --- Animation Variables ---
let mouseX = 0;
let mouseY = 0;
let targetX = 0;
let targetY = 0;

const windowHalfX = window.innerWidth / 2;
const windowHalfY = window.innerHeight / 2;

document.addEventListener('mousemove', (event) => {
    mouseX = (event.clientX - windowHalfX);
    mouseY = (event.clientY - windowHalfY);
});

// --- Scroll Interaction Logic ---
let scrollY = 0;
window.addEventListener('scroll', () => {
    scrollY = window.scrollY;
});

// --- Color Changer Logic ---
const colorBtns = document.querySelectorAll('.color-btn');
colorBtns.forEach(btn => {
    btn.addEventListener('click', (e) => {
        const color = e.target.getAttribute('data-color');
        // Animate color change
        new TWEEN_ColorAnim(upperMaterial.color, new THREE.Color(color));
    });
});

// Simple helper for color animation (minimal implementation)
function TWEEN_ColorAnim(startColor, targetColor) {
    let progress = 0;
    const animateColor = () => {
        progress += 0.05;
        if(progress <= 1) {
            startColor.lerp(targetColor, 0.1);
            requestAnimationFrame(animateColor);
        }
    };
    animateColor();
}

// --- Main Animation Loop ---
const clock = new THREE.Clock();

function animate() {
    requestAnimationFrame(animate);
    const elapsedTime = clock.getElapsedTime();

    targetX = mouseX * 0.001;
    targetY = mouseY * 0.001;

    // Rotate particles slowly
    particlesMesh.rotation.y = elapsedTime * 0.05;
    particlesMesh.rotation.x = elapsedTime * 0.02;

    // Smooth camera movement based on mouse
    shoeGroup.rotation.y += 0.05 * (targetX - shoeGroup.rotation.y);
    shoeGroup.rotation.x += 0.05 * (targetY - shoeGroup.rotation.x);

    // Floating animation
    shoeGroup.position.y = Math.sin(elapsedTime * 0.5) * 0.1;

    // Scroll Logic (Parallax)
    // Move camera back and rotate shoe as we scroll down
    const scrollPercent = scrollY / (document.body.scrollHeight - window.innerHeight);
    
    // 1. Move shoe slightly up and away based on scroll
    shoeGroup.position.y = -scrollY * 0.002; 
    shoeGroup.rotation.x = -scrollY * 0.001; // Tilt shoe forward
    
    // 2. Scroll triggers exposure to lights
    // Subtle brightening of accent when scrolled
    const rimIntensity = 2 + (scrollPercent * 5); 
    rimLight.intensity = rimIntensity;

    // 3. Particles drift faster on scroll
    particlesMesh.position.y = scrollY * 0.005;

    renderer.render(scene, camera);
}

// --- Resize Handler ---
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

animate();