/* Nav — Figma 24:603, 1280 wide, 24px padding, left name + right links */

.nav {
  /* Figma draws the nav over the frame at y=0, so it must not take flow height */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Equal 24px inset on the top and both sides, inside a 1600 max width */
  padding: var(--space-24);
  max-width: 1600px;
  margin: 0 auto;
}

.nav-left { width: 120px; }

.nav-right {
  display: flex;
  gap: var(--space-6);
  align-items: center;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-6);
  backdrop-filter: blur(var(--blur-8));
  -webkit-backdrop-filter: blur(var(--blur-8));
  font-family: var(--font-body);
  font-weight: var(--weight-book);
  font-size: var(--body-14-size);
  line-height: var(--body-14-line);
  color: var(--nav-default);
  white-space: nowrap;
}

.nav-left .nav-item { width: 100%; }

/* State=Hover (24:506) on every nav button, site-wide.
   Two exclusions, both from Flora:
   - never on the button that is already Active, which the page marks with
     aria-current; the two states would fight and Active is the stronger signal.

   The name button on the home does carry it, on request. It is the one button
   that leads nowhere — its href is the page you are on — so it was left out at
   first; answering the pointer anyway is the more consistent read, since every
   other button in the bar does. */
.nav-item:not([aria-current="page"]):hover,
.nav-item:not([aria-current="page"]):focus-visible {
  background: var(--surface-nav-bg-hover);
  color: var(--nav-hover);
  /* Rounder on hover, the way their menu buttons do it. Theirs go from .5rem to
     .75rem on a 34px button — 24% of its height to 35%. These start tighter at
     6 on 32, so reaching the same roundness takes 12 rather than their 1.5x,
     which lands on 37%. Read as a proportion it is their move, not a bigger
     one, and 12 is already a radius this site uses.

     A full pill was tried and put back: at 32 tall these buttons are wide and
     short, and rounding them off entirely turned them into lozenges. */
  border-radius: var(--radius-12);
}

/* ── The gauge ───────────────────────────────────────────────────────────

   Every button in the bar fills left to right, and they all fill the same way:
   the section anchors on a project page, the name, About, Approach, Contact.
   One gesture, described once here, with each family supplying only its own
   two colours.

   Two layers rather than one over the other, and that is the whole trick. The
   hover colour grows from the left while the resting colour retreats to the
   right, so at any moment one covers exactly what the other has given up and
   they never overlap. An overlay could not have done it: these buttons go
   DARKER but LESS opaque on hover — rgba(203,203,203,.6) to rgba(139,139,139,.4)
   — and nothing painted on top of a colour can make it more transparent. Here
   each state keeps its exact value, mid-fill included.

   `background-image` paints above `background-color` and below the text, so the
   label needs no stacking of its own and the fill can never cover it. */
.nav-item,
.nav-anchor {
  background-color: transparent;
  background-image:
    linear-gradient(var(--gauge-on), var(--gauge-on)),
    linear-gradient(var(--gauge-off), var(--gauge-off));
  background-repeat: no-repeat;
  background-position: left top, right top;
  background-size: 0% 100%, 100% 100%;
}

.nav-item {
  --gauge-off: var(--surface-nav-bg);
  --gauge-on: var(--surface-nav-bg-hover);
}

.nav-item:not([aria-current="page"]):hover,
.nav-item:not([aria-current="page"]):focus-visible {
  background-size: 100% 100%, 0% 100%;
}

/* Quick and eased-out, so it reads as filling rather than fading. The corners
   follow a beat later rather than arriving with it — that lag is
   aparelho.studio's, kept in proportion: theirs runs the colour over 400ms and
   the radius over 500, and this keeps the same 1.25 between them. */
.nav-item {
  transition: background-size 320ms cubic-bezier(0.16, 1, 0.3, 1),
              color 200ms ease,
              border-radius 250ms cubic-bezier(0.45, 0, 0.55, 1);
}

@media (prefers-reduced-motion: reduce) {
  .nav-item { transition: none; }
}


/* ── What the burger opens ───────────────────────────────────────────────

   Fixed and a child of the body, not of the bar: the bar clips its own
   contents — it has to, both centres slide through it — so a panel inside it
   would be cut off at the edge.

   It sits under the bar and against the same 16 the bar is inset by, so its
   buttons line up with the burger that opened it. */

.nav-menu {
  position: fixed;
  z-index: 30;
  /* Both replaced from the burger's own box the moment it opens; these are only
     what it looks like for the frame before that happens. */
  top: 64px;
  right: var(--space-16);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-6);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-menu.is-open { opacity: 1; transform: translateY(0); }

.nav-menu[hidden] { display: none; }

/* A phone is the only place this exists: everywhere else those links are in
   the bar, where they belong. */
@media (min-width: 701px) {
  .nav-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu { transition: none; }
}