/**
 * Product nav — Figma 9229:13199 (PC) / 9229:13170 (mobile).
 * Instrument 20 Regular · tracking 0 · gap 40 · optical center aligned.
 * Nav text must never clip — overflow visible, room for blur bloom.
 */

.if-nav {
  --nav-ink: var(--fg, #16140f);
  --nav-pad-x: 54px;
  --nav-pad-right: 80px;
  --nav-gap-h: 40px;
  --nav-gap-v: 32px;
  --nav-size: 20px;
  --nav-bar-h: 72px;
  --nav-scrim-h: 128px;
  --nav-logo-w: 200px;
  /* 43 / 200 — height follows width so the lockup scales, never distorts. */
  --nav-logo-h: calc(var(--nav-logo-w) * 0.215);

  /**
   * The lockup is outlined vector, so its wordmark cannot inherit font-size.
   * Measured: inside a 200px-wide lockup the wordmark sets at 24.67px
   * (Instrument Sans "India Framed" = 601.6px at 100px → 148.4 / 601.6 × 100).
   * Locking the page title to that ratio keeps wordmark and title on one
   * type scale at every lockup size. Do not hardcode --nav-now.
   */
  --nav-word-ratio: 0.1234;
  --nav-lockup-basis: var(--nav-logo-w);
  --nav-now: calc(var(--nav-lockup-basis) * var(--nav-word-ratio));

  /**
   * Burger = the mark's landscape frame. The `wide` rect is 30×20 at stroke
   * 2 (Figma 9596:83), and three 2px bars on a 9px pitch fill that box
   * exactly: 0, 9, 18, + 2 = 20. So the burger is the same object as the
   * icon, not a separate one. Ratios of the lockup keep it that way.
   */
  --nav-burger-w: calc(var(--nav-logo-w) * 0.15);
  --nav-burger-h: calc(var(--nav-logo-w) * 0.1);
  --nav-burger-bar: 2px;
  --nav-burger-pitch: calc(
    (var(--nav-burger-h) - var(--nav-burger-bar)) / 2
  );

  /**
   * One motion system for the fold, so icon, title and menu read as a single
   * gesture. In is slower and eases out; out is quicker and eases in — the
   * asymmetry is what makes a menu feel like it settles and then leaves,
   * rather than pumping.
   */
  --nav-spring: cubic-bezier(0.22, 1.16, 0.36, 1);
  --nav-spring-ms: 460ms;
  --nav-ease-in: cubic-bezier(0.16, 0.84, 0.31, 1);
  --nav-ease-out: cubic-bezier(0.5, 0, 0.75, 0);
  --nav-in-ms: 520ms;
  --nav-out-ms: 300ms;
  --nav-lead: 120ms;
  --nav-stagger-in: 62ms;
  --nav-stagger-out: 34ms;
  /* How far the items fall from, and how far out of focus they start.
     Tunable in /lab/nav-motion.html. */
  --nav-travel: 26px;
  --nav-item-blur: 6px;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  color: var(--nav-ink);
  pointer-events: none;
  overflow: visible;
}

.if-nav__scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-scrim-h);
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--bg) 55%, transparent) 48%,
    transparent 100%
  );
}

.if-nav__scrim::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 70%;
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
}

.if-nav__bar {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--nav-bar-h);
  padding: 18px var(--nav-pad-right) 18px var(--nav-pad-x);
  overflow: visible;
}

.if-nav__brandwrap {
  display: inline-flex;
  align-items: center;
  /* Figma nav PC 9229:13199 — credit sits at x275 against a lockup ending
     at x254, so the gap is 21, not 12. */
  gap: 21px;
  flex-shrink: 0;
  color: inherit;
  text-decoration: none;
  overflow: visible;
}

.if-nav__brand,
.if-lockup {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: var(--nav-logo-w);
  height: var(--nav-logo-h);
  color: inherit;
  line-height: 0;
  overflow: visible;
}

.if-lockup__svg,
.if-lockup__svg svg {
  display: block;
  width: var(--nav-logo-w);
  height: var(--nav-logo-h);
  overflow: visible;
}

