/* Smooth fade for the built-in header <img> */
.ow_header_pic_wrap img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity .6s ease-in-out;
}


document.addEventListener("DOMContentLoaded", function () {
  // Your three images
  var slides = [
    "https://www.hayaamatrimony.com/ow_static/themes/platinum_pro/images/promo.jpg",
    "https://www.hayaamatrimony.com/ow_userfiles/plugins/customindex/5f496ec0867c8.jpg",
    "https://www.hayaamatrimony.com/ow_userfiles/plugins/customindex/5f3d7afb50d75.jpg"
  ].filter(Boolean);

  if (!slides.length) return;

  // Find the hero <img>
  var img =
    document.querySelector(".ow_header_pic_wrap img") ||
    document.querySelector(".ow_header_pic_wrap picture img");

  if (!img) return;

  // Preload all slides
  slides.forEach(function (src) { var i = new Image(); i.src = src; });

  var idx = 0;

  function showNext() {
    var nextIdx = (idx + 1) % slides.length;
    var nextSrc = slides[nextIdx];

    // Fade out current image
    img.style.opacity = "0";

    // Ensure the next image is loaded before swapping, then fade in
    var pre = new Image();
    pre.onload = function () {
      img.src = nextSrc;
      // Give the browser a tick to apply the new src before fading in
      requestAnimationFrame(function () {
        img.style.opacity = "1";
      });
      idx = nextIdx;
    };
    pre.src = nextSrc;
  }

  // Start after first paint (if the first src is different, ensure we start from it)
  img.src = slides[0];
  img.style.opacity = "1";

  if (slides.length > 1) {
    setInterval(showNext, 5000); // change every 5s
  }
});