/* Site-wide motion: scroll reveal and timeline lines. Everything is gated on .mo-ready, which motion.js
   only sets when the visitor has not asked for reduced motion, so content is never hidden without JS. */

html { --mo-y: 56px; --mo-x: 64px; --mo-s: .94; --mo-dur: .9s; --mo-step: 110ms; --mo-ease: cubic-bezier(.16, 1, .3, 1); }

/* Reveal on scroll: hidden until the element enters the viewport, then it plays once. */
.mo-ready [data-mo]:not(.is-in) { opacity: 0; }
.mo-ready [data-mo].is-in { animation: mo-up var(--mo-dur) var(--mo-ease) backwards; animation-delay: calc(var(--i, 0) * var(--mo-step)); }
.mo-ready [data-mo="card"].is-in { animation-name: mo-from-right; }
.mo-ready [data-mo="step"].is-in { animation-name: mo-from-left; }
.mo-ready [data-mo="icon"].is-in { animation-name: mo-pop; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }

@keyframes mo-up { from { opacity: 0; transform: translateY(var(--mo-y)) scale(var(--mo-s)); } to { opacity: 1; transform: none; } }
@keyframes mo-from-right { from { opacity: 0; transform: translateX(var(--mo-x)) scale(var(--mo-s)); } to { opacity: 1; transform: none; } }
@keyframes mo-from-left { from { opacity: 0; transform: translateX(calc(var(--mo-x) * -1)); } to { opacity: 1; transform: none; } }
@keyframes mo-pop { from { opacity: 0; transform: translateY(24px) scale(.5); } to { opacity: 1; transform: none; } }

/* Timelines: the line grows with scroll and each dot lights up as the line reaches it. */
.mo-ready :is(.lp-tl, .about-timeline) { position: relative; }
.mo-ready :is(.lp-tl, .about-timeline)::after { position: absolute; top: 0; width: 2px; height: calc(var(--tl, 0) * 100%); background: var(--v2-blue); box-shadow: 0 0 10px rgba(112, 173, 255, .55); content: ""; transition: height .12s linear; }
.mo-ready .lp-tl::after { left: -2px; }
.mo-ready .about-timeline::after { left: 0; }
.mo-ready :is(.lp-tl li, .about-timeline-item)::before { transition: background .3s ease, box-shadow .3s ease; }
.mo-ready :is(.lp-tl li, .about-timeline-item).is-lit::before { background: var(--v2-blue); box-shadow: 0 0 0 5px rgba(112, 173, 255, .3), 0 0 14px rgba(112, 173, 255, .7); animation: mo-pulse .7s ease-out; }
@keyframes mo-pulse { 0% { transform: scale(.6); } 55% { transform: scale(1.5); } 100% { transform: scale(1); } }