/* ============================================================
   overlay.css — shared site chrome:
     1. the Selected Work menu OVERLAY (a near-opaque scrim over the
        current page — you don't navigate to a separate menu page), and
     2. the header that hides on scroll-down and pins (with the same
        scrim) on scroll-up.
   Markup + behaviour: js/overlay.js. Menu list/scatter styling: menu.css.
   Load AFTER base.css and the page stylesheet.
   ============================================================ */

/* ---------- Menu overlay ----------
   Injected by overlay.js into every page and toggled open by the header
   MENU/CLOSE control. Sits over the current page on a near-opaque white
   scrim (--overlay-bg) — no navigation. overflow:hidden clips the image
   scatter where it bleeds off the edges. */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  background: var(--overlay-bg);
  -webkit-backdrop-filter: blur(var(--overlay-blur));
  backdrop-filter: blur(var(--overlay-blur));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--overlay-fade) var(--ease),
              visibility 0s linear var(--overlay-fade);
}
.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--overlay-fade) var(--ease);
}

/* Lock the page behind an open overlay. */
body.menu-open { overflow: hidden; }

/* ---------- Header: hide on scroll-down, pin on scroll-up ----------
   The shared `.header` rides at the top, slides up out of view as you scroll
   down, and drops back in — backed by the near-opaque scrim — the moment you
   scroll up. Driven by overlay.js. (The drop-in site nav handles its own
   hide-on-scroll in header.css; its `.has-title` variant uses the difference
   blend instead of a scrim.) */
.header {
  z-index: 60;   /* above the overlay scrim (40) so MENU/CLOSE stays live */
  transition: transform var(--header-slide) var(--ease),
              background-color var(--header-slide) var(--ease);
}

.header.is-hidden { transform: translateY(-130%); }

.header.is-pinned {
  background: var(--overlay-bg);
  -webkit-backdrop-filter: blur(var(--overlay-blur));
  backdrop-filter: blur(var(--overlay-blur));
}

@media (prefers-reduced-motion: reduce) {
  .menu-overlay,
  .header { transition-duration: 0.01s; }
}