(function() {
  document.addEventListener('DOMContentLoaded', function() {
    // Elements that should fade in when in view
    var fadeInElements = document.querySelectorAll('.fade-in-on-scroll');

    // If IntersectionObserver is supported, use it for better performance
    if ('IntersectionObserver' in window) {
      // Adjusted options to help large elements fade in
      var observer = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            entry.target.classList.add('fade-in-visible');
            observer.unobserve(entry.target);
          }
        });
      }, {
        threshold: 0.0,
        rootMargin: '0px 0px -10% 0px'
      });

      fadeInElements.forEach(function(el) {
        el.classList.add('fade-in-hidden');
        observer.observe(el);
      });
    } else {
      // Fallback if IntersectionObserver is not supported
      fadeInElements.forEach(function(el) {
        el.classList.add('fade-in-hidden');
      });

      var checkVisibility = function() {
        var windowBottom = window.innerHeight + window.scrollY;
        fadeInElements.forEach(function(el) {
          if ((el.getBoundingClientRect().top + window.scrollY) < windowBottom - (el.offsetHeight * 0.1)) {
            el.classList.add('fade-in-visible');
          }
        });
      };

      window.addEventListener('scroll', checkVisibility);
      checkVisibility();
    }
  });
})();