/* =====================================================================
   STICKY HEADER  (behaviour only — see js/sticky-header.js)

   The header is lifted out of the scaled #stage into this position:fixed
   host and re-scaled by the same factor, so the browser pins it natively
   (no per-frame JS transform → no jitter). Same look/behaviour on every
   page: transparent at the top, hides on scroll-down, and slides back in
   as a solid, square, full-width bar on scroll-up.
   ===================================================================== */

#fixedHeaderHost {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 0;
  z-index: 9000;
  pointer-events: none;         /* only the bar itself is interactive */
}

.fh-scale {
  position: absolute;
  top: 0; left: 0;
  width: 1280px;
  transform-origin: top left;
  will-change: transform;
}

/* The header, now inside the fixed host. The id gives these rules enough
   specificity to override each page's own <prefix>-header styling, so every
   page behaves identically. */
#fixedHeaderHost .sticky-hdr {
  position: absolute;
  left:  var(--rest-left, 21px);
  top:   var(--rest-top, 25px);
  width: var(--rest-width, 1238px);
  pointer-events: auto;
  background: transparent;       /* transparent at the top of the page */
  box-shadow: none;
  /* Only compositor-cheap properties + the hide/show transform animate. */
  transition: background 260ms cubic-bezier(0.215, 0.61, 0.355, 1),
              box-shadow 260ms cubic-bezier(0.215, 0.61, 0.355, 1),
              -webkit-backdrop-filter 260ms cubic-bezier(0.215, 0.61, 0.355, 1),
              backdrop-filter 260ms cubic-bezier(0.215, 0.61, 0.355, 1),
              transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1),
              opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Scrolled: solid, square, full-width, flush to the very top. left/top/width
   change instantly (no transition) so nothing thrashes during scroll. */
#fixedHeaderHost .sticky-hdr.is-scrolled {
  left: 0;
  top: 0;
  width: 1280px;
  border-radius: 0;
  background: rgba(9, 25, 40, 0.9);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Hidden on scroll-down. */
#fixedHeaderHost .sticky-hdr.is-hidden {
  transform: translateY(-160%);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #fixedHeaderHost .sticky-hdr { transition: none; }
}