.if-nav__brand.if-nav__optical {
  filter: blur(0) !important;
  opacity: 1 !important;
}

/* The close X is part of the lockup's SVG, so it must be hidden at EVERY
   width by default — not only where the fold exists. */
.if-mark__x {
  opacity: 0;
}

.if-nav__credit {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: visible;
  opacity: 0.72;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

/* The credit is an introduction, not chrome — it retires once you're reading. */
.if-nav.is-scrolled .if-nav__credit {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

.if-nav__now {
  display: none;
  /* Baseline offset lives on `top`, not `transform` — the fold owns the
     transform, and the two must not fight. Set from JS after fonts load. */
  position: relative;
  top: var(--nav-now-baseline, 0px);
  margin: 0;
  padding: 4px 0;
  color: inherit;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--nav-now);
  line-height: 1.2;
  letter-spacing: 0;
  overflow: visible;
}

/**
 * Burger — the mark's landscape frame: 30 × 20, three 2px bars on a 9px
 * pitch (Figma 9596:83 `wide`). The middle bar is the hinge: on open the
 * outer two swing onto its line at ±45° and shorten, and the middle drops.
 */
.if-nav__burger {
  display: none;
  position: relative;
  margin-left: auto;
  width: var(--nav-burger-w);
  height: var(--nav-burger-h);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex: 0 0 auto;
}

.if-nav__burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--nav-burger-bar);
  background: currentColor;
  transform-origin: 50% 50%;
  transition:
    transform var(--nav-spring-ms) var(--nav-spring),
    opacity 160ms ease;
}

.if-nav__burger span:nth-child(1) { top: 0; }
.if-nav__burger span:nth-child(2) { top: var(--nav-burger-pitch); }
.if-nav__burger span:nth-child(3) { top: calc(var(--nav-burger-pitch) * 2); }

/* X state — arms 24 of 30 = scaleX(0.8), swung onto the middle line. */
.if-nav.is-open .if-nav__burger span:nth-child(1) {
  transform: translateY(var(--nav-burger-pitch)) rotate(45deg) scaleX(0.8);
}

.if-nav.is-open .if-nav__burger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}

.if-nav.is-open .if-nav__burger span:nth-child(3) {
  transform: translateY(calc(var(--nav-burger-pitch) * -1)) rotate(-45deg) scaleX(0.8);
}

.if-nav__burger:focus-visible {
  outline: 2px solid var(--accent, #c45c3e);
  outline-offset: 4px;
}

.if-nav__menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--nav-gap-h);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  overflow: visible;
}

.if-nav__link {
  display: inline-block;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--nav-size);
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  padding: 8px 2px;
  overflow: visible;
  transform: none;
}

