.header {
  transition: transform 220ms ease;
  will-change: transform;
}

.header.header-scroll-hidden {
  transform: translateY(-105%);
  pointer-events: none;
}

.header.header-scroll-hidden:focus-within {
  transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .header { transition: none !important; }
}