/* fx.css · nav/morph-pill, a pill slides along the menu to the section you are reading · owner: Lizzy East · all rights reserved */

/* A floating bar of section links. fx.js places one fixed-width pill under the current
   link by writing --fx-pill-x and --fx-pill-s (so only translate and scale move), and
   follows the pointer or keyboard focus along the links. Its round ends stay round at
   rest whatever the width. Without script it is the plain bar of links. */
html:has([data-fx~="nav/morph-pill"]) { scroll-padding-top: calc(var(--fx-pill-top, 1rem) + 4.5rem); }
[data-fx~="nav/morph-pill"] {
  position: fixed;
  top: var(--fx-pill-top, 1rem);
  left: 0;
  right: 0;
  z-index: 10;
  width: fit-content;
  max-width: calc(100% - 2rem);
  margin-inline: auto;
  padding: 5px;
  border-radius: 999px;
  background: var(--fx-pill-bar, rgb(17 17 23 / 0.9));
  color: var(--fx-pill-ink, #ffffff);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 12px 32px -16px rgb(0 0 0 / 0.5);
  backdrop-filter: blur(12px);
}
[data-fx~="nav/morph-pill"] ul { position: relative; display: flex; margin: 0; padding: 0; list-style: none; }
[data-fx~="nav/morph-pill"] a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 clamp(0.75rem, 2vw, 1.1rem);
  border-radius: 999px;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
[data-fx~="nav/morph-pill"] a:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
[data-fx~="nav/morph-pill"] ul::before {
  --fx-pill-r: 22px;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  border-radius: calc(var(--fx-pill-r) / var(--fx-pill-s, 1)) / var(--fx-pill-r);
  background: var(--fx-pill, rgb(255 255 255 / 0.18));
  transform-origin: 0 50%;
  translate: var(--fx-pill-x, 0px) 0;
  scale: var(--fx-pill-s, 1) 1;
  opacity: 0;
  pointer-events: none;
}
[data-fx~="nav/morph-pill"] ul.has-pill::before { opacity: 1; }
html.fx-armed [data-fx~="nav/morph-pill"] ul.is-live::before {
  transition: translate var(--fx-pill-dur, 420ms) var(--fx-ease), scale var(--fx-pill-dur, 420ms) var(--fx-ease), opacity 200ms linear;
}