/* fx.css · story/progress-nav, chapter dots that fill as you read · owner: Lizzy East · all rights reserved */

/* A column of real links to the chapters, held at the side of the screen while the
   story is in view (sticky, taking no room). fx.js marks the chapter you are in
   (aria-current) and grows the line between the dots with your progress. Without
   script it is a plain column of dots that jump to each chapter. The dots invert
   against whatever is behind them, so they read on light and dark chapters alike. */
[data-fx~="story/progress-nav"] { position: relative; }
[data-fx~="story/progress-nav"] > [data-fx-dots] {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  align-content: center;
  justify-content: end;
  height: 100vh;
  height: 100svh;
  margin-bottom: -100vh;
  margin-bottom: -100svh;
  padding-inline-end: var(--fx-dots-inset, clamp(0.25rem, 1.5vw, 1.5rem));
  color: #ffffff;
  mix-blend-mode: difference;
  pointer-events: none;
}
[data-fx~="story/progress-nav"] > [data-fx-dots] ol {
  position: relative;
  display: grid;
  gap: var(--fx-dots-gap, 0.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: auto;
}
/* The track, and the fill that grows along it. */
[data-fx~="story/progress-nav"] > [data-fx-dots] ol::before,
[data-fx~="story/progress-nav"] > [data-fx-dots] ol::after {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: calc(50% - 0.5px);
  width: 1px;
  background: currentColor;
  opacity: 0.35;
}
[data-fx~="story/progress-nav"] > [data-fx-dots] ol::after {
  opacity: 1;
  transform-origin: 50% 0;
  scale: 1 var(--fx-progress, 0);
}
[data-fx~="story/progress-nav"] [data-fx-dots] a {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: inherit;
  text-decoration: none;
}
/* The ring (its black middle hides the track) and the fill inside it. */
[data-fx~="story/progress-nav"] [data-fx-dots] a::before,
[data-fx~="story/progress-nav"] [data-fx-dots] a::after {
  content: "";
  grid-area: 1 / 1;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
[data-fx~="story/progress-nav"] [data-fx-dots] a::before { border: 1.5px solid currentColor; background: #000000; }
[data-fx~="story/progress-nav"] [data-fx-dots] a::after { background: currentColor; scale: 0; }
[data-fx~="story/progress-nav"] [data-fx-dots] a[aria-current]::after { scale: 1; }
/* The chapter's name: always there for screen readers, shown beside the dot on hover
   or keyboard focus. */
[data-fx~="story/progress-nav"] [data-fx-dots] a > span {
  position: absolute;
  right: 100%;
  top: 50%;
  translate: 0 -50%;
  padding-inline-end: 0.35rem;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  clip-path: inset(0 0 0 100%);
}
[data-fx~="story/progress-nav"] [data-fx-dots] a:focus-visible > span { clip-path: inset(0 0 0 0); }
[data-fx~="story/progress-nav"] [data-fx-dots] a:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) {
  [data-fx~="story/progress-nav"] [data-fx-dots] a:hover > span { clip-path: inset(0 0 0 0); }
  [data-fx~="story/progress-nav"] [data-fx-dots] a:hover::after { scale: 0.5; }
  [data-fx~="story/progress-nav"] [data-fx-dots] a[aria-current]:hover::after { scale: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-fx~="story/progress-nav"] [data-fx-dots] a::after { transition: scale 320ms var(--fx-ease); }
  [data-fx~="story/progress-nav"] [data-fx-dots] a > span { transition: clip-path 280ms var(--fx-ease); }
}
/* On a phone the chapters leave room for the column. */
@media (max-width: 760px) {
  [data-fx~="story/progress-nav"] > :not([data-fx-dots]) { padding-right: calc(44px + 1rem); }
}