/* Keep the sticky header's layout slot while moving only its painted surface. */
@media (max-width: 760px) {
  #siteHeader[data-af-scroll-header] {
    translate: 0 0;
    transition: translate 420ms cubic-bezier(.16, 1, .3, 1),
      border-color 300ms ease, box-shadow 300ms ease;
  }

  #siteHeader[data-af-scroll-header="hidden"] {
    translate: 0 calc(-100% - 2px);
    pointer-events: none;
    transition-duration: 220ms, 300ms, 300ms;
    transition-timing-function: cubic-bezier(.4, 0, .6, 1), ease, ease;
  }

  /* Keyboard focus must remain visible, including before the JS focus event. */
  #siteHeader[data-af-scroll-header]:has(:focus-visible) {
    translate: 0 0;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  #siteHeader[data-af-scroll-header] {
    translate: none;
    transition: none;
  }
}