/* Scroll and entrance motion (medium intensity). Everything here is gated on the .mo class,
   which the inline script in <head> only adds when the visitor has NOT asked for reduced motion,
   so reduced-motion visitors, and anyone whose script fails, see the normal static page. */
.mo [data-r]{opacity:0;transform:translate3d(0,28px,0);will-change:opacity,transform;
  transition:opacity .7s ease,transform .75s cubic-bezier(.22,.7,.2,1);transition-delay:var(--d,0ms)}
.mo [data-r="left"]{transform:translate3d(-28px,0,0)}
.mo [data-r="scale"]{transform:scale(.96)}
.mo [data-r="fade"]{transform:translate3d(0,10px,0)}
.mo [data-r].in{opacity:1;transform:none}
/* failsafe: if the script never runs, show everything after 3s */
@keyframes mo-show{to{opacity:1;transform:none}}
.mo [data-r]:not(.in){animation:mo-show 0s linear 3s forwards}

/* hero drifts up slightly slower than the page and fades a little as you leave it */
.mo .hero{transform:translate3d(0,var(--py,0px),0);opacity:var(--po,1)}

/* section heading underline draws in */
.mo h2:after{content:"";display:block;width:56px;height:3px;border-radius:2px;background:var(--acc);margin-top:8px;
  transform:scaleX(0);transform-origin:left;transition:transform .7s .25s cubic-bezier(.22,.7,.2,1)}
.mo h2.ul:after{transform:scaleX(1)}

/* timeline: the line draws as you scroll, the dots pop when their job appears */
.mo .timeline{border-left-color:transparent;position:relative}
.mo .timeline:before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--line);
  transform-origin:top;transform:scaleY(var(--tl,0))}
.mo .job:before{transform:scale(0);transition:transform .45s .2s cubic-bezier(.3,1.6,.5,1)}
.mo .job.dot:before{transform:scale(1)}

/* scroll progress line and active navigation link */
#mo-progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--acc);transform-origin:left;transform:scaleX(0);z-index:30;pointer-events:none}
.nav a.lk{position:relative}
.nav a.lk:after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--acc);transform:scaleX(0);transition:transform .3s}
.nav a.lk.active{color:var(--text)}
.nav a.lk.active:after{transform:scaleX(1)}
.toc a.active{color:var(--text);font-weight:600}

/* small hover lifts (hover-capable devices only) */
@media (hover:hover){
  .btn{transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
  .btn:hover{transform:translateY(-2px)}
  .btn.pri:hover{box-shadow:0 8px 22px rgba(255,90,20,.35)}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}