/*
 * chrome.css — the nav bar and footer. Shared by every page.
 */

/* ------------------------------------------------------------------ nav */

/*
 * A floating island: the bar itself is a transparent, sticky, full-width track,
 * and .site-nav__links is the visible chip centred on it. The track still takes
 * --nav-h of flow, so nothing has to be pushed out from under it and anchors
 * land where they should.
 *
 * No mark. The landing page already carries a wordmark the height of a doorway,
 * and the inner pages carry the eye in their headline.
 *
 * The links are set in the body face, not the display face. Alte Haas Grotesk
 * is a display cut — bold, uppercase, and tracked out at 11px it reads as
 * clumsy rather than quiet. Neue Montreal Medium in sentence case is the voice
 * the rest of the site reads in.
 */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--nav-h);
  padding: 0 var(--pad-hero);
  pointer-events: none;
}

.site-nav__links {
  --nav-gap: clamp(0.9rem, 2.4vw, 2.25rem);

  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  max-width: 100%;
  margin: 0;
  padding: 0.5rem clamp(0.6rem, 1.1vw, 0.9rem);
  list-style: none;
  background: var(--paper);
  border: var(--rule);
  pointer-events: auto;
}

/*
 * The eye slides into the island once the hero's wordmark has scrolled away —
 * nav-mark.js adds .has-mark. The island widens to fit it rather than the mark
 * overlapping the links, so the whole chip grows and the links slide right.
 *
 * The collapsed state is a zero max-width with the margin pulled in, not
 * display:none, because a hidden box can't transition. Everything animates on
 * the same eased curve so the widen and the pop read as one gesture.
 */
.site-nav__mark {
  display: flex;
  align-items: center;
  max-width: 0;
  /* Collapsed: cancel the flex gap entirely so the chip closes flush. */
  margin-right: calc(-1 * var(--nav-gap));
  opacity: 0;
  overflow: hidden;
  transform: scale(0.4);
  transition:
    max-width 0.42s var(--ease-out-quint),
    margin-right 0.42s var(--ease-out-quint),
    transform 0.42s var(--ease-back),
    opacity 0.24s ease;
}

/*
 * max-width must clear .site-nav__eye's width, or the reveal clips the eye.
 * The negative margin claws back half the flex gap: the mark is a sibling of
 * the links but not one of them, and the full word-spacing gap made it look
 * detached from the group.
 */
.site-nav.has-mark .site-nav__mark {
  max-width: var(--nav-eye);
  margin-right: calc(-0.5 * var(--nav-gap));
  opacity: 1;
  transform: scale(1);
}

.site-nav__mark-link {
  display: flex;
  align-items: center;
}

.site-nav__eye {
  display: block;
  width: var(--nav-eye);
  height: var(--nav-eye);
  overflow: hidden;
}

/*
 * lottie-web sizes its own SVG from the composition; force it to the box. The
 * composition has a wide transparent margin, so the eye only fills about 40% of
 * its own artboard — scale it up inside the box rather than growing the box,
 * which would just add empty space to the island.
 *
 * The scale is unitless on purpose: the SVG is 100% of a box measured in rem, so
 * the ink tracks the root font size and nothing here needs a pixel value.
 */
.site-nav__eye svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  transform: scale(2.1);
  transform-origin: 50% 50%;
}

.site-nav__link {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--size-nav);
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

/* Underline wipes in from the left on hover and out to the right on leave. */
.site-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3em;
  height: var(--rule-width);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.28s var(--ease-out-quint);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.site-nav__link:focus-visible {
  outline: var(--rule);
  outline-offset: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__link::after,
  .site-nav__mark {
    transition: none;
  }
}

/* --------------------------------------------------------------- footer */

.site-footer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 5px 0;
}

.site-footer__note {
  font-size: var(--size-footer);
  font-weight: 400;
}