/* Homepage chapter navigation (rail on desktop, pill on small screens). Loaded after passage.css. */

/* Chapter navigation. At every width a pill at the bottom centre, below the
   slide text: previous button, "2 / 7 · Approach", next button. From 992px a
   labelled rail on the right edge as well. Labels come from the markup
   (.passage-rail-label). No backdrop blur: both sit over the animating globe
   canvas. */
.passage-nav {
  /* Outside <main>, so it would get Bootstrap's system font from <body>;
     set Outfit here as .navbar does in assets/main.css. */
  font-family: 'Outfit', sans-serif;
}

.passage-nav[hidden] {
  display: none;
}

.passage-rail {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.passage-chip {
  position: fixed;
  left: 50%;
  bottom: 0.75rem;
  /* Below the shared .navbar (z-index: 1000, assets/main.css) and the mobile
     drawer (2000) / its backdrop (1999, assets/mobile-nav.css), above the
     stage/globe (0-2). The rail uses the same layer. */
  z-index: 45;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-bg-primary) 90%, transparent);
  border: 1px solid var(--theme-glass-border);
}

.passage-chip-text {
  padding: 0 0.6rem;
  color: var(--theme-text-secondary);
  font-size: 0.88rem;
  font-weight: 400;
  white-space: nowrap;
}

/* On the first and last slide one button is hidden; the text keeps the
   pill's rounded end clear. */
.passage-chip-prev[hidden] + .passage-chip-text {
  padding-left: 0.9rem;
}

.passage-chip-text:last-child,
.passage-chip-text:has(+ .passage-chip-next[hidden]) {
  padding-right: 0.9rem;
}

.passage-chip-prev,
.passage-chip-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-text-primary) 8%, transparent);
  color: var(--theme-text-primary);
  cursor: pointer;
}

.passage-chip-prev[hidden],
.passage-chip-next[hidden] {
  display: none;
}

.passage-chip-prev svg,
.passage-chip-next svg {
  width: 1.15rem;
  height: 1.15rem;
}

.passage-chip-prev:hover,
.passage-chip-next:hover {
  background: color-mix(in srgb, var(--octigen-blue) 22%, transparent);
}

/* Released to the footer: the whole nav steps aside; scrolling up recaptures
   the deck and brings it back. */
.passage-nav[data-released="true"] {
  display: none;
}

.passage-rail-item:focus-visible,
.passage-chip-prev:focus-visible,
.passage-chip-next:focus-visible {
  outline: 2px solid var(--octigen-blue);
  outline-offset: 2px;
}

@media (min-width: 992px) {
  .passage-rail {
    position: fixed;
    right: 1.25rem;
    top: 50%;
    z-index: 45;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
  }

  .passage-rail-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 2rem;
    padding: 0 0 0 0.5rem;
    border: 0;
    background: none;
    color: var(--theme-text-tertiary);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    text-shadow:
      0 0 10px var(--theme-bg-primary),
      0 0 20px var(--theme-bg-primary);
    transition: color 0.2s ease;
  }

  /* One fixed-width tick, scaled from its right edge, so the label does not
     shift when a chapter becomes current. */
  .passage-rail-tick {
    width: 1.4rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.55;
    transform: scaleX(0.4);
    transform-origin: right center;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .passage-rail-item:hover {
    color: var(--theme-text-primary);
  }

  .passage-rail-item:hover .passage-rail-tick {
    opacity: 0.9;
  }

  .passage-rail-item[aria-current="step"] {
    color: var(--octigen-orange);
  }

  .passage-rail-item[aria-current="step"] .passage-rail-tick {
    opacity: 1;
    transform: none;
  }

  [data-theme="light"] .passage-rail-item[aria-current="step"] {
    color: color-mix(in srgb, var(--octigen-orange) 62%, var(--theme-text-primary));
  }
}

@media (prefers-reduced-motion: reduce) {
  .passage-rail-item,
  .passage-rail-tick {
    transition: none;
  }
}

html.passage-static .passage-nav {
  display: none;
}