document.addEventListener("DOMContentLoaded", () => {
  const openBtn = document.getElementById('openModalBtn');
  const playBtn = document.querySelector('.playbutton');
  const modal = document.getElementById('modalOverlay');
  const closeBtn = document.getElementById('closeModalBtn');
  const video = document.getElementById('popupVideo');
  const hamburger = document.querySelector('.js-hamburger');
  const hamburgerBg = document.querySelector('.hamburgerBg');

  function openModal() {
    modal.classList.add('show');
    document.body.classList.add('open');
    video.currentTime = 0;
    video.play();
  }

  function closeModal() {
    modal.classList.remove('show');
    document.body.classList.remove('open');
    video.pause();
    video.currentTime = 0;
  }

  if (openBtn && playBtn && closeBtn && modal) {
    openBtn.addEventListener('click', openModal);
    playBtn.addEventListener('click', openModal);
    closeBtn.addEventListener('click', closeModal);
    modal.addEventListener('click', (e) => {
      if (e.target === modal) closeModal();
    });
  }

  // fade-in
  const fadeIns = document.querySelectorAll('.fade-in');
  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.1 });
  fadeIns.forEach(el => {
    if (!el.closest('.modal-overlay')) {
      observer.observe(el);
    }
  });

  // fade-blur
  gsap.registerPlugin(ScrollTrigger);

  // h3,h4
  gsap.fromTo('.detailTxt .fade-blur',
    { opacity: 0, filter: 'blur(6px)' },
    {
      opacity: 1,
      filter: 'blur(0px)',
      duration: 1.4,
      ease: 'power2.out',
      scrollTrigger: {
        trigger: '.detailTxt',
        start: 'top 90%',
        toggleActions: 'play none none none',
      }
    }
  );

  // h5,p
  gsap.fromTo('.producer .fade-blur',
    { opacity: 0, filter: 'blur(6px)' },
    {
      opacity: 1,
      filter: 'blur(0px)',
      duration: 0.8,
      ease: 'power2.out',
      scrollTrigger: {
        trigger: '.producer',
        start: 'top 90%',
        toggleActions: 'play none none none',
      }
    }
  );

});