/* ============================================================
   NAV — the site header, one definition for every page.

   This file is the single source of truth for the pill. It was
   pulled out of style.css so that bloom / fire-island / sarson /
   visual — which carry no stylesheet of their own and used to have
   the nav painted INTO their SVG artwork — render exactly the same
   header as index.html rather than a look-alike.

   Geometry is the Figma rect: x=425.5 y=39.5 w=589 h=38 r=19 with a
   1px #EBEBEB stroke. A stroke paints from the centre, so the
   border-box is 590x39 at 425,39. Labels are PP Neue Montreal Book
   (350) 12/12 on a 53 baseline, ink lefts 487 / 619 / 755 / 918.

   Only the Book weight is declared here: these four pages load no
   other type, and the nav is the only text they have.
   ============================================================ */
@font-face{font-family:'PP Neue Montreal';src:url('../assets/fonts/PPNeueMontreal-Book.otf') format('opentype');font-weight:350;font-style:normal;font-display:block}

.navlayer{
  position:fixed;
  left:0; top:0;
  width:100vw; height:0;
  z-index:60;
  pointer-events:none;
}
.navlayer__scale{
  position:relative;
  width:1440px; height:0;
  transform-origin:0 0;
  transform:scale(var(--k));
}

/* pill: SVG rect x=425.5 y=39.5 w=589 h=38 r=19, 1px stroke #EBEBEB */
.nav{
  position:absolute;
  left:425px; top:39px;
  width:590px; height:39px;
  /* self-sufficient: bloom / fire-island / sarson / visual load no reset
     of their own for this component to inherit */
  box-sizing:border-box;
  border:1px solid #EBEBEB;
  border-radius:19.5px;
  background:rgba(0,0,0,.01);
  pointer-events:auto;
  will-change:transform;
}
.nav a{
  position:absolute;
  top:13px;                 /* 53 − 39 − 1(border) */
  font-family:'PP Neue Montreal',Helvetica,Arial,sans-serif;
  font-weight:350;
  font-size:12px;
  line-height:12px;
  color:#000;
  white-space:nowrap;
  text-decoration:none;
  transition:color .4s cubic-bezier(.4,0,.2,1);
}
/* set per-item by the backdrop sampler when the nav is over dark pixels */
.nav a.is-on-dark{color:#fff}
.nav.is-on-dark{border-color:rgba(255,255,255,.22)}
.nav{transition:border-color .4s cubic-bezier(.4,0,.2,1)}
.nav a:nth-of-type(1){left:61px}    /* 487 − 426 */
.nav a:nth-of-type(2){left:193px}   /* 619 − 426 */
.nav a:nth-of-type(3){left:329px}   /* 755 − 426 */
.nav a:nth-of-type(4){left:492px}   /* 918 − 426 */

/* hover: roll. 15px tall so descenders ("Playground") clear the mask;
   the second copy is offset by that same 15px and animated in px. */
.nav a .roll{
  position:relative;display:block;overflow:hidden;
  height:15px;padding-right:8px;
}
.nav a .roll i{display:block;font-style:normal;will-change:transform}
.nav a .roll i:last-child{position:absolute;left:0;top:15px}


/* ------------------------------------------------------------
   The same pill on every other page.

   Nothing about the header is re-specified here — geometry, type,
   the 1px #EBEBEB hairline and the four ink positions all come from
   .nav above, so the case-study pages cannot drift from the
   homepage. This block only supplies the two things the homepage
   gets from main.js, which those pages do not load:

     · the white label colour the backdrop sampler would set
       (every case-study page is dark under the nav), and
     · the roll, as a CSS transition instead of the GSAP tween.
       15px and .5s power3.out are copied from main.js so the two
       move identically.

   --static drops the layer out of position:fixed. The homepage nav
   stays pinned because a sampler keeps it legible over whatever
   scrolls under it; on the case pages there is no sampler, and a
   white pill pinned over a light photograph disappears. So it sits
   at the artboard's 425,39 and scrolls away with the artwork —
   which is where every one of these pages already had it.
   ------------------------------------------------------------ */
.navlayer--static{ position:absolute; top:0; left:0 }
.nav--dark a{ color:#fff }
.nav--dark a .roll i{ transition:transform .5s cubic-bezier(.215,.61,.355,1) }
.nav--dark a:hover .roll i{ transform:translateY(-15px) }

@media (prefers-reduced-motion:reduce){
  .nav--dark a .roll i{ transition:none }
}

/* Below the breakpoint the artboard scale would render the pill at
   27%, so the shared nav leaves the artboard and becomes a real bar,
   the same way css/mobile.css treats the homepage's. */
@media (max-width:768px){
  /* relative, not static: these pages scale the artwork iframe up and it
     bleeds above its own box, so the bar needs a stacking context to stay
     on top of it. z-index comes from .navlayer. */
  .navlayer--static{ position:relative; width:auto; height:auto }
  .navlayer--static .navlayer__scale{ width:auto; height:auto; transform:none }
  .navlayer--static .nav{
    position:static;
    display:flex; align-items:center; justify-content:center;
    gap:22px;
    width:max-content; height:44px;
    margin:16px auto 6px;
    padding:0 20px;
    border-radius:22px;
  }
  .navlayer--static .nav a{
    position:static;
    left:auto !important; top:auto !important;
    font-size:13px; line-height:13px;
  }
  .navlayer--static .nav a .roll{ height:16px; padding-right:0 }
  .navlayer--static .nav a .roll i:last-child{ top:16px }
  .navlayer--static .nav--dark a:hover .roll i{ transform:translateY(-16px) }

  /* The case-study pages carry a fixed "Back" chip at 24,24, which lands on
     top of the bar's left end. The bar's own Home link goes to the same
     place, so the chip stands down at this width. `html body` only to
     outrank the pages' inline .back-btn rule, which is parsed after this
     file. */
  html body .back-btn{ display:none }
}