/* Mobile navigation: a staggered menu panel.
   Loaded after playground.css so it can restate the .topnav geometry that the
   narrow-screen dropdown rules there would otherwise win. The prelayers, close
   button and item numbers are created by site.js on every page, so they are
   hidden by default and only revealed inside the mobile breakpoint below.

   The motion follows the React Bits StaggeredMenu: two colour panels sweep in
   first, the panel lands behind them, then the labels rise in sequence. Ported
   to plain CSS transitions here because this site ships no framework and no
   build step, so GSAP and React are not available. */

.sm-prelayers, .sm-close, .sm-num { display: none; }
.nav-scrim { display: none; }

@media (max-width: 1000px) {
  :root { --sm-w: min(420px, 86vw); }

  /* ---- Toggle: bars rotate into the cross, as in the reference ---- */
  html .nav-toggle svg.i { width: 22px; height: 22px; transition: transform 800ms cubic-bezier(.16, 1, .3, 1); }
  html .topbar.nav-open .nav-toggle svg.i { transform: rotate(225deg); }

  /* ---- Colour panels that arrive before the menu ---- */
  html .sm-prelayers {
    display: block;
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 58;
    width: var(--sm-w);
    pointer-events: none;
  }
  html .sm-prelayer {
    position: absolute;
    inset: 0;
    transform: translateX(100%);
    /* Leaving: quick and unstaggered, so the panel never trails behind. */
    transition: transform 320ms cubic-bezier(.55, .085, .68, .53);
  }
  html .sm-prelayer:nth-child(1) { background: var(--coral); }
  html .sm-prelayer:nth-child(2) { background: var(--blue); }
  html .topbar.nav-open .sm-prelayer {
    transform: translateX(0);
    transition: transform 500ms cubic-bezier(.16, 1, .3, 1);
  }
  html .topbar.nav-open .sm-prelayer:nth-child(2) { transition-delay: 70ms; }

  /* ---- The panel itself ---- */
  html.js .topnav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: var(--sm-w);
    max-height: none;
    padding: 18px 20px 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-left: 3px solid var(--ink);
    background: var(--paper);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 320ms cubic-bezier(.55, .085, .68, .53), visibility 320ms linear;
  }
  html.js .topbar.nav-open .topnav {
    display: flex;
    grid-template-columns: none;
    max-height: none;
    transform: translateX(0);
    visibility: visible;
    transition: transform 650ms cubic-bezier(.16, 1, .3, 1) 160ms, visibility 0s;
  }

  /* .topbar is a z-index:1 stacking context and the hero section is also
     z-index:1 but later in the DOM, so it would paint over the panel. */
  html.js .topbar.nav-open { z-index: 100; }

  /* ---- Close control ---- */
  html .sm-close {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-end;
    min-height: 44px;
    margin-bottom: 14px;
    padding: 0 14px;
    border: 3px solid var(--ink);
    background: var(--yellow);
    color: var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    font: 700 .72rem/1 var(--font-family-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
  }
  html .sm-close svg.i { width: 16px; height: 16px; }
  html .sm-close:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

  /* ---- Destinations: large, numbered, rising in sequence ---- */
  html.js .topbar.nav-open .topnav > a:not(.btn),
  html.js .topbar.nav-open .topnav .btn {
    width: 100%;
    min-height: 56px;
    justify-content: flex-start;
  }
  html.js .topnav > a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 6px;
    border: 0;
    border-bottom: 2px solid var(--ink);
    background: none;
    box-shadow: none;
    color: var(--ink);
    font-family: var(--font-family-display);
    font-size: clamp(1.6rem, 8vw, 2.3rem);
    line-height: 1.1;
    text-transform: uppercase;
    /* Start below the fold of their own row, tilted, then settle. */
    transform: translateY(140%) rotate(10deg);
    opacity: 0;
    transition: transform 300ms cubic-bezier(.55, .085, .68, .53), opacity 200ms linear;
  }
  html.js .topbar.nav-open .topnav > a {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    transition: transform 700ms cubic-bezier(.16, 1, .3, 1) calc(340ms + var(--i, 0) * 100ms),
                opacity 400ms linear calc(340ms + var(--i, 0) * 100ms);
  }
  html .sm-num {
    display: inline-block;
    flex: 0 0 auto;
    min-width: 2.4ch;
    /* Sit level with the cap height of the label rather than its baseline,
       which left the numerals hanging low against the much larger type. */
    align-self: flex-start;
    margin-top: .5em;
    color: var(--coral);
    font-family: var(--font-family-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
  }

  /* The Join call to action keeps its button treatment. */
  html.js .topbar.nav-open .topnav > a.btn,
  html.js .topnav > a.btn {
    margin-top: 18px;
    border: 3px solid var(--ink);
    background: var(--coral);
    box-shadow: 5px 5px 0 var(--ink);
    font-size: .95rem;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
  }
  html.js .topnav > a.btn .sm-num { display: none; }

  /* ---- Backdrop: under the panel, over the page ---- */
  html .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgb(0 0 0 / 45%);
  }
  html .nav-scrim[hidden] { display: none; }

  /* Hold the page still while the menu is open. */
  html.nav-locked, html.nav-locked body { overflow: hidden; }
}

@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
  html.js .topnav,
  html.js .topbar.nav-open .topnav,
  html.js .topnav > a,
  html.js .topbar.nav-open .topnav > a,
  html .sm-prelayer,
  html .topbar.nav-open .sm-prelayer,
  html .nav-toggle svg.i { transition-duration: 1ms; transition-delay: 0s; }
}