/* scroll train (owner request 2026-11-14): a three-car train in the logo's livery, seen from above, runs down a track in
   the left margin. Every section heading is a station with a platform beside the track; platforms behind the train fill
   in. The train rides at a fixed point of the window, so scrolling drives it along the track. It has a nose at each end:
   scrolling back up reverses it, and the white headlamps (with their beam) and red tail lamps change ends. The logo's
   speed lines streak behind it while it moves. Built by train.js; wide screens only (the margin must hold it).
   Transforms, opacity and colours only. */
.trainline{position:absolute;left:0;top:0;width:0;pointer-events:none;z-index:1}
.trainline[hidden]{display:none}
/* the track: sleepers under two rails, 14px apart */
.trainline-rail,.trainline-done{position:absolute;left:-11px;top:0;width:22px;height:100%}
.trainline-rail{background:
  linear-gradient(90deg,transparent 4px,rgba(255,255,255,.2) 4px 5px,transparent 5px 17px,rgba(255,255,255,.2) 17px 18px,transparent 18px),
  repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 2px,transparent 2px 12px)}
.trainline-done{background:linear-gradient(90deg,transparent 4px,rgba(201,214,234,.5) 4px 5px,transparent 5px 17px,rgba(201,214,234,.5) 17px 18px,transparent 18px);
  transform-origin:50% 0;transform:scaleY(0)}
/* a platform beside the track at every station; the end of the line is a buffer across it */
.trainline-stop{position:absolute;left:20px;width:4px;height:40px;margin-top:-20px;border-radius:2px;
  background:var(--hair-2);transition:background-color 240ms var(--ease,cubic-bezier(.2,.7,.2,1))}
.trainline-stop.passed{background:var(--soft)}
.trainline-stop.terminus{left:-11px;width:22px;height:4px;margin-top:-2px}
.trainline-train{position:absolute;left:-17px;top:0;width:34px;height:241px;margin-top:-120.5px;will-change:transform;--reach:0;--streak:0}
.trainline-car{position:absolute;left:0;top:0;width:34px;height:241px;display:block}
/* the logo's speed lines, behind whichever end trails */
.trainline-trail{position:absolute;left:2px;width:30px;height:96px;bottom:calc(100% - 28px);display:block;opacity:var(--streak);
  transform-origin:50% 100%;transform:scaleY(var(--reach))}
.trainline-train.up .trainline-trail{bottom:auto;top:calc(100% - 28px);transform-origin:50% 0;transform:scaleY(var(--reach)) translateY(100%) scaleY(-1)}
/* lamps: two at each nose. The leading end is white with a beam, the trailing end red */
.trainline-lamps{position:absolute;left:12.400px;width:2.600px;height:2px;border-radius:50%;
  background:#ff3b30;box-shadow:6.600px 0 0 #ff3b30;transition:background-color 320ms var(--ease,cubic-bezier(.2,.7,.2,1)),box-shadow 320ms var(--ease,cubic-bezier(.2,.7,.2,1))}
.trainline-lamps.head{top:7px}
.trainline-lamps.tail{top:232px}
.trainline-train:not(.up) .trainline-lamps.tail,.trainline-train.up .trainline-lamps.head{background:#fff6dc;box-shadow:6.600px 0 0 #fff6dc}
.trainline-beam{position:absolute;left:-13px;width:60px;height:110px;opacity:0;transition:opacity 320ms var(--ease,cubic-bezier(.2,.7,.2,1))}
.trainline-beam.tail{top:238px;background:linear-gradient(180deg,rgba(255,246,220,.2),rgba(255,246,220,0));clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)}
.trainline-beam.head{top:-107px;background:linear-gradient(0deg,rgba(255,246,220,.2),rgba(255,246,220,0));clip-path:polygon(0 0,100% 0,60% 100%,40% 100%)}
.trainline-train:not(.up) .trainline-beam.tail,.trainline-train.up .trainline-beam.head{opacity:1}
@media (prefers-reduced-motion: reduce){
  .trainline-stop,.trainline-lamps,.trainline-beam{transition:none}
}
/* end scroll train */