Fix the mobile menu's transparent backdrop

Same root cause as the .pub-navbar background fix: public-layout.css
applies var(--bg-primary) to the panel but the var falls through to
transparent on the Astro pages, so the open menu let page text bleed
into the links. Use the same cosmic-blue + backdrop-blur the navbar
already does, plus a fade and slide entry, staggered item reveal, a
hamburger that morphs to a close icon, and a reduced-motion fallback.

Also lock body scroll while open, close on Esc and return focus to
the burger, close on tap of any link inside the panel, and close on
resize past the mobile breakpoint.

Author: michael-chipmates

marketing/public/agc-public.js

@@ -99,9 +99,26 @@
   var burger = document.querySelector('[data-agc-burger]');
   var nav = document.querySelector('.pub-navbar__nav');
   if (burger && nav) {
+    var setOpen = function (open) {
+      nav.classList.toggle('pub-navbar__nav--open', open);
+      burger.setAttribute('aria-expanded', String(open));
+      document.body.style.overflow = open ? 'hidden' : '';
+    };
     burger.addEventListener('click', function () {
-      var isOpen = nav.classList.toggle('pub-navbar__nav--open');
-      burger.setAttribute('aria-expanded', String(isOpen));
+      setOpen(!nav.classList.contains('pub-navbar__nav--open'));
     });
+    nav.addEventListener('click', function (e) {
+      if (e.target instanceof Element && e.target.closest('a')) setOpen(false);
+    });
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape' && nav.classList.contains('pub-navbar__nav--open')) {
+        setOpen(false);
+        burger.focus();
+      }
+    });
+    var mq = window.matchMedia('(min-width: 641px)');
+    var onMq = function (e) { if (e.matches) setOpen(false); };
+    if (mq.addEventListener) mq.addEventListener('change', onMq);
+    else if (mq.addListener) mq.addListener(onMq);
   }
 })();

marketing/src/components/Navbar.astro

@@ -82,4 +82,81 @@ const isActive = (path: string) => currentPath === path || currentPath === path.
     -webkit-backdrop-filter: blur(12px);
     border-bottom: 1px solid color-mix(in srgb, var(--gold-primary) 16%, transparent);
   }
+
+  /* Same root-cause as the navbar fix above: public-layout.css applies
+     var(--bg-primary) to the mobile menu panel but the var falls through
+     to transparent on the Astro pages, so the open menu lets page content
+     bleed through and the links become illegible. Replace with an opaque
+     cosmic-blue + backdrop blur, animate the entry/exit, stagger the
+     items, and morph the burger into a close icon. */
+  @media (max-width: 640px) {
+    .pub-navbar .pub-navbar__nav {
+      display: flex;
+      visibility: hidden;
+      opacity: 0;
+      transform: translateY(-8px);
+      pointer-events: none;
+      transition:
+        opacity 0.24s ease,
+        transform 0.24s ease,
+        visibility 0s linear 0.24s;
+      padding: 2rem 1.5rem max(2rem, env(safe-area-inset-bottom));
+      background: color-mix(in srgb, var(--bg-deep-space, #0C1133) 94%, transparent);
+      backdrop-filter: blur(24px) saturate(140%);
+      -webkit-backdrop-filter: blur(24px) saturate(140%);
+      border-top: 1px solid color-mix(in srgb, var(--gold-primary, #E6BC5C) 16%, transparent);
+      box-shadow: 0 16px 40px color-mix(in srgb, #000 45%, transparent);
+      overflow-y: auto;
+    }
+
+    .pub-navbar .pub-navbar__nav--open {
+      visibility: visible;
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+      transition:
+        opacity 0.24s ease,
+        transform 0.24s ease;
+    }
+
+    .pub-navbar__nav > * {
+      opacity: 0;
+      transform: translateY(10px);
+      transition: opacity 0.3s ease, transform 0.3s ease;
+    }
+
+    .pub-navbar__nav--open > * {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    .pub-navbar__nav--open > *:nth-child(1) { transition-delay: 0.08s; }
+    .pub-navbar__nav--open > *:nth-child(2) { transition-delay: 0.13s; }
+    .pub-navbar__nav--open > *:nth-child(3) { transition-delay: 0.18s; }
+    .pub-navbar__nav--open > *:nth-child(4) { transition-delay: 0.23s; }
+    .pub-navbar__nav--open > *:nth-child(5) { transition-delay: 0.28s; }
+    .pub-navbar__nav--open > *:nth-child(6) { transition-delay: 0.33s; }
+
+    .pub-navbar__burger-line {
+      transform-origin: center;
+      transition: transform 0.22s ease, opacity 0.18s ease;
+    }
+    .pub-navbar__burger[aria-expanded="true"] .pub-navbar__burger-line:nth-child(1) {
+      transform: translateY(7px) rotate(45deg);
+    }
+    .pub-navbar__burger[aria-expanded="true"] .pub-navbar__burger-line:nth-child(2) {
+      opacity: 0;
+    }
+    .pub-navbar__burger[aria-expanded="true"] .pub-navbar__burger-line:nth-child(3) {
+      transform: translateY(-7px) rotate(-45deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .pub-navbar .pub-navbar__nav,
+    .pub-navbar__nav > *,
+    .pub-navbar__burger-line {
+      transition: none !important;
+    }
+  }
 </style>