/* ============================================================================
   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}

#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}

/* checkpoint name chip */
#scroll-rail .sr-tip{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(-4px);
  padding:5px 11px;border-radius:8px;white-space:nowrap;pointer-events:none;
  font-family:var(--mono,monospace);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#eef0f8;
  background:rgba(13,15,22,.82);border:1px solid rgba(255,255,255,.14);
  opacity:0;transition:opacity .25s var(--ease,ease),transform .25s var(--ease,ease)}
@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;transform:translateX(-50%) translateY(0)}

/* 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}
}