/* Layered vector illustrations. Continuous, gently paced cycles; each icon can be paused. */
.clarity .service-motion{width:105px;height:105px;padding:3px;border:0;background:transparent;border-radius:8px;flex-shrink:0;cursor:pointer;display:block;color:inherit}
.service-motion svg{display:block;width:100%;height:100%;overflow:visible}
.service-motion:focus-visible{outline:2px solid #8b1e2d;outline-offset:4px;background:#f8f2f3}
.service-motion .flow{stroke-dasharray:40;stroke-dashoffset:40}
.service-motion .cell,.service-motion .data-packet,.service-motion .data-link{opacity:0}
.service-motion .ruler,.service-motion .wrench,.service-motion .box-lid,.service-motion .database-tier,.service-motion .database-top{transform-box:view-box;transform-origin:120px 150px}
:is(.service,[data-motion]).is-animating .ruler{animation:pack-ruler 4.5s ease-in-out infinite}
:is(.service,[data-motion]).is-animating .wrench{animation:pack-wrench 4.5s ease-in-out infinite}
:is(.service,[data-motion]).is-animating .box-lid{animation:lid-settle 4.5s ease-in-out infinite;transform-origin:36px 119px}
/* One shared six-second clock: highlight a node, trace its outgoing arrow,
   then transfer the highlight to the next node at each quarter-cycle. */
.service-motion .workflow-node rect{stroke:#939495;fill:white}
.service-motion .node-a rect{stroke:#8B1E2D;fill:#F8F2F3}
:is(.service,[data-motion]).is-animating .workflow-node rect{animation:workflow-active 6s steps(1,end) infinite}
:is(.service,[data-motion]).is-animating .flow{animation:workflow-arrow 6s linear infinite}
:is(.service,[data-motion]).is-animating .node-a rect,:is(.service,[data-motion]).is-animating .flow-a{animation-delay:0s}
:is(.service,[data-motion]).is-animating .node-b rect,:is(.service,[data-motion]).is-animating .flow-b{animation-delay:-4.5s}
:is(.service,[data-motion]).is-animating .node-c rect,:is(.service,[data-motion]).is-animating .flow-c{animation-delay:-3s}
:is(.service,[data-motion]).is-animating .node-d rect,:is(.service,[data-motion]).is-animating .flow-d{animation-delay:-1.5s}
:is(.service,[data-motion]).is-animating .database-top{animation:stack-top 4.5s ease-in-out infinite}
:is(.service,[data-motion]).is-animating .database-tier{animation:stack-tier 4.5s ease-in-out infinite}
:is(.service,[data-motion]).is-animating .data-link{animation:show-link 4.5s ease-in-out infinite}
:is(.service,[data-motion]).is-animating .data-packet{animation:transfer 4.5s ease-in-out infinite}
:is(.service,[data-motion]).is-animating .cell{animation:fill-cell 4.5s ease-in-out infinite}
:is(.service,[data-motion]).is-animating .cell-a{animation-delay:1s}:is(.service,[data-motion]).is-animating .cell-b{animation-delay:1.15s}:is(.service,[data-motion]).is-animating .cell-c{animation-delay:1.3s}
@keyframes pack-ruler{0%,85%,100%{transform:translate(0,0) rotate(0)}15%{transform:translate(6px,-24px) rotate(8deg)}35%,60%{transform:translate(-4px,21px) rotate(-8deg)}}
@keyframes pack-wrench{0%,85%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(-9px,-20px) rotate(-10deg)}40%,60%{transform:translate(5px,25px) rotate(8deg)}}
@keyframes lid-settle{0%,60%,100%{transform:rotate(0)}20%{transform:rotate(-4deg)}}
@keyframes workflow-active{0%,24.999%{stroke:#8B1E2D;fill:#F8F2F3}25%,100%{stroke:#939495;fill:white}}
@keyframes workflow-arrow{0%,8%{stroke-dashoffset:40;opacity:0}9%{stroke-dashoffset:40;opacity:1}24%{stroke-dashoffset:0;opacity:1}25%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes stack-top{0%,45%,100%{transform:translateY(0)}20%{transform:translateY(-16px)}}
@keyframes stack-tier{0%,45%,100%{transform:translateY(0)}20%{transform:translateY(-8px)}}
@keyframes show-link{0%,20%,90%,100%{opacity:0}35%,75%{opacity:1}}
@keyframes transfer{0%,30%{opacity:0;transform:translateX(0)}35%{opacity:1;transform:translateX(0)}55%{opacity:1;transform:translateX(23px)}60%,100%{opacity:0;transform:translateX(23px)}}
@keyframes fill-cell{0%,40%,95%,100%{opacity:0}55%,80%{opacity:1}}
:is(.service,[data-motion]).is-paused svg *{animation-play-state:paused!important}
@media(max-width:900px){.clarity .service-motion{margin-bottom:15px}}
@media(max-width:540px){.clarity .service-motion{width:85px;height:85px;margin:0}}
@media(prefers-reduced-motion:reduce){:is(.service,[data-motion]).is-animating svg *{animation:none!important}.service-motion .flow{stroke-dashoffset:0}.service-motion .cell{opacity:1}}