/* Marketing navigation.

   At the top the header is a transparent bar across the page. The first scroll
   turns it into a full-width glass bar with straight edges and a smaller lockup.
   One highlight slides between the primary links, following
   the pointer and resting on the chapter in view (`aria-current`, set by
   js/landing.js). On a phone, opening the menu materialises the same bar
   with a matching card beneath it.

   Every state is a swap of the --nav-* tokens on .landing-nav; the rules that
   read them never change. Without JavaScript the header is a solid navy bar
   and the menu sits in the document flow: html.lp-nav-adaptive and
   html.lp-menu-ready, added by js/landing.js, gate everything else. */
.landing-nav {
  --nav-ink: var(--lp-ink-strong);
  --nav-ink-mute: color-mix(in srgb, var(--lp-ink) 82%, transparent);
  --nav-line: var(--lp-line);
  --nav-button-ink: var(--lp-hull);
  --nav-radius-pill: 999px;

  /* The surface: transparent at the top, glass after the first scroll. */
  --nav-surface: transparent;
  --nav-surface-line: transparent;
  --nav-surface-blur: none;
  --nav-surface-shadow: none;
  --nav-lockup-width: 158px;

  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--lp-hull);
  color: var(--nav-ink);
}

/* The header keeps its full width and height in every state, so the hero
   offset and the pinned scenes never have to follow it. */
.lp-nav-adaptive .landing-nav {
  background: transparent;
}

.lp-nav-adaptive .landing-nav.is-scrolled,
.lp-menu-ready .landing-nav:has(.landing-nav__menu.is-open) {
  --nav-surface: color-mix(in srgb, var(--lp-panel-sunken) 76%, transparent);
  --nav-surface-line: var(--lp-line);
  --nav-surface-blur: blur(24px) saturate(160%);
  --nav-surface-shadow: 0 12px 28px -20px rgb(0 0 0 / 60%);
  --nav-lockup-width: 136px;
}

.landing-nav__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 1rem;
  width: 100%;
  max-width: none;
  min-height: var(--lp-nav-height);
  padding-inline: var(--lp-gutter);
  border-bottom: 1px solid var(--nav-surface-line);
  background: var(--nav-surface);
  box-shadow: var(--nav-surface-shadow);
  backdrop-filter: var(--nav-surface-blur);
  transition:
    border-color var(--lp-dur-chrome) var(--lp-ease-enter),
    background-color var(--lp-dur-chrome) var(--lp-ease-enter),
    box-shadow var(--lp-dur-chrome) var(--lp-ease-enter),
    backdrop-filter var(--lp-dur-chrome) var(--lp-ease-enter);
}

/* Brand */

.landing-nav__brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 1rem;
  min-height: 2.75rem;
}

.landing-nav__lockup {
  display: block;
  width: var(--nav-lockup-width);
  aspect-ratio: 840 / 160;
  background-color: var(--nav-ink);
  mask: url("../../../brand/svg/lockup-white.svg") left center / contain no-repeat;
  transition: width var(--lp-dur-chrome) var(--lp-ease-enter);
}

.landing-nav__byline {
  display: none;
  padding-left: 1rem;
  border-left: 1px solid var(--nav-line);
  color: var(--nav-ink-mute);
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .14em;
  white-space: nowrap;
}

/* Menu: primary links and actions. In flow until js/landing.js takes over. */

.landing-nav__menu {
  display: flex;
  grid-column: 1 / -1;
  flex-direction: column;
  gap: .75rem;
  padding-block: .5rem 1rem;
}

.landing-nav__links {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .125rem;
}

.landing-nav__highlight {
  display: none;
}

.landing-nav__links a,
.landing-nav__login {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--nav-ink-mute);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: color 180ms ease;
}

.landing-nav__links a {
  padding: .5rem .875rem;
  border-radius: var(--nav-radius-pill);
}

.landing-nav__login {
  padding: .5rem .75rem;
  border-radius: var(--nav-radius-pill);
}

.landing-nav__links a:hover,
.landing-nav__links a[aria-current],
.landing-nav__login:hover {
  color: var(--nav-ink);
}

.landing-nav__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.landing-nav__contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 2.375rem;
  padding: .5rem 1rem;
  border-radius: var(--nav-radius-pill);
  background: var(--nav-ink);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.landing .landing-nav__contact {
  color: var(--nav-button-ink);
}

.landing-nav__contact i {
  font-size: .6875rem;
  transition: transform 180ms ease;
}

.landing-nav__contact:hover {
  background: color-mix(in srgb, var(--nav-ink) 90%, var(--lp-cyan));
  box-shadow: 0 8px 20px -10px rgb(0 0 0 / 55%);
}

.landing-nav__contact:hover i {
  transform: translateX(3px);
}

/* Phone menu toggle: hidden until js/landing.js can open something. */

