/* Motion is concentrated on the artwork; copy and controls stay steady. */
.hero-art { isolation:isolate; }
.workspace-art { animation:workspace-live 6s cubic-bezier(.45,0,.55,1) infinite; transform-origin:50% 75%; }
.scene-label { animation:workspace-label 4.8s ease-in-out infinite; }
.label-sales { animation-delay:-.8s; }
.label-digital { animation-delay:-3.2s; }
.spark { animation:workspace-spin 9s linear infinite; }
.spark-two { animation-direction:reverse; animation-duration:13s; }
.orbit:after { border-color:#2859e84a; border-width:2px; animation:workspace-spin 24s linear infinite; }
.motion-network { position:absolute; inset:0; width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1; }
.motion-track { fill:none;stroke:#2859e82b;stroke-width:1.5; }
.motion-signal { fill:none;stroke:#2859e8;stroke-width:3;stroke-linecap:round;stroke-dasharray:18 112;animation:workspace-signal 5s linear infinite; }
.motion-signal.secondary { stroke:#8caa28;stroke-dasharray:12 90;animation-duration:6s;animation-direction:reverse; }
.motion-node { fill:#2859e8;transform-box:fill-box;transform-origin:center;animation:workspace-node 2.4s ease-in-out infinite; }
.motion-node.secondary { fill:#b0c64f;animation-delay:-1.2s; }
.motion { background:white;border:1px solid #d8dfd9;border-radius:20px;padding:7px 12px;font-size:11px;white-space:nowrap; }
.motion:hover { border-color:#2859e8; }
.sales-diagram i { animation:workspace-connect 4s ease-in-out infinite;animation-play-state:paused; }
.sales-diagram i:nth-child(2) { animation-delay:-.45s; }
.sales-diagram i:nth-child(3) { animation-delay:-.9s; }
.digital-diagram i { animation:workspace-tile 4s ease-in-out infinite;animation-play-state:paused; }
.digital-diagram i:nth-child(2) { animation-delay:-1.3s; }
.digital-diagram i:nth-child(3) { animation-delay:-2.6s; }
.motion-in-view .service-diagram i { animation-play-state:running; }
.paused *,.paused *:before,.paused *:after { animation-play-state:paused!important; }
@keyframes workspace-live {
  0%,100% { transform:translate3d(0,7px,0) rotate(-1.2deg); }
  50% { transform:translate3d(0,-16px,0) rotate(1.2deg); }
}
@keyframes workspace-label {
  0%,100% { translate:0 6px;rotate:-2deg; }
  50% { translate:0 -12px;rotate:2deg; }
}
@keyframes workspace-spin { to { rotate:360deg; } }
@keyframes workspace-signal { to { stroke-dashoffset:-520; } }
@keyframes workspace-node { 0%,100% { scale:1; } 50% { scale:1.65; } }
@keyframes workspace-connect { 0%,100% { translate:0 0; } 50% { translate:17px -8px; } }
@keyframes workspace-tile { 0%,100% { translate:0 0; } 50% { translate:0 -16px; } }
@media(max-width:700px) {
  .motion-network { inset:2% 0 0; }
  .motion { font-size:9px;padding:6px 9px; }
  .art-footer { padding-top:8px; }
  @keyframes workspace-live {
    0%,100% { transform:translate3d(0,5px,0) rotate(-1deg); }
    50% { transform:translate3d(0,-11px,0) rotate(1deg); }
  }
}
@media(prefers-reduced-motion:reduce) {
  .workspace-art,.scene-label,.spark,.orbit:after,.motion-signal,.motion-node,.service-diagram i { animation:none!important; }
}