/* 17 Great Finds, story timeline on scroll (2026-09-15). Behavior in story-timeline.js; only active once .tl-on is set. */
.tl-on .timeline{--rail-x:104px}
.tl-on .timeline .tl-fill{position:absolute;left:calc(var(--rail-x) - 1px);top:10px;bottom:30px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#3A93D1 0%,var(--blue) 60%,var(--deep) 100%);transform-origin:50% 0;transform:scaleY(0);pointer-events:none}
.tl-on .timeline .tl-tip{position:absolute;left:var(--rail-x);top:10px;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:#fff;border:3px solid var(--blue);box-shadow:0 0 0 6px #0E76BC24,0 6px 16px #0E76BC4d;pointer-events:none;z-index:3;   /* rides over the dots as a clean ring */
  opacity:0;transition:opacity .35s var(--soft)}
.tl-on .timeline.tl-moving .tl-tip{opacity:1}

/* dots wait in soft gray, then light up as the line reaches them (1997 is no longer pre-filled) */
.tl-on .timeline li::before{background:#f9f8fa;border-color:#C7D6E3;box-shadow:none;z-index:2;
  transition:background-color .45s var(--soft),border-color .45s var(--soft),box-shadow .6s var(--soft),transform .6s var(--spring)}
.tl-on .timeline li.is-reached::before{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 5px #0E76BC24}
.tl-on .timeline li.is-current::before{transform:scale(1.25)}
.tl-on .timeline li.tl-pop::before{animation:tl-pop .9s var(--out)}
@keyframes tl-pop{0%{box-shadow:0 0 0 0 #0E76BC66}60%{box-shadow:0 0 0 12px #0E76BC00}100%{box-shadow:0 0 0 5px #0E76BC24}}

/* the year and heading warm up when reached; paragraphs stay fully readable the whole time */
.tl-on .timeline .ty,.tl-on .timeline h3{transition:color .5s var(--soft),translate .7s var(--out)}
.tl-on .timeline li:not(.is-reached) .ty{color:#9DB2C4}
.tl-on .timeline li:not(.is-reached) h3{color:#7E8594}
.tl-on .timeline li.is-current .ty{color:var(--blue-ink)}
.tl-on .timeline li.key.is-current .ty{color:var(--deep)}

@media(max-width:480px){.tl-on .timeline{--rail-x:8px}}
@media(prefers-reduced-motion:reduce){
  .tl-on .timeline .tl-tip{display:none}
  .tl-on .timeline li.tl-pop::before{animation:none}
}