/* ============================================================================
   scrollrail.css — glass checkpoint rail (fixed chrome, real glass allowed).
   The pill sits top-center under the header line; the classic 2px indicator
   retires wherever the rail is on duty.
============================================================================ */
#scroll-rail{position:fixed;top:calc(clamp(14px,2vw,26px) + 6px);left:50%;transform:translateX(-50%);
  z-index:8400;width:min(520px,42vw);height:34px;border-radius:999px;
  background:rgba(13,15,22,.48);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 40px rgba(5,6,12,.35),inset 0 1px 0 rgba(255,255,255,.08);
  opacity:1;transition:opacity .4s var(--ease,ease),transform .4s var(--ease,ease)}
@supports (backdrop-filter:blur(1px)){
  #scroll-rail{backdrop-filter:blur(14px) saturate(1.25);background:rgba(13,15,22,.36)}
}
/* the reel cinema owns the frame: the rail steps aside with the scroll pill */
html.reel-framed #scroll-rail{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-8px)}
html.has-rail #scroll-indicator{display:none}

/* the fixed #header (z-index 9000, full-width, transparent center) paints over
   the rail and was swallowing the clicks AND hover meant for the dots, so they
   never felt interactive. Let the header pass pointer events through in its
   empty center, keeping its own controls (logo + right pill) clickable. Scoped
   to has-rail so it only applies where a rail actually sits under the header. */
html.has-rail #header{pointer-events:none}
html.has-rail #header-logo,html.has-rail #header-right{pointer-events:auto}

#scroll-rail .sr-track{position:absolute;inset:0 10px;border-radius:inherit}
#scroll-rail .sr-track::before{content:"";position:absolute;left:3.5%;right:3.5%;top:50%;height:2px;
  transform:translateY(-50%);border-radius:2px;background:rgba(255,255,255,.14)}
#scroll-rail .sr-fill{position:absolute;left:0;top:50%;height:2px;transform:translateY(-50%);
  border-radius:2px;width:0;
  background:linear-gradient(90deg,rgba(91,124,250,.35),rgba(91,124,250,.95) 60%,rgba(63,191,165,.95));
  box-shadow:0 0 12px rgba(91,124,250,.55)}

#scroll-rail .sr-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer}
#scroll-rail .sr-pip{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.38);
  border:1px solid rgba(255,255,255,.25);transition:transform .3s var(--ease,ease),background .3s,box-shadow .3s}
#scroll-rail .sr-dot.passed .sr-pip{background:rgba(160,180,255,.75);border-color:transparent}
#scroll-rail .sr-dot.on .sr-pip{background:#fff;transform:scale(1.5);
  box-shadow:0 0 0 4px rgba(91,124,250,.28),0 0 14px rgba(91,124,250,.8)}
@media (hover:hover) and (pointer:fine){
  #scroll-rail .sr-dot:hover .sr-pip{transform:scale(1.6);background:#fff}
}
#scroll-rail .sr-dot:focus-visible{outline:none}
#scroll-rail .sr-dot:focus-visible .sr-pip{box-shadow:0 0 0 3px rgba(91,124,250,.9);background:#fff}

/* item 8: checkpoint name reveals as a smooth-edged bar that EXPANDS open
   (clip-path opens from the center outward, so the text never squashes). */
#scroll-rail .sr-tip{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  padding:6px 13px;border-radius:9px;white-space:nowrap;pointer-events:none;
  font-family:var(--mono,monospace);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#eef0f8;
  background:rgba(13,15,22,.88);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 22px rgba(5,6,12,.4),0 0 0 1px rgba(91,124,250,.14),inset 0 1px 0 rgba(255,255,255,.06);
  clip-path:inset(0 50% 0 50% round 9px);opacity:0;
  transition:clip-path .34s var(--ease,ease),opacity .2s var(--ease,ease)}
/* the little stem connecting the bar to its dot */
#scroll-rail .sr-tip::before{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  width:1px;height:6px;background:rgba(255,255,255,.22)}
@supports (backdrop-filter:blur(1px)){ #scroll-rail .sr-tip{backdrop-filter:blur(10px)} }
#scroll-rail .sr-dot:hover .sr-tip,#scroll-rail .sr-dot:focus-visible .sr-tip{
  opacity:1;clip-path:inset(0 0 0 0 round 9px)}

/* small screens keep the classic thin indicator instead */
@media (max-width:899px){
  #scroll-rail{display:none}
  html.has-rail #scroll-indicator{display:block}
}
@media (prefers-reduced-motion:reduce){
  #scroll-rail,#scroll-rail .sr-pip,#scroll-rail .sr-tip{transition:none}
}

/* ===== is-scrolling blur-drop parity (bug fix, ALL tiers incl. tier 0) =====
   Siblings #scroll-indicator (endfx.css) and the header pill (glass.css) already
   drop their live backdrop-filter while html.is-scrolling; #scroll-rail was the
   one fixed glass that never did, so its blur re-sampled the moving page every
   frame. Drop it during scroll and paint a near-opaque frost; the real blur
   returns the instant the page rests. */
html.is-scrolling #scroll-rail{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  background:rgba(13,15,22,.92)}