const images = [
  'images/bg1.png',
  'images/bg2.png',
  'images/bg3.png'
];

let index = 0;

// Preload the images
const preloadImages = () => {
  images.forEach(src => {
    const img = new Image();
    img.src = src;
  });
};

preloadImages();

const bg = document.getElementById('background');

// Initially set background image without transition (to avoid flicker)
bg.style.backgroundImage = `url("${images[index]}")`;
bg.style.opacity = 1;  // Ensure it's visible immediately

// Change background image every 10 seconds with fade effect
setInterval(() => {
  index = (index + 1) % images.length;  // Cycle through images

  // Fade out first
  bg.style.opacity = 0;

  // After fade-out, switch image and fade-in
  setTimeout(() => {
    bg.style.backgroundImage = `url("${images[index]}")`;
    bg.style.opacity = 1;
  }, 1000);  // Wait 1 second before applying the new background
}, 10000);  // 10-second interval for image change