function hideHeaderOnScroll() {
  const header = document.querySelector('header');
  if (!header) return;

  let lastScrollY = window.scrollY;
  let offset = 0;
  const headerHeight = header.offsetHeight;

  function onScroll() {
    const currentScroll = window.scrollY;
    const diff = currentScroll - lastScrollY;

    offset += diff;
    offset = Math.max(0, Math.min(offset, headerHeight));

    header.style.transform = `translateY(-${offset}px)`;

    lastScrollY = currentScroll;
  }

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

document.addEventListener('DOMContentLoaded', hideHeaderOnScroll);