/* ---------- the site nav ----------
   One definition, used by every page. nav.js injects the markup into [data-site-nav] and
   draws the outline, so a link only ever changes here. Every token it needs carries a
   fallback, so a page that defines its own palette overrides it and a page that does not
   still gets a correct nav.

   Also holds the pieces the nav shares with the rest of the site — .logo, .btn, .ring and
   the moving .flow-fill gradient — because the hero button and the footer mark use them too. */
@property --pinch { syntax: "<number>"; inherits: false; initial-value: 1; }
:root {
  --brand-flow: linear-gradient(90deg,
    var(--hl-lime, #d8eb8f), #8f8c9a, var(--hl-lav, #c8b9ff), #6f6c78, var(--hl-lime, #d8eb8f));
}
.nav {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); z-index: 20;
  width: 100%; max-width: 100%; margin: 16px auto 0; height: 56px;
  display: flex; align-items: stretch; gap: 12px;
  font-family: var(--display, "Red Hat Display", system-ui, sans-serif); font-size: 15px;
  --pinch: 1; --ease: cubic-bezier(.22, .8, .24, 1);
  transition: width .65s var(--ease), gap .65s var(--ease), --pinch .65s var(--ease);
}
.nav.compact { width: min(1110px, 100%); gap: 0; --pinch: 0; }
.nav-glass {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(22, 22, 26, .62);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}
.nav-edge { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; pointer-events: none; }
.nav-edge path { fill: none; stroke: url(#navEdgeGrad); stroke-width: 1; }
.seg { display: flex; align-items: center; min-width: 0; }
.seg-logo { padding: 0 14px 0 18px; }
.seg-links { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; padding: 0 26px; }
/* The links centre on the BAR, not on the space left between the logo and the buttons. Those
   two ends are different widths (and change width when the bar compacts), so centring within
   the gap left the links ~60px off the page's centre line, the one the hero button sits on.
   .seg-links is static, so the sticky .nav is the containing block. */
.seg-links ul { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.seg-cta { padding: 6px; align-items: stretch; }
.nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav a { text-decoration: none; color: var(--fg, #f3f2f5); opacity: .86; transition: opacity .2s; white-space: nowrap; }
.nav a:hover { opacity: 1; }
.nav .spacer { flex: 1; }
.nav .btn { position: relative; display: grid; place-items: center; height: 100%; padding: 0 24px; border-radius: 12px; opacity: 1; }

/* Shared moving gradient: a 200% strip that slides half its width, so it loops seamlessly
   and only animates transform. */
.flow-fill { position: absolute; inset: 0 auto 0 0; width: 200%; background: var(--brand-flow) 0 0 / 50% 100% repeat-x; animation: brand-flow 7s linear infinite; will-change: transform; }
@keyframes brand-flow { to { transform: translateX(-50%); } }

/* Header mark: the brand's own morph animation (woot_icon_alpha.mov, cut to a frame sheet in
   assets/brand/logo-morph.webp) used as a MASK over the moving gradient, with grain on top, so
   the shape animates and the colour stays the brand flow. nav.js steps the frames: W -> wordmark
   on load, wordmark -> W when the nav compacts on scroll, and back again at the top.

   Geometry is in the source video's pixels, scaled by --k so one number (--lw, the settled
   wordmark's width) sizes everything: the sheet's frames are 940x295 source px, the wordmark
   sits at (26,85) inside a frame and is 852 wide, the W at (273,45) and 357 wide. */
.logo {
  --lw: 118px; --k: calc(var(--lw) / 852);
  position: relative; display: block; flex: none;
  width: var(--lw); height: calc(var(--lw) * 61 / 375); opacity: 1 !important;
  transition: width .65s var(--ease, ease);
}
.logo-anim {
  position: absolute; left: calc(var(--k) * -26); top: calc(var(--k) * -85);
  width: calc(var(--k) * 940); height: calc(var(--k) * 295); overflow: hidden;
  -webkit-mask: url("assets/brand/logo-morph.webp") 0 0 / 1100% 600% no-repeat;
          mask: url("assets/brand/logo-morph.webp") 0 0 / 1100% 600% no-repeat;
  transition: transform .65s var(--ease, ease);
}
.logo-anim::after {
  content: ""; position: absolute; inset: 0;
  opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='2.4 0 0 0 -.7  2.4 0 0 0 -.7  2.4 0 0 0 -.7  0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Compact: the box narrows to the W, and the frame slides left so the W (centred in the video)
   ends up where the wordmark started. */
.nav.compact .logo { width: calc(var(--k) * 357); }
/* The mark is short, so its link reaches past it to a comfortable tap target. */
.logo::before { content: ""; position: absolute; inset: -18px -12px; }
.nav.compact .logo-anim { transform: translateX(calc(var(--k) * -273)); }
/* Get started: same gradient, shown only as a 1px ring. */
.btn .ring {
  position: absolute; inset: 0; border-radius: inherit; padding: 1px; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.btn.ghost { background: rgba(255, 255, 255, .02); }

/* The menu button and its panel exist only where the links do not fit in the bar. */
.seg-menu { display: none; padding: 6px 6px 6px 0; align-items: stretch; }
.menu-btn {
  display: grid; place-items: center; width: 44px; height: 100%; padding: 0; border: 0; border-radius: 12px;
  color: var(--fg, #f3f2f5); background: rgba(255, 255, 255, .06); cursor: pointer;
}
.menu-btn svg { width: 20px; height: 20px; }
.menu-btn path { transition: transform .25s var(--ease), translate .25s var(--ease); transform-origin: 12px 12px; }
.nav.menu-open .menu-btn .l1 { translate: 0 4px; transform: rotate(45deg); }
.nav.menu-open .menu-btn .l2 { translate: 0 -4px; transform: rotate(-45deg); }
.nav-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); padding: 8px;
  border-radius: 18px; border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(22, 22, 26, .92);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9);
}
.nav-menu[hidden] { display: none; }
.nav-menu ul { display: grid; gap: 2px; }
.nav-menu a {
  display: block; padding: 14px 16px; border-radius: 12px; font-size: 17px; opacity: 1;
}
.nav-menu a:hover, .nav-menu a:focus-visible { background: rgba(255, 255, 255, .06); }

@media (max-width: 1100px) {
  .seg-logo { flex: 1; }
  .seg-links { display: none; }
  .seg-menu { display: flex; }
  /* Some pages have no side gutter of their own, so the bar keeps one off the screen edge. */
  .nav, .nav.compact { width: min(100%, calc(100vw - 48px)); }
}
@media (max-width: 760px) {
  .seg-logo { padding: 0 18px; }
  .logo { --lw: 67px; }
  .nav { font-size: 14px; }
  .nav .btn { padding: 0 14px; }
  .nav, .nav.compact { width: min(100%, calc(100vw - 32px)); }
}