/* Compact nav pill. A fixed, full-width glass nav bar that narrows into a pill once you scroll past a marker
   (ClipCut: the 1312px bar springs to 900px) or, with data-cnp-mode="direction", whenever you scroll down and
   back out when you scroll up (Vestris). The width is a real width on a .4 s / bounce .2 spring baked to CSS
   linear(), so the logo, links and button slide together and the pill overshoots its target by ~1.5% before it
   settles. part.js sets the two widths in px and toggles .is-compact; everything you see is here.
   Markup: <header class="cnp" data-cnp-at="#marker"><div class="cnp__bar">logo · links · button</div></header>
   .cnp--flat = Vestris's look: no bar at all at full size (transparent, square), a frosted rounded pill when compact. */
.cnp {
  --cnp-top: 32px;                /* ClipCut: 32 at >= 1440, 24 at 1080-1439, 20 below 810 */
  --cnp-side: 40px;               /* side gutter: 40, 30 at 810-1079, 20 below 810 */
  --cnp-max: 1312px;              /* widest the full bar gets */
  --cnp-h: 72px;
  --cnp-gap: 24px;                /* minimum space between the bar's groups (what a "fit" pill packs to) */
  --cnp-pad: 0 16px;
  --cnp-pad-compact: 0 16px;
  --cnp-radius: 100px;
  --cnp-radius-compact: 100px;
  --cnp-fill: rgba(255, 255, 255, 0);
  --cnp-fill-compact: rgba(255, 255, 255, 0);
  --cnp-sheen: linear-gradient(90deg, rgba(0, 0, 0, .05) 0%, rgba(255, 255, 255, .05) 64.6%);
  --cnp-line: rgba(255, 255, 255, .1);
  --cnp-line-compact: rgba(255, 255, 255, .1);
  --cnp-blur: 15px;
  --cnp-blur-compact: 15px;
  --cnp-drop: 0px;                /* compact pill moves down this much (Vestris 10px) */
  --cnp-dur: 400ms;
  /* Framer spring, duration .4 s, bounce .2 (baked by ../spring-to-linear: --spring-400-b20) */
  --cnp-ease: linear(0, 0.0224, 0.0794, 0.1581, 0.2486, 0.3435, 0.4375, 0.5269, 0.6093, 0.6833, 0.7484, 0.8044, 0.8518, 0.8911, 0.9231, 0.9487, 0.9688, 0.9841, 0.9954, 1.0036, 1.0091, 1.0125, 1.0144, 1.0151, 1.015, 1.0142, 1.0131, 1.0118, 1.0104, 1.0089, 1.0076, 1.0063, 1.0051, 1.0041, 1.0032, 1.0024, 1.0018, 1.0013, 1.0009, 1.0006, 1);
  position: fixed;
  top: var(--cnp-top);
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0 var(--cnp-side);
  pointer-events: none;           /* only the bar itself takes clicks */
}
@supports not (transition-timing-function: linear(0, 1)) { .cnp { --cnp-ease: cubic-bezier(.34, 1.3, .64, 1); } }
@media (max-width: 1439.98px) { .cnp { --cnp-top: 24px; } }
@media (max-width: 1079.98px) { .cnp { --cnp-side: 30px; } }
@media (max-width: 809.98px) { .cnp { --cnp-top: 20px; --cnp-side: 20px; } }

.cnp__bar {
  pointer-events: auto;
  box-sizing: border-box;
  width: min(var(--cnp-max), 100%);   /* part.js replaces this with exact px widths */
  height: var(--cnp-h);
  padding: var(--cnp-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cnp-gap);
  border-radius: var(--cnp-radius);
  background-color: var(--cnp-fill);
  background-image: var(--cnp-sheen);
  box-shadow: inset 0 0 0 1px var(--cnp-line);
  -webkit-backdrop-filter: blur(var(--cnp-blur));
  backdrop-filter: blur(var(--cnp-blur));
  white-space: nowrap;
}
.cnp__bar > * { flex: none; }
.cnp.is-ready .cnp__bar {
  transition-property: width, padding, border-radius, background-color, box-shadow, backdrop-filter, -webkit-backdrop-filter, transform;
  transition-duration: var(--cnp-dur);
  transition-timing-function: var(--cnp-ease);
}
.cnp.is-compact .cnp__bar {
  padding: var(--cnp-pad-compact);
  border-radius: var(--cnp-radius-compact);
  background-color: var(--cnp-fill-compact);
  box-shadow: inset 0 0 0 1px var(--cnp-line-compact);
  -webkit-backdrop-filter: blur(var(--cnp-blur-compact));
  backdrop-filter: blur(var(--cnp-blur-compact));
  transform: translateY(var(--cnp-drop));
}

/* Vestris look: full size = no bar, compact = frosted pill (white .2, blur 20, radius 11, 8 8 8 20, 10px lower) */
.cnp--flat {
  --cnp-top: 0px; --cnp-side: 0px; --cnp-max: 100000px; --cnp-h: 64px;
  --cnp-pad: 12px 24px; --cnp-pad-compact: 8px 8px 8px 20px; --cnp-gap: 30px;
  --cnp-radius: 0px; --cnp-radius-compact: 11px;
  --cnp-fill: rgba(255, 255, 255, 0); --cnp-fill-compact: rgba(255, 255, 255, .2);
  --cnp-sheen: none; --cnp-line: rgba(255, 255, 255, 0); --cnp-line-compact: rgba(255, 255, 255, 0);
  --cnp-blur: 0px; --cnp-blur-compact: 20px; --cnp-drop: 10px;
}

@media (prefers-reduced-motion: reduce) { .cnp.is-ready .cnp__bar { transition-duration: 1ms; } }