script.js

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Set canvas size
canvas.width = 800;
canvas.height = 600;

// Ball class
class Ball {
    constructor(x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
        this.dx = (Math.random() - 0.5) * 6; // Slightly reduced initial velocity
        this.dy = (Math.random() - 0.5) * 6;
        this.mass = radius;
        this.restitution = 0.85; // Add bounce dampening
    }

    draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
    }

    checkCollision(otherBall) {
        const dx = otherBall.x - this.x;
        const dy = otherBall.y - this.y;
        const distance = Math.sqrt(dx * dx + dy * dy);
        const minDistance = this.radius + otherBall.radius;

        if (distance < minDistance) {
            // Calculate collision normal vector
            const nx = dx / distance;
            const ny = dy / distance;

            // Calculate relative velocity
            const relativeVelocityX = this.dx - otherBall.dx;
            const relativeVelocityY = this.dy - otherBall.dy;
            
            // Calculate relative velocity in terms of the normal direction
            const velocityAlongNormal = (relativeVelocityX * nx + relativeVelocityY * ny);
            
            // Do not resolve if objects are moving apart
            if (velocityAlongNormal > 0) return;

            // Calculate restitution (average of both balls)
            const combinedRestitution = (this.restitution + otherBall.restitution) / 2;

            // Calculate impulse scalar
            const j = -(1 + combinedRestitution) * velocityAlongNormal;
            const impulseScalar = j / (1/this.mass + 1/otherBall.mass);

            // Apply impulse
            const impulseX = impulseScalar * nx;
            const impulseY = impulseScalar * ny;

            this.dx -= (impulseX / this.mass);
            this.dy -= (impulseY / this.mass);
            otherBall.dx += (impulseX / otherBall.mass);
            otherBall.dy += (impulseY / otherBall.mass);

            // Positional correction to prevent sinking
            const percent = 0.8; // penetration percentage to correct
            const slop = 0.01; // penetration allowance
            const penetration = Math.max(minDistance - distance, 0);
            const correctionMagnitude = (Math.max(penetration - slop, 0) / (1/this.mass + 1/otherBall.mass)) * percent;
            
            const correctionX = nx * correctionMagnitude;
            const correctionY = ny * correctionMagnitude;

            this.x -= correctionX / this.mass;
            this.y -= correctionY / this.mass;
            otherBall.x += correctionX / otherBall.mass;
            otherBall.y += correctionY / otherBall.mass;
        }
    }

    update(balls) {
        // Apply slight friction
        this.dx *= 0.995;
        this.dy *= 0.995;

        // Bounce off walls with restitution
        if (this.x + this.radius > canvas.width) {
            this.x = canvas.width - this.radius;
            this.dx = -this.dx * this.restitution;
        } else if (this.x - this.radius < 0) {
            this.x = this.radius;
            this.dx = -this.dx * this.restitution;
        }

        if (this.y + this.radius > canvas.height) {
            this.y = canvas.height - this.radius;
            this.dy = -this.dy * this.restitution;
        } else if (this.y - this.radius < 0) {
            this.y = this.radius;
            this.dy = -this.dy * this.restitution;
        }

        // Check collisions with other balls
        balls.forEach(ball => {
            if (ball !== this) {
                this.checkCollision(ball);
            }
        });

        // Update position
        this.x += this.dx;
        this.y += this.dy;

        this.draw();
    }
}

// Create balls
const colors = ['blue', 'green', 'yellow', 'purple', 'red'];
const balls = colors.map(color => {
    return new Ball(
        Math.random() * (canvas.width - 50) + 25,
        Math.random() * (canvas.height - 50) + 25,
        20,
        color
    );
});

// Add 4 more green balls
for (let i = 0; i < 4; i++) {
    balls.push(new Ball(
        Math.random() * (canvas.width - 50) + 25,
        Math.random() * (canvas.height - 50) + 25,
        20,
        'green'
    ));
}

// Add 3 more red balls
for (let i = 0; i < 3; i++) {
    balls.push(new Ball(
        Math.random() * (canvas.width - 50) + 25,
        Math.random() * (canvas.height - 50) + 25,
        20,
        'red'
    ));
}

