document.addEventListener('DOMContentLoaded', () => {
  let scrollPending = false;
  let lastScrollY = 0;

  const threshold = 60;
  const headerEl = document.querySelector('.header-5');
  const logoEl = document.querySelector('.header-5__popout');
  const headerHeight = headerEl?.offsetHeight ?? 0;

  window.addEventListener(
    'scroll',
    () => {
      scrollPending = true;
    },
    { passive: true }
  );

  const tick = () => {
    if (scrollPending) {
      handleScroll();
      scrollPending = false;
    }
    requestAnimationFrame(tick);
  };

  requestAnimationFrame(tick);

  function handleScroll() {
    const currentScrollY = window.scrollY;

    const isCrossingThreshold =
      (lastScrollY < threshold && currentScrollY >= threshold) ||
      (lastScrollY >= threshold && currentScrollY < threshold);

    const isCrossingHeader =
      (lastScrollY < headerHeight && currentScrollY >= headerHeight) ||
      (lastScrollY >= headerHeight && currentScrollY < headerHeight);

    const isMinorScroll = Math.abs(lastScrollY - currentScrollY) <= 5;

    if (isMinorScroll && !isCrossingThreshold && !isCrossingHeader) {
      lastScrollY = currentScrollY;
      return;
    }
    if (currentScrollY > headerHeight) {
      logoEl?.classList.add('active');
    }

    if (currentScrollY < threshold) {
      logoEl?.classList.remove('active');
    }

    lastScrollY = currentScrollY;
  }
});