/* Navbar "full width → floating pill" morph, rebuilt for smooth motion.
   The old version toggled .scrolled at a single 40px line, used mismatched
   durations and was baked into the HTML (so it animated on page load).
   scripts/navbar.js now drives .is-pill with hysteresis; .scrolled is neutralised. */

/* neutralise the old .scrolled state (still toggled by the original inline script) */
html .luxe-nav.scrolled {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 18px 0 !important;
  border-radius: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html .luxe-nav.scrolled::before { opacity: 0; }

/* one timing for every part of the morph */
html .luxe-nav {
  --nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-dur: 0.7s;
  transition:
    top var(--nav-dur) var(--nav-ease),
    left var(--nav-dur) var(--nav-ease),
    right var(--nav-dur) var(--nav-ease),
    padding var(--nav-dur) var(--nav-ease),
    border-radius var(--nav-dur) var(--nav-ease),
    border-color var(--nav-dur) ease,
    box-shadow var(--nav-dur) ease !important;
  will-change: left, right, top;
}
html .luxe-nav::before { transition: opacity 0.55s ease; }
html .luxe-nav .nav-inner { transition: padding var(--nav-dur) var(--nav-ease); }
html .luxe-nav .navbar-brand .brand-name {
  transition: max-width var(--nav-dur) var(--nav-ease), opacity 0.4s ease;
}

/* ---------- the pill ---------- */
html body .luxe-nav.is-pill {
  top: 12px !important;
  /* centred pill: ~64% of the page width, between 900px and 1240px wide */
  left: max(14px, calc((100% - clamp(900px, 64%, 1240px)) / 2)) !important;
  right: max(14px, calc((100% - clamp(900px, 64%, 1240px)) / 2)) !important;
  padding: 12px 0 !important;
  border-radius: 20px !important;
  border-color: rgba(var(--bs-body-color-rgb), 0.09) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
html body .luxe-nav.is-pill::before { opacity: 1; }
html body .luxe-nav.is-pill .nav-inner { padding: 0 18px; }
@media (max-width: 991.98px) {
  html body .luxe-nav.is-pill { left: 14px !important; right: 14px !important; }
  html body .luxe-nav.is-pill .navbar-brand .brand-name { max-width: 0; opacity: 0; }
}

/* set the right state instantly on page load (no animation) */
html .luxe-nav.nav-instant,
html .luxe-nav.nav-instant::before,
html .luxe-nav.nav-instant .nav-inner,
html .luxe-nav.nav-instant .brand-name { transition: none !important; }