// Animation loop
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    balls.forEach(ball => ball.update(balls));
    requestAnimationFrame(animate);
}

// Start animation
animate();

// Intersection Observer for fade-in animations
const observerOptions = {
    root: null,
    rootMargin: '0px',
    threshold: 0.1
};

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

// Observe all feature cards
document.querySelectorAll('.feature-card').forEach(card => {
    observer.observe(card);
});

// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// Header scroll behavior
const header = document.querySelector('header');
let lastScroll = 0;

window.addEventListener('scroll', () => {
    const currentScroll = window.pageYOffset;
    
    // Add/remove header shadow based on scroll position
    if (currentScroll > 0) {
        header.classList.add('scrolled');
    } else {
        header.classList.remove('scrolled');
    }
    
    // Hide/show header on scroll
    if (currentScroll > lastScroll && currentScroll > 100) {
        header.style.transform = 'translateY(-100%)';
    } else {
        header.style.transform = 'translateY(0)';
    }
    
    lastScroll = currentScroll;
});

// VIN/License Plate Search functionality
const searchForm = document.querySelector('.search-container');
const searchInput = searchForm.querySelector('input');
const searchButton = searchForm.querySelector('button');

searchButton.addEventListener('click', (e) => {
    e.preventDefault();
    const value = searchInput.value.trim();
    
    if (!value) {
        // Add shake animation if empty
        searchInput.classList.add('shake');
        searchInput.style.borderColor = '#ff4444';
        setTimeout(() => {
            searchInput.classList.remove('shake');
            searchInput.style.borderColor = '';
        }, 600);
        return;
    }
    
    // Show loading state
    searchButton.disabled = true;
    const originalText = searchButton.textContent;
    searchButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Loading...';
    
    // Simulate API call
    setTimeout(() => {
        searchButton.disabled = false;
        searchButton.innerHTML = originalText;
        // In a real application, this would make an API call
        alert(`Fetching report for: ${value}`);
    }, 1500);
});

// Input focus effects
searchInput.addEventListener('focus', () => {
    searchForm.classList.add('focused');
});

searchInput.addEventListener('blur', () => {
    searchForm.classList.remove('focused');
});

// Feature card hover effects with mouse position
document.querySelectorAll('.feature-card').forEach(card => {
    card.addEventListener('mousemove', (e) => {
        const rect = card.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        
        card.style.transform = `
            perspective(1000px)
            rotateX(${(y - rect.height / 2) / 20}deg)
            rotateY(${-(x - rect.width / 2) / 20}deg)
            translateZ(10px)
        `;
    });
    
    card.addEventListener('mouseleave', () => {
        card.style.transform = 'none';
    });
});

// Add ripple effect to buttons
document.querySelectorAll('.primary-cta, .login-btn, .signup-btn').forEach(button => {
    button.addEventListener('click', function(e) {
        const ripple = document.createElement('span');
        ripple.classList.add('ripple');
        this.appendChild(ripple);
        
        const rect = this.getBoundingClientRect();
        const size = Math.max(rect.width, rect.height);
        const x = e.clientX - rect.left - size / 2;
        const y = e.clientY - rect.top - size / 2;
        
        ripple.style.width = ripple.style.height = `${size}px`;
        ripple.style.left = `${x}px`;
        ripple.style.top = `${y}px`;
        
        setTimeout(() => ripple.remove(), 600);
    });
});

// Mobile menu functionality
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
const navLinks = document.querySelector('.nav-links');

mobileMenuBtn.addEventListener('click', () => {
    navLinks.classList.toggle('active');
    mobileMenuBtn.querySelector('i').classList.toggle('fa-bars');
    mobileMenuBtn.querySelector('i').classList.toggle('fa-times');
});

// Close mobile menu when clicking outside
document.addEventListener('click', (e) => {
    if (!navLinks.contains(e.target) && !mobileMenuBtn.contains(e.target) && navLinks.classList.contains('active')) {
        navLinks.classList.remove('active');
        mobileMenuBtn.querySelector('i').classList.remove('fa-times');
        mobileMenuBtn.querySelector('i').classList.add('fa-bars');
    }
});