/* NAV. Geometry, colour and motion measured on fora.so; see docs/research/components/nav.spec.md.
   Desktop bar >=1024px, burger bar <=1023.98px.

   Fora switches at 1280. We do not, because that number is unreachable on a 1280-wide display: the
   scrollbar takes about 15px, so the viewport tops out near 1265 and the site serves a phone layout
   to a desktop. The same happens to any laptop at 110% browser zoom. 1024 was measured across the
   whole page - no horizontal overflow at 1024, 1100, 1152, 1265 or 1440, every section keeps at
   least a 24px gutter, and the WebGL gallery and the pinned process cards both still run.

   v3: once the page scrolls, the bar's row sits on a floating glass capsule. The old black-to-clear
   gradient scrim faded out exactly where the links are, so the links read straight over whatever
   was passing underneath (a bright demo screenshot, a headline). Below 1024 the burger opens a
   full-screen menu (scripts/menu.mjs writes it, js/nav.js drives it). */

:root{
  --nav-ease-state:cubic-bezier(.3,0,.25,1);   /* scrim + mobile bar fade, 420ms  [fit] */
  --nav-ease-menu:cubic-bezier(.3,0,.25,1);    /* burger morph, 500ms             [fit] */
  --nav-ease-pill:cubic-bezier(.5,.6,.4,1);    /* pill background hover, 220ms    [fit] */
  --menu-ease-in:cubic-bezier(.76,0,.24,1);    /* the sheet's travel */
  --menu-ease-out:cubic-bezier(.22,1,.36,1);   /* things arriving on the sheet */
  --accent:#8c86ff;                            /* the mark's third triangle */
}

/* ---------- shell ---------- */
.gf-nav{position:fixed;top:0;left:0;right:0;z-index:7}

.gf-nav-bar{
  position:relative;z-index:1;display:flex;flex-direction:row;justify-content:center;align-items:flex-start;
  padding:0 40px;width:100%;box-sizing:border-box;
  background-color:rgba(0,0,0,0);
}

/* the old gradient scrim is retired in favour of the capsule below; kept in the markup, never shown */
.gf-nav-scrim{display:none}

.gf-nav-inner{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  flex:1 0 auto;width:100%;max-width:1080px;padding:12px 0 0;box-sizing:border-box;
}
.gf-nav-row{position:relative;isolation:isolate;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:48px;width:100%;height:36px}

/* the capsule: one layer under the row, faded and scaled in, so the row itself never re-lays out */
.gf-nav-row::before{
  content:"";position:absolute;z-index:-1;inset:-8px -16px;border-radius:var(--radius-pill);
  background:rgba(9,9,12,.78);
  box-shadow:0 12px 32px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;transform:scale(.985,.9);
  transition:opacity 420ms var(--nav-ease-state),transform 520ms var(--menu-ease-out);
  pointer-events:none;
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .gf-nav-row::before{background:rgba(9,9,12,.66);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
}
.gf-nav.is-scrolled .gf-nav-row::before{opacity:1;transform:none}

/* ---------- brand ---------- */
/* Fora computes this column at exactly 244px, which fixes the links column at 496px */
.gf-nav-brand-col{display:flex;flex-direction:row;align-items:center;flex:0 0 244px;max-width:244px;height:24px}
.gf-nav-brand{display:flex;flex-direction:row;align-items:center;gap:8px;height:24px}
.gf-nav-mark{width:23px;height:22px;flex:0 0 auto;transition:transform .6s var(--menu-ease-out)}
@media (hover:hover) and (pointer:fine){.gf-nav-brand:hover .gf-nav-mark{transform:rotate(-8deg) scale(1.06)}}
.gf-nav-wordmark{
  font-size:18px;line-height:24px;letter-spacing:-.36px;font-weight:500;
  color:var(--ink);white-space:nowrap;
}

/* ---------- centre links ---------- */
.gf-nav-links{
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:48px;
  flex:1 0 auto;height:21px;
}
.gf-nav-links li{height:21px}
.gf-nav-link{
  position:relative;display:block;font-size:14px;line-height:21px;letter-spacing:-.28px;font-weight:400;
  color:var(--ink-80);white-space:nowrap;transition:color .4s var(--ease-link);
}
/* the page you are on: lit, with the accent dot under it */
.gf-nav-link[aria-current="page"]{color:var(--ink)}
.gf-nav-link[aria-current="page"]::after{
  content:"";position:absolute;left:50%;bottom:-7px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent);
}
@media (hover:hover) and (pointer:fine){.gf-nav-link:hover{color:var(--ink)}}
.gf-nav-link:focus-visible{color:var(--ink)}

