/* Slides the fixed header out of view while scrolling down, and back
   in while scrolling up - driven by header-scroll-hide.js toggling
   .header--peek-hidden on #header. This is an additive layer on top
   of the captured markup: the remote header component
   (local runtime's components/header/index.js) only manages
   its own initialized/active state (the "js--visible"/"js--initiated"
   classes come from a shared tab/accordion state-class utility, not a
   scroll-direction listener) - auto-hide-on-scroll was never actually
   wired up in what got captured, so it has to be added rather than
   fixed.
   Only transform is animated (no layout properties), and hide/show
   use asymmetric duration+easing rather than one transition reversed
   - hiding is quicker and accelerates away (power2.in), returning is
   slightly slower and snappy (power3.out), matching how real motion
   isn't symmetric. !important matches this project's established
   convention for winning the cascade against the remote stylesheet,
   which already sets its own transform on .header (confirmed via a
   non-"none" identity-matrix computed value at rest). */
.header {
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.header.header--peek-hidden {
  transform: translateY(-100%) !important;
  transition: transform 260ms cubic-bezier(0.4, 0, 1, 1) !important;
}

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