/* q-nav: the page's chapters, on the left.

   Not a menu of other pages: one list of the places inside this page, fixed to
   the left edge, vertically centred, each item left aligned on the page's own
   left edge. Inactive items are light grey at a little over half opacity; the
   current one is the page's cyan, bold and slightly larger (1.15x); a hovered
   or keyboard-focused item grows to 1.25x and turns white with a spring, and
   while anything is hovered the current item drops back to the inactive size
   and weight but keeps its cyan, so it still reads as the place the visitor
   is in (human, 2026-10-28).

   Only one item is ever cyan. Over light sections the greys and the white
   become dark equivalents and the cyan darkens (--accent-deep), so the list
   stays readable; the cyan never leaves. */

/* The width the list takes from the page's left edge, label included, plus a
   gap: sections whose copy starts at the left edge keep their words clear of
   it (the hero copy, human, 2026-10-29). Zero where the list is not shown. */
:root {
  --ch-gutter: 220px;
}

.chapters {
  /* Dark sections (the page's own theme) */
  --ch-idle: rgba(245, 245, 247, 0.55);
  --ch-hot: rgba(255, 255, 255, 0.82);
  --ch-cur: rgba(35, 230, 255, 0.85);
  --ch-dot: #23e6ff;
  --ch-dot-glow: rgba(35, 230, 255, 0.55);
  --ch-frost: rgba(255, 255, 255, 0.045);
  --ch-rail: rgba(245, 245, 247, 0.17);

  position: fixed;
  left: 48px;
  top: 50%;
  z-index: 92;
  transform: translateY(-50%);
  pointer-events: none; /* only the labels take the pointer */
  transition: opacity 0.5s var(--ease);
}

/* Light sections (mounts, numbers' turn, results and the ending) */
.chapters.is-light {
  --ch-idle: rgba(29, 29, 31, 0.5);
  --ch-hot: rgba(29, 29, 31, 0.86);
  --ch-cur: rgba(10, 127, 149, 0.92);
  --ch-dot: #0a7f95;
  --ch-dot-glow: rgba(10, 127, 149, 0.4);
  --ch-frost: rgba(255, 255, 255, 0.2);
  --ch-rail: rgba(29, 29, 31, 0.16);
}

/* Frosted glass: a soft, borderless wash behind the list. Its edges are
   feathered by a mask, so it never shows a panel or a hard edge, and it sits
   on the picture rather than in front of it. */

.chapters::before {
  content: "";
  position: absolute;
  inset: -46px -56px -46px -34px;
  border-radius: 50%;
  background: var(--ch-frost);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 34% 50%, #000 34%, rgba(0, 0, 0, 0.55) 66%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 58% at 34% 50%, #000 34%, rgba(0, 0, 0, 0.55) 66%, transparent 100%);
  pointer-events: none;
}

/* Over the opening loop the list is faint, like glass on the picture. */
.chapters.is-hero {
  opacity: 0.72;
}

.chapters.is-hero::before {
  background: rgba(255, 255, 255, 0.045);
}

/* The rail: one hairline beside the list, with a cyan dot that slides along it.
   The dot's position is set from the page's scroll, so it travels past every
   label in between rather than jumping. */

.chapters-rail {
  position: absolute;
  left: -20px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ch-rail);
  transition: background-color 0.4s var(--ease);
}

.chapters-dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--ch-dot);
  box-shadow: 0 0 9px 2px var(--ch-dot-glow);
  will-change: transform;
}

.chapters-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.chapters-item {
  margin: 0;
  padding: 0;
  line-height: 1;
}

.chapter {
  display: inline-block;
  transform-origin: left center;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--ch-idle);
  pointer-events: auto;
  will-change: transform;
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
    color 240ms var(--ease), opacity 240ms var(--ease);
}

.chapter:focus-visible {
  outline: 1px solid var(--ch-cur);
  outline-offset: 5px;
}

/* The current chapter: cyan, bold, a little larger. */
.chapter.is-current {
  color: var(--ch-cur);
  font-weight: 600;
  transform: scale(1.15);
}

/* Pointing at another chapter: it pops and turns white. */
.chapter:hover,
.chapter:focus-visible {
  color: var(--ch-hot);
  transform: scale(1.25);
}

/* While another chapter is pointed at, the current one steps back to the
   inactive size and weight, keeping its cyan. Pointing at the current chapter
   itself leaves it the one cyan and only grows it. */
.chapters:has(.chapter:not(.is-current):hover, .chapter:not(.is-current):focus-visible) .chapter.is-current {
  font-weight: 400;
  transform: scale(1);
}

/* Pointing at the current chapter itself: it grows but stays the one cyan. */
.chapters .chapter.is-current:hover,
.chapters .chapter.is-current:focus-visible {
  color: var(--ch-cur);
  transform: scale(1.25);
}

/* Rail and frost behind the labels, never over them. */
.chapters-rail,
.chapters::before {
  z-index: -1;
}

/* Narrower windows: the film picture is 80vw wide, so its left edge walks
   towards the list. The list steps left and down a size to stay clear of it,
   and steps out entirely where it could no longer clear the picture. */
@media (max-width: 1560px) {
  :root {
    --ch-gutter: 186px;
  }

  .chapters {
    left: 24px;
  }

  .chapters-rail {
    left: -14px;
  }

  .chapter {
    font-size: 13px;
  }
}

@media (max-width: 1240px) {
  :root {
    --ch-gutter: 0px;
  }

  .chapters {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter,
  .chapters-dot {
    transition: none;
  }
}