/* ---------- right side ---------- */
.gf-nav-actions{
  display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:16px;
  flex:0 0 auto;width:244px;height:36px;
}

.gf-nav-cta{
  position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;
  padding:0 24px;height:36px;flex:0 0 auto;box-sizing:border-box;
  border-radius:var(--radius-pill);
  background-color:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  color:var(--ink);font-size:14px;line-height:21px;letter-spacing:-.28px;white-space:nowrap;
  transition:background-color 220ms var(--nav-ease-pill);
}
.gf-nav-cta::after{
  content:"";position:absolute;inset:0;border:1px solid var(--ink-10);
  border-radius:inherit;pointer-events:none;
}
@media (hover:hover) and (pointer:fine){.gf-nav-cta:hover{background-color:rgba(255,255,255,.25)}}
.gf-nav-cta:active,.gf-nav-cta:focus-visible{background-color:rgba(255,255,255,.25)}
.gf-nav-cta:active{transform:scale(.97)}

/* v2: the header pill yields to the hero. While the hero's own call to action is on
   screen there is only one, in the middle of the page; once it scrolls away the header
   pill drops into the corner to take its place. On a page with no hero call to action
   (the work page) nav.js sets is-cta-in from the start. visibility is switched after the
   fade so the hidden pill leaves the tab order and the accessibility tree without a JS toggle. */
