// /default/js/scroll-banner.js
(function () {
  const SPEED = 1.0; // 이동 강도 (0.2~0.4 추천)

  let ticking = false;

  function apply() {
    document.querySelectorAll('.scroll-banner .scroll-bg').forEach(bg => {
      const wrap = bg.parentElement;          // .scroll-banner
      const rect = wrap.getBoundingClientRect();
      const vh   = window.innerHeight;

      // 배경이 위로 최대 이동할 수 있는 양(양수 px)
      const maxShift = bg.offsetHeight - wrap.offsetHeight;

      // ▶ 진행도 계산 (배너가 화면 아래에 있을 때 0, 화면을 지나며 1에 수렴)
      //   rect.top === vh  → progress = 0   (배너가 화면 하단에 막 닿기 직전)
      //   rect.top === 0   → progress = ~0.5
      //   rect.top === -wrap.offsetHeight → progress ≈ 1
      let progress = (vh - rect.top) / (vh + wrap.offsetHeight);
      if (progress < 0) progress = 0;     // 아직 멀리 있을 때
      if (progress > 1) progress = 1;     // 지나간 뒤 과도한 값 방지

      // 이동량: 0 → maxShift 사이 선형 보간 + 속도계수
      const shift = Math.min(maxShift, progress * maxShift * SPEED);

      // 위로 이동(음수 translateY)
      bg.style.transform = `translateY(${-shift}px)`;
    });

    ticking = false;
  }

  function onScroll() {
    if (!ticking) {
      requestAnimationFrame(apply);
      ticking = true;
    }
  }

  function init() {
    apply();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', apply);
  }

  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
})();