.code-motion-figure .code-art{display:block;width:100%;height:auto;overflow:visible}
.code-motion-figure .code-art-mobile{display:none}
.code-motion-figure.scroll-reveal[data-reveal-state="entering"]{animation-delay:0ms}
.code-shape-motion{--code-x:4px;--code-down:10px;--code-up:-14px;transform-box:fill-box;transform-origin:center;animation:code-shape-drift var(--code-duration,5s) ease-in-out var(--code-delay,0s) infinite;animation-play-state:paused}
.code-rotor{transform-box:fill-box;transform-origin:center;animation:code-colours-orbit var(--rotor-duration,14s) linear var(--rotor-delay,0s) infinite;animation-play-state:paused}
.code-flow{stroke-dasharray:14 86;opacity:.95;filter:drop-shadow(0 0 3px #6aaedb70);animation:code-flow-travel 3s linear var(--code-delay,0s) infinite;animation-play-state:paused}
.code-motion-visible .code-shape-motion,.code-motion-visible .code-flow,.code-motion-visible .code-rotor{animation-play-state:running}
@keyframes code-colours-orbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes code-shape-drift{0%,100%{transform:translate(calc(-1 * var(--code-x)),var(--code-down)) rotate(-2.2deg) scale(.98)}50%{transform:translate(var(--code-x),var(--code-up)) rotate(2.2deg) scale(1.035)}}
@keyframes code-flow-travel{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@media(max-width:760px){.code-motion-figure .code-art-desktop{display:none}.code-motion-figure .code-art-mobile{display:block}.code-shape-motion{--code-x:2px;--code-down:6px;--code-up:-8px}}
@media(prefers-reduced-motion:reduce){.code-shape-motion,.code-rotor{animation:none;transform:none}.code-flow{display:none}}
html.motion-paused .code-shape-motion,html.page-hidden .code-shape-motion,html.motion-paused .code-flow,html.page-hidden .code-flow,html.motion-paused .code-rotor,html.page-hidden .code-rotor{animation-play-state:paused!important}
/* Each section retains its own illustration and stationary labels. */
.section-motion-figure.diagram{margin-right:0}
@media(min-width:761px){.section-motion-figure.diagram{margin-left:0}}
.code-motion-figure .section-art{display:none}
.code-motion-figure .section-art.art-desktop{display:block}
.section-shape-motion{transform-box:fill-box;transform-origin:center;animation:section-shape-breathe var(--section-duration,5s) ease-in-out var(--section-delay,0s) infinite;animation-play-state:paused}
.code-motion-visible .section-shape-motion{animation-play-state:running}
@keyframes section-shape-breathe{0%,100%{transform:rotate(-3deg) scale(.96)}50%{transform:rotate(3deg) scale(1.045)}}
@media(max-width:760px){.code-motion-figure .section-art.art-desktop{display:none}.code-motion-figure .section-art.art-mobile,.code-motion-figure .section-art.art-mobile430{display:block}}
@media(max-width:409px){.code-motion-figure .section-art.art-mobile430{display:none}.code-motion-figure .section-art.art-mobile390{display:block}}
@media(max-width:374px){.code-motion-figure .section-art.art-mobile390{display:none}.code-motion-figure .section-art.art-mobile360{display:block}}
@media(prefers-reduced-motion:reduce){.section-shape-motion{animation:none;transform:none}}
html.motion-paused .section-shape-motion,html.page-hidden .section-shape-motion{animation-play-state:paused!important}
/* Two shape states travel through receive → discern → translate → try → refine. */
.process-morph{animation:process-shape-cycle 20s ease-in-out var(--process-delay,0s) infinite;animation-play-state:paused}
.process-flow{stroke-dasharray:14 86;opacity:0;filter:drop-shadow(0 0 3px #a8d7ff);animation:process-step-flow 20s linear var(--process-delay,0s) infinite;animation-play-state:paused}
.code-motion-visible .process-morph,.code-motion-visible .process-flow{animation-play-state:running}
@keyframes process-shape-cycle{0%,57%,100%{d:var(--process-shape-a)}7%,50%{d:var(--process-shape-b)}}
@keyframes process-step-flow{0%,6.9%,10.1%,50%,56.9%,60.1%,100%{opacity:0;stroke-dashoffset:100}7%,57%{opacity:1;stroke-dashoffset:100}10%,60%{opacity:1;stroke-dashoffset:0}}
html.motion-paused .process-morph,html.page-hidden .process-morph,html.motion-paused .process-flow,html.page-hidden .process-flow{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.process-morph{animation:none}.process-flow{display:none}}