/* ---------- scroll effects: CSS only, no scroll listeners ---------- */

/* headings slide up as they enter (browser scroll timeline: no JavaScript; unsupported browsers simply skip it) */
@supports (animation-timeline:view()){
  .sec-head{animation:rise-in linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  @keyframes rise-in{from{opacity:0;translate:0 24px}}
}

/* quest road: dotted road, a golden trail behind the traveller */
.rail{background:repeating-linear-gradient(90deg,var(--soft) 0 12px,transparent 12px 20px)}
.path::before,.path::after{content:"";position:absolute;left:12.5%;top:-4px;height:4px;pointer-events:none}
.path::before{right:12.5%;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px);opacity:.25}
.path::after{width:calc(var(--p,0)*75%);background:repeating-linear-gradient(90deg,var(--sun) 0 8px,transparent 8px 16px)}
.walker{position:absolute;z-index:3;width:46px;left:calc(12.5% + var(--p,0)*75%);top:-64px;translate:-50% 0;pointer-events:none}
.walker .spr{display:block;animation:step .34s steps(2) infinite;animation-play-state:paused}
.walker.walking .spr{animation-play-state:running}
.walker.back .spr{scale:-1 1}
.walker svg{width:46px;height:auto}
.walker .shadow{display:block;width:70%;height:6px;margin:2px auto 0;background:rgba(0,0,0,.22)}
@keyframes step{50%{translate:0 -5px}}
.stop h3,.stop p{transition:opacity .4s}
.stop:not(.on) h3,.stop:not(.on) p{opacity:.4}
.stop:not(.on) .node{opacity:.65}

@media (max-width:760px){
  .rail{background:repeating-linear-gradient(180deg,var(--soft) 0 12px,transparent 12px 20px)}
  .path::before,.path::after{display:none}
  .walker{left:34px;top:calc(34px + var(--p,0)*(100% - 68px));translate:-50% -60%}
}
@media (prefers-reduced-motion:reduce){ .walker{display:none} }