.landing-nav .landing-nav__toggle {
  display: none;
  align-items: center;
  gap: .625rem;
  min-height: 2.375rem;
  padding: .5rem .875rem;
  border: 1px solid var(--nav-line);
  border-radius: var(--nav-radius-pill);
  background: rgb(255 255 255 / 5%);
  color: var(--nav-ink);
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.landing-nav__toggle:hover {
  background: rgb(255 255 255 / 10%);
  border-color: var(--lp-line-strong);
}

.landing-nav__toggle-icon {
  position: relative;
  width: 1rem;
  height: 1rem;
}

.landing-nav__toggle-icon::before,
.landing-nav__toggle-icon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(50% - 1px);
  height: 1.5px;
  border-radius: 1px;
  background: currentcolor;
  transform: translateY(-3px);
  transition: transform 180ms ease;
}

.landing-nav__toggle-icon::after {
  transform: translateY(3px);
}

:where(.landing-nav__toggle[aria-expanded="true"]) .landing-nav__toggle-icon::before {
  transform: rotate(45deg);
}

:where(.landing-nav__toggle[aria-expanded="true"]) .landing-nav__toggle-icon::after {
  transform: rotate(-45deg);
}

.landing-nav :focus-visible {
  outline: 2px solid var(--nav-ink);
  outline-offset: 3px;
}

@keyframes landing-nav-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (width < 56rem) {
  .lp-menu-ready .landing-nav__toggle {
    display: inline-flex;
  }

  /* An open menu covers the page, so the bar and the card beneath it drop the
     scrolled glass for a solid surface: the links read against the menu, never
     against whatever scrolls behind it. Nothing shows through, so the blur has
     nothing left to soften and the phone is spared the layer. */
  .lp-menu-ready .landing-nav:has(.landing-nav__menu.is-open) {
    --nav-surface: var(--lp-panel-sunken);
    --nav-surface-blur: none;
    --nav-surface-shadow: 0 18px 36px -18px rgb(0 0 0 / 70%);
  }

  /* The menu joins the full-width bar and uses the same glass. */
  .lp-menu-ready .landing-nav__menu {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    display: none;
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .75rem;
    border-bottom: 1px solid var(--nav-surface-line);
    background: var(--nav-surface);
    box-shadow: var(--nav-surface-shadow);
    backdrop-filter: var(--nav-surface-blur);
  }

  .lp-menu-ready .landing-nav__menu.is-open {
    display: flex;
  }

  .landing-nav__links a {
    min-height: 3rem;
    padding: .625rem .875rem;
    border-radius: var(--lp-radius-md);
    font-size: 1.0625rem;
  }

  .landing-nav__links a[aria-current] {
    background: rgb(255 255 255 / 6%);
  }

  /* Each row of the card rises a beat after the one above it. */
  .landing-nav__links a:nth-of-type(2) {
    animation-delay: 40ms;
  }

  .landing-nav__links a:nth-of-type(3) {
    animation-delay: 80ms;
  }

  .landing-nav__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    padding-top: .75rem;
    border-top: 1px solid var(--nav-line);
    animation-delay: 120ms;
  }

  .landing-nav__login {
    justify-content: center;
    min-height: 2.75rem;
    border: 1px solid var(--nav-line);
    background: rgb(255 255 255 / 4%);
    color: var(--nav-ink);
  }

  .landing-nav__login:hover {
    background: rgb(255 255 255 / 9%);
  }

  .landing-nav__contact {
    min-height: 2.75rem;
    font-size: .875rem;
  }

  .lp-menu-ready .landing-nav__menu.is-open .landing-nav__links a,
  .lp-menu-ready .landing-nav__menu.is-open .landing-nav__actions {
    animation: landing-nav-rise var(--lp-dur-quick) var(--lp-ease-enter) both;
  }
}

@media (width >= 56rem) {
  .landing-nav__inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .landing-nav__menu {
    display: contents;
  }

  .landing-nav__links {
    grid-column: 2;
    flex-direction: row;
    gap: .125rem;
  }

  /* One pill behind the links. js/landing.js places it under the pointer, or
     under the chapter in view when nothing is pointed at; while hidden it
     jumps to its next link instead of sliding in from the edge. */
  .landing-nav__highlight {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: var(--lp-nav-highlight-w, 0);
    height: 2.25rem;
    border-radius: var(--nav-radius-pill);
    background: rgb(255 255 255 / 8%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
    opacity: 0;
    transform: translate(var(--lp-nav-highlight-x, 0), -50%);
    pointer-events: none;
    transition:
      transform var(--lp-dur-quick) var(--lp-ease-emphasis),
      width var(--lp-dur-quick) var(--lp-ease-emphasis),
      opacity 200ms ease;
  }

  .landing-nav__links:not(.has-highlight) .landing-nav__highlight {
    transition-property: opacity;
  }

  .landing-nav__links.has-highlight .landing-nav__highlight {
    opacity: 1;
  }

  .landing-nav__actions {
    grid-column: 3;
    justify-self: end;
  }
}

@media (width >= 75rem) {
  .landing-nav__byline {
    display: block;
  }
}