/**
 * KLYNE nav morph — full-width → floating pill on scroll
 * html.nav-morph       = all pages with this nav
 * html.nav-morph-home  = homepage scroll extras
 */

html.nav-morph {
  --nav-morph-p: 0;
  --nav-morph-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-morph-accent: #2563eb;
  --home-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html.nav-morph .nav.scrolled {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* ——— Layout: true viewport center for links ——— */
html.nav-morph .nav {
  height: auto;
  min-height: var(--nav-h);
  padding:
    calc(0.85rem - var(--nav-morph-p) * 0.15rem)
    calc(var(--container-pad) * (1 - var(--nav-morph-p)) + 1rem * var(--nav-morph-p))
    calc(0.35rem + var(--nav-morph-p) * 0.35rem);
  border-bottom: none;
  background: transparent;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

html.nav-morph .nav__inner {
  pointer-events: auto;
  width: 100%;
  max-width: calc(
    (1 - var(--nav-morph-p)) * min(var(--container), calc(100vw - 2 * var(--container-pad))) +
    var(--nav-morph-p) * min(900px, calc(100vw - 2rem))
  );
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: calc(var(--nav-morph-p) * 0.45rem) calc(var(--nav-morph-p) * 0.7rem);
  border-radius: calc(var(--nav-morph-p) * 999px);
  background: color-mix(in srgb, #0c0e14 calc(var(--nav-morph-p) * 96%), transparent);
  border: 1px solid rgba(255, 255, 255, calc(var(--nav-morph-p) * 0.09));
  box-shadow:
    0 calc(var(--nav-morph-p) * 8px) calc(var(--nav-morph-p) * 24px) rgba(0, 0, 0, calc(var(--nav-morph-p) * 0.28)),
    0 calc(var(--nav-morph-p) * 2px) calc(var(--nav-morph-p) * 6px) rgba(0, 0, 0, calc(var(--nav-morph-p) * 0.12));
  transform: translateY(calc((1 - var(--nav-morph-p)) * 2px))
    scale(calc(1 - (1 - var(--nav-morph-p)) * 0.012));
  will-change: max-width, border-radius, transform, background, box-shadow;
}

html.nav-morph .nav__brand {
  justify-self: start;
  min-width: 0;
}

html.nav-morph .nav__links {
  justify-self: center;
  gap: calc(0.35rem - var(--nav-morph-p) * 0.12rem);
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
}

html.nav-morph .nav__actions {
  justify-self: end;
}

html.nav-morph .nav__links a {
  font-size: calc(0.875rem - var(--nav-morph-p) * 0.04rem);
  font-weight: 500;
  color: color-mix(in srgb, #fff calc(72% + var(--nav-morph-p) * 8%), rgba(244, 244, 245, 0.58));
  padding: calc(0.35rem + var(--nav-morph-p) * 0.03rem) calc(0.75rem - var(--nav-morph-p) * 0.05rem);
  border-radius: calc(8px * (1 - var(--nav-morph-p)) + 999px * var(--nav-morph-p));
  background: transparent;
  transition: color 0.25s ease, background 0.25s ease;
}

html.nav-morph .nav__links a:hover {
  color: #fff;
  background: rgba(255, 255, 255, calc(0.06 + var(--nav-morph-p) * 0.04));
}

html.nav-morph .nav__links a.is-active {
  color: #fff;
  background: rgba(255, 255, 255, calc(var(--nav-morph-p) * 0.1));
  font-weight: 600;
}

html.nav-morph .nav__brand img {
  height: calc(22px - var(--nav-morph-p) * 2px);
  transition: height 0.3s var(--nav-morph-ease);
}

html.nav-morph .btn--ghost.btn--nav {
  border-color: rgba(255, 255, 255, calc(0.18 - var(--nav-morph-p) * 0.12));
  background: color-mix(
    in srgb,
    rgba(255, 255, 255, 0.1) calc(var(--nav-morph-p) * 100%),
    rgba(255, 255, 255, 0.06)
  );
  border-width: calc(1px * (1 - var(--nav-morph-p)));
  backdrop-filter: blur(calc((1 - var(--nav-morph-p)) * 12px));
}

html.nav-morph .btn--primary.btn--nav {
  background: var(--nav-morph-accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 calc(4px + var(--nav-morph-p) * 2px) calc(14px + var(--nav-morph-p) * 6px)
    rgba(37, 99, 235, calc(0.3 + var(--nav-morph-p) * 0.15));
}

html.nav-morph .btn--primary.btn--nav:hover {
  background: #1d4ed8;
}

/* ——— Scroll reveals (all nav-morph pages) ——— */
@media (prefers-reduced-motion: no-preference) {
  html.nav-morph [data-reveal] {
    opacity: 0.001;
    transform: translateY(18px);
    transition:
      opacity 0.85s var(--home-reveal-ease),
      transform 0.85s var(--home-reveal-ease);
  }

  html.nav-morph [data-reveal].in {
    opacity: 1;
    transform: none;
  }

  html.nav-morph [data-reveal-delay="1"] { transition-delay: 0.07s; }
  html.nav-morph [data-reveal-delay="2"] { transition-delay: 0.14s; }
  html.nav-morph [data-reveal-delay="3"] { transition-delay: 0.21s; }
  html.nav-morph [data-reveal-delay="4"] { transition-delay: 0.28s; }
  html.nav-morph [data-reveal-delay="5"] { transition-delay: 0.35s; }
}

html.nav-morph .scroll-stagger > *,
html.nav-morph .home-stagger > * {
  opacity: 0.001;
  transform: translateY(16px);
  transition:
    opacity 0.75s var(--home-reveal-ease),
    transform 0.75s var(--home-reveal-ease),
    border-color 0.3s ease,
    background 0.3s ease;
}

html.nav-morph .scroll-stagger.is-in > *,
html.nav-morph .home-stagger.is-in > * {
  opacity: 1;
  transform: none;
}

html.nav-morph .scroll-stagger.is-in > *:nth-child(1),
html.nav-morph .home-stagger.is-in > *:nth-child(1) { transition-delay: 0.04s; }
html.nav-morph .scroll-stagger.is-in > *:nth-child(2),
html.nav-morph .home-stagger.is-in > *:nth-child(2) { transition-delay: 0.08s; }
html.nav-morph .scroll-stagger.is-in > *:nth-child(3),
html.nav-morph .home-stagger.is-in > *:nth-child(3) { transition-delay: 0.12s; }
html.nav-morph .scroll-stagger.is-in > *:nth-child(4),
html.nav-morph .home-stagger.is-in > *:nth-child(4) { transition-delay: 0.16s; }
html.nav-morph .scroll-stagger.is-in > *:nth-child(5),
html.nav-morph .home-stagger.is-in > *:nth-child(5) { transition-delay: 0.2s; }
html.nav-morph .scroll-stagger.is-in > *:nth-child(6),
html.nav-morph .home-stagger.is-in > *:nth-child(6) { transition-delay: 0.24s; }
html.nav-morph .scroll-stagger.is-in > *:nth-child(n + 7),
html.nav-morph .home-stagger.is-in > *:nth-child(n + 7) { transition-delay: 0.28s; }

/* Hero parallax */
html.nav-morph .dist-hero__visual,
html.nav-morph .page-hero__media {
  transition: transform 0.15s linear;
  transform: translateY(calc(var(--hero-shift, 0) * 1px));
}

html.nav-morph-home .trust__panel {
  transition: transform 0.6s var(--home-reveal-ease);
  transform: translateY(calc(var(--trust-shift, 0) * 1px));
}

/* Card / tile hover */
html.nav-morph .p-card,
html.nav-morph .cap,
html.nav-morph .platform-card,
html.nav-morph .dist-process__item {
  transition:
    border-color 0.35s ease,
    background 0.35s ease,
    transform 0.4s var(--home-reveal-ease),
    opacity 0.75s var(--home-reveal-ease);
}

html.nav-morph .scroll-stagger.is-in .p-card:hover,
html.nav-morph .scroll-stagger.is-in .platform-card:hover {
  transform: translateY(-3px);
}

html.nav-morph .scroll-stagger.is-in .cap:hover {
  transform: translateY(-4px);
}

html.nav-morph .scroll-stagger.is-in .dist-process__item:hover {
  transform: translateX(4px);
}

html.nav-morph .dist-strip__logos li {
  transition: transform 0.45s var(--home-reveal-ease), opacity 0.45s ease;
}

html.nav-morph-home .stats.is-counting .stat__num {
  transition: color 0.3s ease;
  color: #fff;
}

html.nav-morph .faq-item {
  transition: border-color 0.3s ease, background 0.3s ease;
}

html.nav-morph .scroll-stagger.is-in .faq-item:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

html.nav-morph .cta-band {
  transition: transform 0.7s var(--home-reveal-ease), box-shadow 0.7s ease;
}

html.nav-morph .cta-band.in {
  transform: translateY(0);
}

@media (max-width: 899px) {
  html.nav-morph .nav {
    padding-inline: 1rem;
  }

  html.nav-morph .nav__inner {
    display: flex;
    justify-content: space-between;
    max-width: 100%;
  }

  html.nav-morph .nav__links {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.nav-morph .nav__inner {
    will-change: auto;
  }

  html.nav-morph [data-reveal],
  html.nav-morph .scroll-stagger > *,
  html.nav-morph .home-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}