/* ============================================================================
   Navbar docking — the "headroom" behaviour from blueguardian.com.

   At rest the navbar stays exactly where each page's hero puts it, because
   every hero positions it differently (About uses a margin, How It Works pins
   it absolutely at 10,10, Community narrows it to 377 on mobile) and those
   geometries are measured against Figma. Nothing here applies at scroll 0.

   Once the page is scrolled past the nav's own height it DOCKS: fixed to the
   top, sliding out of the way on a downward scroll and back in the moment the
   user scrolls up. State is driven by /assets/atlas-nav-dock.js, which only
   ever toggles two classes.

   TWO NAVBARS. The site is mid-migration: .afx-nav on the rebuilt pages,
   .nav-glass on the currently-live pages and every locale copy. Both dock, so
   both are named on the docked rule and nowhere else — the modifier class does
   all the rest of the work.

   Transform and opacity only. The docked nav is a ~69px fixed strip, so
   animating it costs one composited layer and no layout.
   ========================================================================= */

/* the docked state. `left/right: 0` with an auto margin rather than
   translateX(-50%) keeps the X axis free, so the Y transform below is the only
   thing on the element and cannot fight the centring. */
.afx-nav--dock {
  position: fixed;
  top: 10px;
  /* left AND right with width:auto — NOT a percentage width. The base
     .afx-nav is `width: calc(100% - 20px)`, and once docked that percentage
     resolved against a 1512 box rather than the viewport, giving a 1492-wide
     bar starting at x=387: correctly positioned by every measurement, and
     almost entirely off the right of a 1440 screen. Anchoring both edges
     removes the percentage from the equation entirely. */
  left: 10px;
  right: 10px;
  width: auto;
  margin: 0 auto;
  max-width: 1492px;
  z-index: 900;
  /* the pill is translucent by design; over arbitrary page content that has to
     become a real surface or the links land on top of body copy */
  background: rgba(13, 13, 13, .72);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  transition: transform var(--t-base) var(--e-out),
              opacity var(--t-fast) var(--e-out);
}

/* THE DOCKED FROST GOES ON ::before, and will-change is gone. Both matter.

   An element carrying backdrop-filter is a BACKDROP ROOT for its descendants,
   and `will-change: transform` forms one too. This rule had both, so the
   moment the navbar docked the mega-menu panels inside it went back to
   sampling the bar's own composited backdrop instead of the page — measured
   byte-identical with their blur on and off. The base .afx-nav was fixed the
   same way on 27 Aug; this modifier quietly put the bug back for every
   scrolled page, which is most of them.

   Dropping will-change costs one compositor hint on a 69px strip. The blur
   working is worth more. */
.afx-nav--dock::before {
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* How It Works pins its nav absolutely at (10,10) inside the hero stage, so the
   docked rule has to out-specify that rather than rely on source order. */
.afxhw-hero__stage > .afx-nav.afx-nav--dock { left: 10px; right: 10px; width: auto; top: 10px; }

/* scrolling down — get out of the way. 120% clears the shadow too. */
.afx-nav--away {
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
}

/* A docked nav is out of flow, so the page would jump by its height at the
   moment it docks. The spacer is inserted by the JS and takes over that space;
   it is only ever non-zero while docked. */
.afx-nav-spacer { display: block; }

@media (max-width: 760px) {
  .afx-nav--dock { top: 8px; left: 8px; right: 8px; width: auto; max-width: 377px; }
  .afxhw-hero__stage > .afx-nav.afx-nav--dock { top: 8px; }
}

/* Motion sensitivity: the nav still docks and still hides — that is layout and
   affordance, not decoration — it just does it without the slide. */
@media (prefers-reduced-motion: reduce) {
  .afx-nav--dock { transition: none; }
  .afx-nav--away { transform: none; opacity: 0; visibility: hidden; }
}