/* Navigation-only progressive enhancement: the moving surface owns the active background. */
nav.views.af-liquid-ready{position:relative;isolation:isolate}
nav.views.af-liquid-ready button{z-index:2;background:transparent}
nav.views.af-liquid-ready button.on{
  background:transparent;
  border-color:transparent;
  border-radius:3px;
  color:var(--bg);
}
nav.views.af-liquid-ready button::after{display:none!important;animation:none!important}
nav.views.af-liquid-ready button.af-liquid-target{
  border-color:transparent;
  color:var(--mut);
}
nav.views.af-liquid-ready.is-liquid-traveling button.on{background:transparent}

.af-liquid-nav-ink{
  position:absolute;
  z-index:1;
  left:0;
  top:0;
  width:0;
  height:0;
  border:1px solid color-mix(in srgb,var(--acc2) 72%,var(--acc));
  border-radius:9px;
  pointer-events:none;
  background:var(--acc);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--acc2) 46%,transparent),inset 0 -2px 0 color-mix(in srgb,#000 18%,transparent);
  opacity:1;
  transform-origin:center;
  transition:left 280ms cubic-bezier(.16,1,.3,1),top 280ms cubic-bezier(.16,1,.3,1),width 280ms cubic-bezier(.16,1,.3,1),height 280ms cubic-bezier(.16,1,.3,1);
}
.af-liquid-nav-ink::before,.af-liquid-nav-ink::after{
  content:"";
  position:absolute;
  top:50%;
  pointer-events:none;
  background:var(--acc);
  border:inherit;
  opacity:0;
}
.af-liquid-nav-ink::before{height:calc(100% - 2px);border-radius:0 999px 999px 0}
.af-liquid-nav-ink::after{height:calc(100% - 4px);border-radius:999px}
.af-liquid-nav-ink.is-moving{animation:af-liquid-nav-surface-morph 280ms var(--ease-out) both;will-change:transform}
.af-liquid-nav-ink.is-moving.is-forward::before{left:calc(100% - 5px);animation:af-liquid-nav-tail-right 280ms var(--ease-out) both}
.af-liquid-nav-ink.is-moving.is-forward::after{right:calc(100% - 4px);width:12px;animation:af-liquid-nav-retract-left 280ms var(--ease-out) both}
.af-liquid-nav-ink.is-moving.is-backward::before{right:calc(100% - 5px);border-radius:999px 0 0 999px;animation:af-liquid-nav-tail-left 280ms var(--ease-out) both}
.af-liquid-nav-ink.is-moving.is-backward::after{left:calc(100% - 4px);width:12px;animation:af-liquid-nav-retract-right 280ms var(--ease-out) both}
@keyframes af-liquid-nav-surface-morph{
  0%{transform:scaleX(.82) scaleY(.92);border-radius:12px 9px 9px 12px}
  24%{transform:scaleX(1.1) scaleY(1.02);border-radius:42% 12px 18px 52%}
  48%{transform:scaleX(1.3) scaleY(.92);border-radius:18px 48% 42% 18px}
  70%{transform:scaleX(1.1) scaleY(1.06);border-radius:52% 18px 12px 42%}
  100%{transform:none;border-radius:9px}
}
@keyframes af-liquid-nav-tail-right{
  0%{opacity:0;width:8px;transform:translate(0,-50%) scaleX(.35)}
  42%{opacity:.76;width:38px;transform:translate(5px,-50%) scaleX(1.08)}
  72%{opacity:.3;width:22px;transform:translate(2px,-50%) scaleX(.7)}
  100%{opacity:0;width:8px;transform:translate(0,-50%) scaleX(.35)}
}
@keyframes af-liquid-nav-tail-left{
  0%{opacity:0;width:8px;transform:translate(0,-50%) scaleX(.35)}
  42%{opacity:.76;width:38px;transform:translate(-5px,-50%) scaleX(1.08)}
  72%{opacity:.3;width:22px;transform:translate(-2px,-50%) scaleX(.7)}
  100%{opacity:0;width:8px;transform:translate(0,-50%) scaleX(.35)}
}
@keyframes af-liquid-nav-retract-left{
  0%{opacity:0;transform:translate(4px,-50%) scale(.25,.55)}
  44%{opacity:.38;transform:translate(-6px,-50%) scale(1,.86)}
  100%{opacity:0;transform:translate(0,-50%) scale(.25,.55)}
}
@keyframes af-liquid-nav-retract-right{
  0%{opacity:0;transform:translate(-4px,-50%) scale(.25,.55)}
  44%{opacity:.38;transform:translate(6px,-50%) scale(1,.86)}
  100%{opacity:0;transform:translate(0,-50%) scale(.25,.55)}
}

@media(prefers-reduced-motion:reduce){
  nav.views.af-liquid-ready button.on{background:var(--acc);border-color:var(--acc);border-radius:9px;color:var(--bg)}
  nav.views.af-liquid-ready button::after{display:block!important}
  nav.views.af-liquid-ready .af-liquid-nav-ink{display:none}
  .af-liquid-nav-ink,.af-liquid-nav-ink::before,.af-liquid-nav-ink::after{transition:none!important;animation:none!important}
}
