script.js

// 👻 GhostPack Spectral Interactivity 😈

// Smooth scrolling
document.querySelectorAll('a.nav-link').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href').substring(1);
        document.getElementById(targetId).scrollIntoView({ behavior: 'smooth' });
    });
});

// Scroll reveal animations
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('animate__animated', 'animate__fadeInUp');
            if (entry.target.classList.contains('card')) {
                entry.target.classList.add('ghost-animation');
            }
        }
    });
}, { threshold: 0.3 });

document.querySelectorAll('.card, h2, .lead, section').forEach(el => {
    observer.observe(el);
});

// Neon glow on card hover
document.querySelectorAll('.card').forEach(card => {
    card.addEventListener('mouseenter', () => {
        card.style.transform = 'translateY(-12px) scale(1.05)';
        card.style.boxShadow = '0 0 50px rgba(0, 255, 204, 0.9)';
    });
    card.addEventListener('mouseleave', () => {
        card.style.transform = 'translateY(0) scale(1)';
        card.style.boxShadow = '0 0 25px rgba(0, 255, 204, 0.5)';
    });
});

// Enable tooltips
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

// Speed chart
const ctx = document.getElementById('speedChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['GTX 1650 (6GB)', 'RTX 3050 (8GB)', 'RTX 3060 (12GB)', 'RTX 4090 (24GB)'],
        datasets: [{
            label: 'Frame Generation Time (s)',
            data: [22, 17.5, 12.5, 2],
            backgroundColor: ['#00ffcc', '#00cc99', '#00aaff', '#ffcc00'],
            borderColor: ['#00cc99', '#009966', '#0088cc', '#cc9900'],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Seconds per Frame',
                    color: '#ffffff'
                },
                ticks: { color: '#ffffff' }
            },
            x: {
                ticks: { color: '#ffffff' }
            }
        },
        plugins: {
            legend: { labels: { color: '#ffffff' } }
        }
    }
});