.gf-nav-actions > .gf-nav-cta{
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate3d(0,-12px,0) scale(.94);
  filter:blur(3px);
  transform-origin:100% 0;
  transition:
    opacity 520ms var(--nav-ease-state),
    transform 520ms var(--nav-ease-state),
    filter 520ms var(--nav-ease-state),
    background-color 220ms var(--nav-ease-pill),
    visibility 0s linear 520ms;
}
.gf-nav.is-cta-in .gf-nav-actions > .gf-nav-cta{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:none;filter:none;
  transition-delay:0s,0s,0s,0s,0s;
}
/* inside the scrolled capsule the pill needs no blur of its own: the capsule already has one */
.gf-nav.is-scrolled .gf-nav-actions > .gf-nav-cta{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:var(--ink);color:#0b0b0e}
.gf-nav.is-scrolled .gf-nav-actions > .gf-nav-cta::after{border-color:transparent}
@media (hover:hover) and (pointer:fine){.gf-nav.is-scrolled .gf-nav-actions > .gf-nav-cta:hover{background-color:#fff}}

/* ---------- burger and menu (hidden on the wide bar) ---------- */
.gf-nav-burger{display:none}
.gf-menu{display:none}

/* ================= burger bar, <=1023.98px ================= */
@media (max-width:1023.98px){
  .gf-nav-bar{
    padding:0 24px;
    transition:background-color 420ms var(--nav-ease-state);
  }
  .gf-nav-row::before{display:none}
  /* the 1px hairline: transparent until scrolled */
  .gf-nav-bar::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    border-bottom:1px solid rgba(255,255,255,0);
    transition:border-color 420ms var(--nav-ease-state);
  }
  .gf-nav.is-scrolled .gf-nav-bar{background-color:rgba(0,0,0,.86)}
  .gf-nav.is-scrolled .gf-nav-bar::after{border-bottom-color:var(--ink-10)}
  /* open: the sheet is the ground now, so the bar steps back to nothing */
  .gf-nav.is-open .gf-nav-bar{background-color:transparent}
  .gf-nav.is-open .gf-nav-bar::after{border-bottom-color:transparent}

  .gf-nav-inner{max-width:720px;padding:16px 0}
  .gf-nav-brand-col{flex:1 0 auto}
  .gf-nav-links{display:none}
  .gf-nav-actions{width:auto;flex:1 0 auto}
  .gf-nav-actions>.gf-nav-cta{display:none}

  .gf-nav-burger{
    display:block;position:relative;width:36px;height:36px;flex:0 0 auto;
    background:none;border:0;padding:0;cursor:pointer;
  }
  .gf-nav-burger::before{content:"";position:absolute;inset:-4px}
  .gf-nav-burger-bar{
    position:absolute;inset-inline-start:8px;width:20px;height:2px;background:#fff;border-radius:1px;
    transform-origin:10px 1px;
    transition:top 500ms var(--nav-ease-menu),transform 500ms var(--nav-ease-menu),width 500ms var(--nav-ease-menu);
  }
  .gf-nav-burger-bar:nth-child(1){top:12px}
  .gf-nav-burger-bar:nth-child(2){top:22px;width:14px}
  @media (hover:hover) and (pointer:fine){.gf-nav-burger:hover .gf-nav-burger-bar:nth-child(2){width:20px}}
  .gf-nav.is-open .gf-nav-burger-bar:nth-child(1){top:17px;transform:rotate(45deg)}
  .gf-nav.is-open .gf-nav-burger-bar:nth-child(2){top:17px;width:20px;transform:rotate(-45deg)}

  /* ---- the menu ---- */
  /* display:none while closed, so a page that never opens the menu never styles or lays it out;
     nav.js adds is-mounted a frame before is-open, and takes it away once the close has played */
  .gf-menu{
    display:none;position:fixed;inset:0;z-index:0;
    visibility:hidden;pointer-events:none;
    transition:visibility 0s linear .7s;
  }
  .gf-menu.is-mounted{display:block}
  .gf-nav.is-open .gf-menu{visibility:visible;pointer-events:auto;transition-delay:0s}

  /* the sheet drops from the bar like a blind; a low accent glow keeps it from being a flat black card */
  .gf-menu-sheet{
    position:absolute;inset:0;
    background:
      radial-gradient(120% 55% at 50% 118%,rgba(140,134,255,.20),rgba(140,134,255,0) 62%),
      radial-gradient(90% 40% at 100% 0%,rgba(255,243,240,.05),rgba(255,243,240,0) 60%),
      #060609;
    transform:translate3d(0,-101%,0);
    transition:transform .62s var(--menu-ease-in) .1s;
  }
  .gf-nav.is-open .gf-menu-sheet{transform:none;transition-delay:0s}

  .gf-menu-in{
    position:relative;height:100%;overflow-y:auto;overscroll-behavior:contain;
    display:flex;flex-direction:column;
    max-width:720px;margin:0 auto;padding:96px 24px 32px;box-sizing:border-box;
  }

  .gf-menu-list{list-style:none;margin:0;padding:0}
  .gf-menu-item{overflow:hidden;border-bottom:1px solid rgba(255,255,255,.06)}
  .gf-menu-item:first-child{border-top:1px solid rgba(255,255,255,.06)}
  .gf-menu-link{
    display:flex;align-items:center;gap:18px;padding:14px 0;
    color:var(--ink);text-decoration:none;
    transform:translate3d(0,108%,0);
    transition:transform .32s cubic-bezier(.4,0,1,1),opacity .3s var(--nav-ease-state);
  }
  .gf-nav.is-open .gf-menu-link{
    transform:none;
    transition:transform .8s var(--menu-ease-out) calc(.2s + var(--i,0) * .05s),opacity .3s var(--nav-ease-state);
  }
  .gf-menu-num{flex:0 0 auto;min-width:22px;font-size:12px;line-height:1;color:rgba(255,255,255,.35);font-variant-numeric:tabular-nums;transition:color .3s var(--nav-ease-state)}
  .gf-menu-label{font-size:44px;line-height:1.08;letter-spacing:-.045em;font-weight:500;transition:transform .5s var(--menu-ease-out)}
  .gf-menu-count{margin-inline-start:auto;font-size:12px;line-height:24px;padding:0 10px;border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px var(--ink-10);color:var(--ink-65);white-space:nowrap}
  .gf-menu-link[aria-current="page"] .gf-menu-num{color:var(--accent)}
  @media (hover:hover) and (pointer:fine){
    .gf-menu-list:hover .gf-menu-link{opacity:.42}
    .gf-menu-list .gf-menu-link:hover{opacity:1}
    .gf-menu-link:hover .gf-menu-num{color:var(--accent)}
    .gf-menu-link:hover .gf-menu-label{transform:translate3d(10px,0,0)}
    [dir="rtl"] .gf-menu-link:hover .gf-menu-label{transform:translate3d(-10px,0,0)}
  }
  .gf-menu-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}

  .gf-menu-work,.gf-menu-foot{
    opacity:0;transform:translate3d(0,18px,0);
    transition:opacity .25s var(--nav-ease-state),transform .3s cubic-bezier(.4,0,1,1);
  }
  .gf-nav.is-open .gf-menu-work{opacity:1;transform:none;transition:opacity .6s var(--nav-ease-state) .45s,transform .9s var(--menu-ease-out) .45s}
  .gf-nav.is-open .gf-menu-foot{opacity:1;transform:none;transition:opacity .6s var(--nav-ease-state) .55s,transform .9s var(--menu-ease-out) .55s}

  .gf-menu-work{margin-top:32px}
  .gf-menu-work-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;line-height:20px}
  .gf-menu-kicker{color:var(--ink-65)}
  .gf-menu-all{display:inline-flex;align-items:center;gap:4px;color:var(--ink);text-decoration:none}
  [dir="rtl"] .gf-menu-go{transform:scaleX(-1)}
  .gf-menu-strip{
    display:flex;gap:12px;margin:14px -24px 0;padding:0 24px 6px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:24px;
    scrollbar-width:none;overscroll-behavior-x:contain;
  }
  .gf-menu-strip::-webkit-scrollbar{display:none}
  .gf-menu-thumb{flex:0 0 min(46%,220px);scroll-snap-align:start;color:var(--ink-80);text-decoration:none;font-size:13px;line-height:18px}
  .gf-menu-thumb picture{display:block;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
  .gf-menu-thumb img{display:block;width:100%;height:auto;aspect-ratio:400 / 210;object-fit:cover;transition:transform .6s var(--menu-ease-out)}
  .gf-menu-thumb-name{display:block;margin-top:8px}
  @media (hover:hover) and (pointer:fine){.gf-menu-thumb:hover img{transform:scale(1.04)}}

  .gf-menu-foot{margin-top:auto;padding-top:32px;display:flex;flex-direction:column;gap:18px}
  .gf-menu-cta{
    display:flex;align-items:center;justify-content:center;height:52px;padding:0 24px;border-radius:var(--radius-pill);
    background:var(--ink);color:#0b0b0e;font-size:15px;font-weight:500;letter-spacing:-.2px;text-decoration:none;text-align:center;
    transition:background-color .2s var(--nav-ease-pill),transform .2s var(--nav-ease-pill);
  }
  @media (hover:hover) and (pointer:fine){.gf-menu-cta:hover{background:#fff}}
  .gf-menu-cta:active{transform:scale(.98)}
  .gf-menu-reach{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 18px;margin:0;font-size:13px;line-height:20px;color:rgba(255,255,255,.45)}
  .gf-menu-reach a{color:var(--ink-80);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:4px}

  /* the page behind does not scroll while the menu is open */
  html.gf-menu-open,html.gf-menu-open body{overflow:hidden}
}

@media (max-width:1023.98px) and (max-height:700px){
  .gf-menu-in{padding-top:84px}
  .gf-menu-label{font-size:34px}
  .gf-menu-link{padding:10px 0}
}

@media (prefers-reduced-motion:reduce){
  .gf-nav-row::before,.gf-nav-bar,.gf-nav-bar::after,.gf-nav-cta,.gf-nav-link,.gf-nav-burger-bar,
  .gf-menu,.gf-menu-sheet,.gf-menu-link,.gf-menu-work,.gf-menu-foot,.gf-menu-label{transition-duration:1ms!important;transition-delay:0s!important}
  .gf-nav-actions > .gf-nav-cta{transform:none;filter:none;transition:opacity 1ms linear,visibility 0s linear 1ms}
}