/* A single fluid indicator travels through the navigation instead of separate active pills flashing on and off. */
.main-nav { isolation: isolate; }
.nav-current {
  position: absolute;
  z-index: 0;
  top: .27rem;
  left: 0;
  height: calc(100% - .54rem);
  width: 0;
  border-radius: 999px;
  background: #f4f3ee;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 3px 9px rgba(0,0,0,.11);
  pointer-events: none;
  transform: translate3d(-200px, 0, 0);
  transition: transform 1000ms cubic-bezier(.22, 1, .36, 1), width 1000ms cubic-bezier(.22, 1, .36, 1);
}
.nav-current::after {
  content: '';
  position: absolute;
  inset: -3px -7px;
  border-radius: inherit;
  background: rgba(244,243,238,.42);
  filter: blur(5px);
  opacity: 0;
  transform: scaleX(.72);
  transform-origin: center;
}
.main-nav.is-moving .nav-current::after { animation: nav-current-ripple 1000ms cubic-bezier(.22, 1, .36, 1); }
@keyframes nav-current-ripple {
  0% { opacity: 0; transform: scaleX(.66); }
  28% { opacity: .54; transform: scaleX(1.12); }
  62% { opacity: .28; transform: scaleX(.9); }
  100% { opacity: 0; transform: scaleX(.76); }
}
.main-nav a { position: relative; z-index: 1; background: transparent !important; transition: color 360ms ease, transform 280ms ease; }
.main-nav a.active { color: #161616 !important; }
.main-nav a:hover:not(.active),
.main-nav a:focus-visible:not(.active) { background: rgba(244,243,238,.16) !important; color: #f8faf4 !important; }
.main-nav a:hover:not(.active) { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .nav-current, .main-nav a { transition: none !important; }
  .main-nav.is-moving .nav-current::after { animation: none; }
}