/* Animated infinity diagram (#about) */
.inf{margin-top:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.inf>svg{display:block;width:100%;height:auto;min-width:860px}

/* flowing dots on the trail */
.inf .dots{animation:infFlow .55s linear infinite}
@keyframes infFlow{to{stroke-dashoffset:-8.5}}

/* node states */
.inf .nd .c0,.inf .nd .c1,.inf .nd .bd{transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.2,.9,.3,1.3),fill .35s,stroke .35s,stroke-width .35s}
.inf .nd>svg{transition:stroke .35s}
.inf .nd .tt{transition:fill .35s}
.inf .nd .ring{fill:none;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}

/* passed: softly tinted */
.inf .nd.done .c1{fill:rgba(85,96,174,.20)}
.inf .nd.done.lms .c1{fill:rgba(242,100,48,.22)}
.inf .nd.done .c0{stroke:#5560AE;stroke-width:2}
.inf .nd.done.lms .c0{stroke:#F26430;stroke-width:2}
.inf .nd.done .tt{fill:#5560AE}
.inf .nd.done.lms .tt{fill:#E0592A}

/* current: filled, enlarged, pulsing */
.inf .nd.on .c0{transform:scale(1.14);fill:#5560AE;stroke:#363C80;stroke-width:2}
.inf .nd.on.lms .c0{fill:#F26430;stroke:#E0592A}
.inf .nd.on .c1{transform:scale(1.14);fill:rgba(255,255,255,.14)}
.inf .nd.on>svg{stroke:#fff}
.inf .nd.on .bd{transform:scale(1.2)}
.inf .nd.on .tt{fill:#363C80;font-weight:700}
.inf .nd.on.lms .tt{fill:#E0592A}
.inf .nd.on .ring{stroke:#5560AE;animation:infPulse 1.1s ease-out infinite}
.inf .nd.on.lms .ring{stroke:#F26430}
@keyframes infPulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}

/* LOS -> LMS pill */
.inf .pill{transform-box:fill-box;transform-origin:center;transition:filter .3s}
.inf .pill.hit{animation:infPill .9s ease-out}
@keyframes infPill{0%{transform:scale(1)}35%{transform:scale(1.18);filter:drop-shadow(0 4px 10px rgba(242,100,48,.45))}100%{transform:scale(1)}}

/* whole figure lights up when the round completes */
.inf.complete .nd .c0{stroke-width:2.6}
.inf.complete .dots{animation-duration:.3s}

@media (prefers-reduced-motion:reduce){
  .inf .dots,.inf .nd .ring{animation:none!important}
}