/* The drawing itself is a native SVG scene; each piece has its own timeline. */
.mr-workflow-art { display:none; pointer-events:none; overflow:visible; }
.workflow.has-workflow-art .mr-has-workflow-art > img { display:none; }
.workflow.has-workflow-art .workflow-icon { height:clamp(210px,calc(var(--mr-workflow-active-size,440px) * .6),350px); justify-content:center; }
.workflow.has-workflow-art .mr-workflow-art { display:block; flex:0 1 auto; width:min(100%,var(--mr-sequence-image-size,88px)); height:auto; max-width:100%; aspect-ratio:16 / 9; transition:width 600ms var(--mr-motion-ease); }
.workflow.has-workflow-art [data-mr-sized-image] .mr-workflow-art { width:min(100%,calc(var(--mr-sequence-image-size) * var(--mr-image-factor,1))); aspect-ratio:var(--mr-image-ratio,16 / 9); }
.workflow.has-workflow-art [data-mr-sized-image][data-mr-locked="0"] .mr-workflow-art { height:calc(var(--mr-sequence-image-size) * var(--mr-image-height-factor,.5625)); }
.mr-workflow-art [class^="mr-art-"] { transform-box:fill-box; transform-origin:center; }
.mr-workflow-art .mr-art-bar { transform-origin:center bottom; }
/* Hover holds the step so the user can watch these internal movements. */
.workflow.art-motion-enabled.is-motion-visible .is-current .mr-art-label { animation:mr-art-sort 2.4s var(--mr-motion-ease) var(--art-delay,0s) infinite both; }
.workflow.art-motion-enabled.is-motion-visible .is-current .mr-art-trace { stroke-dasharray:100; animation:mr-art-draw 2.4s ease-in-out infinite; }
.workflow.art-motion-enabled.is-motion-visible .is-current .mr-art-check { stroke-dasharray:100; animation:mr-art-check-in 2.4s ease-in-out infinite; }
.workflow.art-motion-enabled.is-motion-visible .is-current .mr-art-bloom { animation:mr-art-bloom 2.4s ease-in-out infinite; }
.workflow.art-motion-enabled.is-motion-visible .is-current .mr-art-gate { animation:mr-art-gate 2.4s ease-in-out infinite; }
.workflow.art-motion-enabled.is-motion-visible .is-current .mr-art-output { animation:mr-art-output 2.4s var(--mr-motion-ease) var(--art-delay,0s) infinite both; }
.workflow.art-motion-enabled.is-motion-visible .is-current .mr-art-flow { animation:mr-art-flow 1.5s linear var(--art-delay,0s) infinite both; }
.workflow.art-motion-enabled.is-motion-visible .is-current .mr-art-sheet-back { animation:mr-art-back 2.8s ease-in-out infinite; }
.workflow.art-motion-enabled.is-motion-visible .is-current .mr-art-sheet-front { animation:mr-art-front 2.8s ease-in-out infinite; }
.workflow.art-motion-enabled.is-motion-visible .is-current .mr-art-scan { animation:mr-art-scan 2.8s ease-in-out infinite; }
.workflow.art-motion-enabled.is-motion-visible .is-current .mr-art-focus { animation:mr-art-focus 1.4s ease-in-out infinite; }
.workflow.art-motion-enabled.is-motion-visible .is-current .mr-art-review-done { animation:mr-art-output 2.4s var(--mr-motion-ease) .2s infinite both; }
.workflow.art-motion-enabled.is-motion-visible .is-current .mr-art-bar { animation:mr-art-rise 2.4s var(--mr-motion-ease) var(--art-delay,0s) infinite both; }
.workflow.art-motion-enabled.is-motion-visible .is-current .mr-art-note { animation:mr-art-note 2.8s ease-in-out var(--art-delay,0s) infinite; }
.workflow.art-motion-enabled.is-motion-visible .is-current .mr-art-curve { stroke-dasharray:100; animation:mr-art-draw 2.4s ease-in-out infinite; }
.workflow.art-motion-enabled.is-motion-visible .is-current .mr-art-trend-dot { animation:mr-art-trend 2.4s ease-in-out infinite; }
.workflow.art-motion-enabled.is-motion-visible .is-current .mr-art-spark { animation:mr-art-spark 2.4s ease-in-out infinite; }
@keyframes mr-art-sort { 0%,100% { transform:translate(var(--art-x,0px),var(--art-y,0px)) rotate(var(--art-angle,0deg)); opacity:.45; } 40%,78% { transform:translate(0,0) rotate(0); opacity:1; } }
@keyframes mr-art-draw { 0%,8% { stroke-dashoffset:100; opacity:.2; } 65%,85% { stroke-dashoffset:0; opacity:.8; } 100% { stroke-dashoffset:0; opacity:.2; } }
@keyframes mr-art-check-in { 0%,28% { stroke-dashoffset:100; opacity:0; } 62%,88% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:.2; } }
@keyframes mr-art-bloom { 0%,100% { transform:rotate(-12deg) scale(.88); } 50% { transform:rotate(10deg) scale(1.05); } }
@keyframes mr-art-gate { 0%,100% { transform:scaleX(.92); opacity:.6; } 50% { transform:scaleX(1.07); opacity:1; } }
@keyframes mr-art-output { 0%,100% { transform:translateX(-28px) scaleX(.8); opacity:.25; } 45%,80% { transform:translateX(0) scaleX(1); opacity:1; } }
@keyframes mr-art-flow { 0% { transform:translateX(-40px); opacity:0; } 20%,75% { opacity:1; } 100% { transform:translateX(230px); opacity:0; } }
@keyframes mr-art-back { 0%,100% { transform:rotate(-3deg) translate(-6px,3px); } 50% { transform:rotate(2deg) translate(3px,-4px); } }
@keyframes mr-art-front { 0%,100% { transform:rotate(3deg) translate(3px,-2px); } 50% { transform:rotate(-2deg) translate(-4px,4px); } }
@keyframes mr-art-scan { 0%,100% { transform:translate(-54px,-13px) rotate(-6deg); } 50% { transform:translate(58px,19px) rotate(5deg); } }
@keyframes mr-art-focus { 0%,100% { transform:scale(.8); opacity:.45; } 50% { transform:scale(1.18); opacity:.8; } }
@keyframes mr-art-rise { 0%,100% { transform:scaleY(.52); opacity:.55; } 40%,80% { transform:scaleY(1); opacity:1; } }
@keyframes mr-art-note { 0%,100% { transform:translateY(7px) rotate(-2deg); } 50% { transform:translateY(-7px) rotate(2deg); } }
@keyframes mr-art-trend { 0%,6% { transform:translate(0,0); } 32% { transform:translate(103px,-49px); } 46% { transform:translate(155px,-32px); } 70% { transform:translate(256px,-114px); } 88%,100% { transform:translate(383px,-155px); } }
@keyframes mr-art-spark { 0%,40%,100% { transform:scale(.65) rotate(0); opacity:.25; } 70% { transform:scale(1.2) rotate(90deg); opacity:1; } }
@media(max-width:767px) {
    .workflow.has-workflow-art .workflow-icon { height:128px; }
    .workflow.has-workflow-art .is-current .workflow-icon { height:min(240px,calc(var(--mr-workflow-active-size,440px) * .6)); }
    .workflow.has-workflow-art .is-current .mr-workflow-art { max-height:230px; }
}
@media(prefers-reduced-motion:reduce) {
    .workflow.has-workflow-art .mr-workflow-art { transition:none; }
    .workflow .mr-workflow-art * { animation:none !important; }
}