.if-nav__link:focus-visible {
  outline: 2px solid var(--accent, #c45c3e);
  outline-offset: 4px;
}

@media (max-width: 899px) {
  .if-nav {
    --nav-pad-x: 30px;
    --nav-pad-right: 30px;
  }

  .if-nav__bar {
    flex-wrap: wrap;
    gap: 0 0.85rem;
    padding: 16px var(--nav-pad-x);
  }

  /* Tablet: the full wordmark holds the left; the page title moves to the
     right and sits beside the burger, on the wordmark's own type scale. */
  /**
   * The title is the only elastic thing in the bar. Its FONT never changes —
   * only the box it occupies — so the burger can never be pushed onto a
   * second row by a long section name (383px was needed for "Journeys" at
   * 375, which dropped the burger under the fold and hid the close X).
   */
  .if-nav__now {
    display: block;
    margin-left: auto;
    /* The fold scales the title into the list; scale about the top-left so
       the travel maths has a fixed corner to reason from. */
    transform-origin: 0 0;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .if-nav__burger {
    display: flex;
    margin-left: 0;
  }

  /**
   * The fold animates NOTHING that costs layout.
   *
   * It used to transition height and padding, which relayouts every frame
   * with five blurred text nodes inside — that was the jank. The menu is
   * out of flow now and always laid out at its natural size; only the items
   * move, on transform / opacity / filter, which the compositor can do.
   *
   * Figma nav mobile 9229:13170 — indented to the wordmark's left edge
   * (x79 against a 30 bar pad), starting 56 below the lockup.
   */
  .if-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nav-gap-v);
    margin: 0;
    padding: 56px var(--nav-pad-x) 2rem calc(var(--nav-logo-w) * 0.257);
    visibility: hidden;
    pointer-events: none;
  }

  .if-nav.is-open .if-nav__menu {
    visibility: visible;
    pointer-events: auto;
  }

  /**
   * The items arrive from above, resolving out of blur — and they leave the
   * same way, in reverse. The closed rule owns the exit delay so closing is
   * the mirror of opening rather than everything snapping back at once.
   */
  .if-nav__menu .if-nav__link {
    opacity: 0;
    transform: translateY(calc(var(--nav-travel) * -1));
    filter: blur(var(--nav-item-blur));
    transition:
      opacity var(--nav-out-ms) var(--nav-ease-out),
      transform var(--nav-out-ms) var(--nav-ease-out),
      filter var(--nav-out-ms) var(--nav-ease-out);
    transition-delay: calc((var(--i-last, 4) - var(--i, 0)) * var(--nav-stagger-out));
  }

  .if-nav.is-open .if-nav__menu .if-nav__link {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    transition:
      opacity var(--nav-in-ms) var(--nav-ease-in),
      transform var(--nav-in-ms) var(--nav-ease-in),
      filter var(--nav-in-ms) var(--nav-ease-in);
    transition-delay: calc(var(--nav-lead) + var(--i, 0) * var(--nav-stagger-in));
  }

  /* Full-bleed ground the moment it opens; the colour fades, not the box. */
  .if-nav.is-open {
    bottom: 0;
  }


  /**
   * Mark → X (Figma 9596:77). The two frames ARE the close icon: the
   * landscape frame flattens to a 32×6 bar at +45°, the portrait frame to
   * the same bar at −45°, and they cross on the mark's centre. The burger
   * retires while this is on, so the mark itself is the close control.
   */
  .if-nav[data-close="mark"] .if-nav__burger {
    transition: opacity 160ms ease, transform 200ms var(--nav-spring);
  }

  /* The burger leaves the way it came in — off the right edge. */
  .if-nav[data-close="mark"].is-open .if-nav__burger {
    opacity: 0;
    transform: translateX(calc(100% + var(--nav-pad-right)));
    pointer-events: none;
  }

  .if-mark__land,
  .if-mark__port,
  .if-mark__word,
  .if-mark__x {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transition:
      transform var(--nav-spring-ms) var(--nav-spring),
      opacity 220ms ease;
  }

  /* Rotation only — never scale an outline, or the stroke stops being 2. */
  .if-nav[data-close="mark"].is-open .if-mark__land {
    transform: rotate(45deg);
    opacity: 0;
  }

  .if-nav[data-close="mark"].is-open .if-mark__port {
    transform: rotate(-36deg);
    opacity: 0;
  }

  /* The credit belongs to the wordmark — it leaves with it, never after it. */
  .if-nav[data-close="mark"].is-open .if-mark__word,
  .if-nav.is-open .if-nav__credit {
    opacity: 0;
  }

  /* Both bars share a centre, so rotating each about its own middle
     crosses them exactly on the mark's centre. */
  .if-mark__x {
    opacity: 0;
  }

  .if-mark__x--a {
    transform: rotate(45deg) scale(0.82);
  }

  .if-mark__x--b {
    transform: rotate(-45deg) scale(0.82);
  }

  .if-nav[data-close="mark"].is-open .if-mark__x {
    opacity: 1;
  }

  .if-nav[data-close="mark"].is-open .if-mark__x--a {
    transform: rotate(45deg) scale(1);
  }

  .if-nav[data-close="mark"].is-open .if-mark__x--b {
    transform: rotate(-45deg) scale(1);
  }

  .if-nav[data-close="mark"].is-open .if-nav__brandwrap {
    cursor: pointer;
  }

  /* On phone the lockup is a 36×34 window that crops the wordmark away.
     The X is wider than that window, so let it out once open — the
     wordmark it was hiding has already faded. */
  .if-nav[data-close="mark"].is-open .if-nav__brand,
  .if-nav[data-close="mark"].is-open .if-lockup {
    overflow: visible;
  }

  /* Fallback option: burger morphs, mark steps aside. */
  .if-nav[data-close="burger"] .if-nav__brandwrap {
    transition:
      opacity 200ms ease,
      transform var(--nav-spring-ms) var(--nav-spring);
  }

  .if-nav[data-close="burger"].is-open .if-nav__brandwrap {
    opacity: 0;
    transform: translateX(-10px);
    pointer-events: none;
  }

  /**
   * The page title is not a second copy of the menu item — it IS that item.
   * On open it flies into its own slot in the list; the real link holds the
   * slot open, invisible but still the click target. Which slot depends on
   * the current page, so the geometry is measured, never assumed.
   */
  .if-nav__now {
    transition:
      transform var(--nav-spring-ms) var(--nav-spring),
      font-size var(--nav-spring-ms) var(--nav-spring);
    will-change: transform;
  }

  /* No font-size change on open — 19.74 → 20 is invisible but reflows the
     bar, and that reflow is a layout jump. Position only. */
  .if-nav.is-open .if-nav__now {
    pointer-events: none;
  }

  .if-nav.is-open .if-nav__link.is-slot {
    opacity: 0 !important;
    filter: none !important;
  }

  /* Fade the ground in. Pinning bottom:0 and flipping overflow on open
     resized the nav in one frame — that was the jump. The nav now grows
     with the fold, because the menu is in flow. */
  .if-nav {
    transition: background-color 240ms ease;
  }

  .if-nav.is-open {
    background: var(--bg);
  }

  .if-nav.is-open .if-nav__scrim {
    opacity: 0;
    transition: opacity 200ms ease;
  }

  body.if-nav-open .if-app,
  body.if-nav-open .if-grain {
    opacity: 0;
    transition: opacity 240ms ease;
    pointer-events: none;
  }

  .if-app,
  .if-grain {
    transition: opacity 300ms ease;
  }
}

