document.addEventListener('DOMContentLoaded', function () {
  const swiper = new Swiper('.pure-swiper', {
    effect: 'fade',
    fadeEffect: { crossFade: true },
    loop: true,
    speed: 1000,
    autoplay: { delay: 8000, disableOnInteraction: false },
    pagination: { el: '.swiper-pagination', clickable: true },
    navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
    on: {
      init() {
        applyToActive(this);           
      },
      slideChangeTransitionStart() {
        applyToActive(this);           
      },
      slideChangeTransitionEnd() {
        resetNonActive(this);
      },
      loopFix() {
        requestAnimationFrame(() => {
          applyToActive(this);
        });
      },
    },
  });
  function applyToActive(swiper) {
    const activeSlide = swiper.slides[swiper.activeIndex];
    if (!activeSlide) return;
    const img = activeSlide.querySelector('img');
    if (!img) return;

    img.classList.remove('zoom-out');
    // rAF·Î ´ÙÀ½ ÆäÀÎÆ®¿¡ Á¤È®È÷ ½ÃÀÛÇÏ°Ô ÇÔ
    requestAnimationFrame(() => {
      img.classList.add('zoom-out');
    });
  }
  function resetNonActive(swiper) {
    swiper.slides.forEach((slide, idx) => {
      if (idx === swiper.activeIndex) return;
      const img = slide.querySelector('img');
      if (!img) return;
      img.style.transition = 'none';
      img.classList.remove('zoom-out');
      void img.offsetWidth;
      img.style.transition = ''; 
    });
  }
});

let resizeTimer;
function disableAnimDuringResize() {
  document.documentElement.classList.add('noa');
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    document.documentElement.classList.remove('noa');
  }, 600);
}
window.addEventListener('orientationchange', disableAnimDuringResize, { passive: true });
window.addEventListener('resize', disableAnimDuringResize, { passive: true });