script.js

// SVG Turbulence animation
const filter = document.querySelector("#turbulence feTurbulence");
let frame = 0;
const rad = Math.PI / 180;

function animateTurbulence() {
    frame += 0.5;
    const bfx = 0.01 + 0.003 * Math.cos(frame * rad);
    const bfy = 0.01 + 0.003 * Math.sin(frame * rad);
    filter.setAttribute('baseFrequency', `${bfx} ${bfy}`);
    requestAnimationFrame(animateTurbulence);
}
animateTurbulence();

// Image Slider interaction
const container = document.querySelector('.container');
const images = container.querySelectorAll('img');

// Function to set active image and center it
function setActiveImage(img) {
    images.forEach(i => i.classList.remove('active'));
    img.classList.add('active');

    // Center the active image in the container
    const containerRect = container.getBoundingClientRect();
    const imgRect = img.getBoundingClientRect();
    const scrollLeft = container.scrollLeft;
    const offset = (imgRect.left + imgRect.width / 2) - (containerRect.left + containerRect.width / 2);
    container.scrollTo({ left: scrollLeft + offset, behavior: 'smooth' });
}

// Click / tap to activate
images.forEach(img => {
    img.addEventListener('click', () => setActiveImage(img));
});

// Touch swipe support
let startX = 0;
let scrollStart = 0;

container.addEventListener('touchstart', (e) => {
    startX = e.touches[0].pageX;
    scrollStart = container.scrollLeft;
});

container.addEventListener('touchmove', (e) => {
    const x = e.touches[0].pageX;
    container.scrollLeft = scrollStart + (startX - x);
});