/**
 * Stacked lockup — Figma 9596:98 (Frame 9).
 * Once the row gets tight the credit does not disappear; it drops under the
 * wordmark and left-aligns to it. Measured off the lockup origin: x 51.4,
 * y 33, size 12 at 100% line-height, on a 200-wide lockup — expressed as
 * ratios so it holds at every lockup scale.
 */
@media (max-width: 1100px) {
  .if-nav__brandwrap {
    position: relative;
    align-items: flex-start;
  }

  .if-nav__credit {
    display: block;
    position: absolute;
    left: calc(var(--nav-logo-w) * 0.257);
    top: calc(var(--nav-logo-w) * 0.165);
    /* Ratio-true down to ~167px of lockup, then floored — pure scaling puts
       this at 7.9px on a 375 phone, which is past reading. */
    font-size: max(10px, calc(var(--nav-logo-w) * 0.06));
    line-height: 1;
    white-space: nowrap;
  }
}

/**
 * The mark, wordmark and page title hold ONE size at every breakpoint —
 * 200px lockup, 24.68px title. They are never scaled down for phones and
 * the lockup is never clipped. When the row runs out of width, padding is
 * what gives, not the type.
 */
@media (max-width: 599px) {
  .if-nav {
    --nav-pad-x: 12px;
    --nav-pad-right: 12px;
  }

  /* 12 + 200 + 8 + 102 + 8 + 30 + 12 = 372 — "Journeys", the widest label,
     fits whole on a 375 phone without touching the type. */
  .if-nav__bar {
    gap: 0 8px;
  }
}

@media (min-width: 900px) {
  .if-nav.is-open .if-nav__menu {
    display: flex;
    flex-direction: row;
  }
}

@media (prefers-reduced-motion: reduce) {
  .if-nav__scrim::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .if-nav__link.if-nav__optical {
    filter: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}