/* Original opaque atlas artwork, separated into moving graphic parts. */
.service-motion{pointer-events:none}
.service-motion>.service-motion-graphic{display:none;width:100%;height:100%;overflow:hidden}
:is(.service-art,.intent-art).service-motion.is-motion-ready{background-image:none;clip-path:none}
.service-motion.is-motion-ready>.service-motion-graphic{display:block}
.offering:hover .service-art.service-motion{transform:none}
.intent:hover .intent-art.service-motion{transform:none}
.offering .service-mascot>img{display:block;width:100%;height:100%;object-fit:contain}
.offering .service-mascot.is-motion-ready>img{display:none}
.service-motion .sm-part{transform-box:view-box;animation-duration:7.2s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-iteration-count:infinite;animation-play-state:paused}
.service-motion .sm-web-point,.service-motion .sm-web-scan,.service-motion .sm-flow-transfer,.service-motion .sm-flow-receive,.service-motion .sm-create-route,.service-motion .sm-aio-query,.service-motion .sm-aio-cursor{opacity:0}

@media(prefers-reduced-motion:no-preference){
  .service-motion.is-playing .sm-part{animation-play-state:running}
  .sm-web-lens{animation-name:sm-web-search;transform-origin:72.8% 78.6%}
  .sm-web-point{animation-name:sm-web-point}
  .sm-web-point-2{animation-delay:.35s}
  .sm-web-point-3{animation-delay:.7s}
  .sm-web-scan{animation-name:sm-web-scan}
  .sm-systems-row{animation-name:sm-systems-row;transform-origin:28% 50%}
  .sm-systems-row-2{animation-delay:.3s}
  .sm-systems-row-3{animation-delay:.6s}
  .sm-systems-badge{animation-name:sm-systems-confirm;transform-origin:81% 69.7%;animation-delay:.8s}
  .sm-call-gear{animation-name:sm-call-turn;transform-origin:48.7% 60.3%;animation-duration:10s!important}
  .sm-call-check{animation-name:sm-call-confirm;transform-origin:48.7% 60.3%;animation-duration:10s!important}
  .sm-flow-phone{animation-name:sm-flow-phone;transform-origin:97% 88%}
  .sm-flow-transfer{animation-name:sm-flow-send;transform-origin:22% 41%}
  .sm-flow-receive{animation-name:sm-flow-receive;transform-origin:75% 57%}
  .sm-create-top{animation-name:sm-create-source;transform-origin:52% 29%}
  .sm-create-left{animation-name:sm-create-destination;transform-origin:32% 72%;animation-delay:.7s}
  .sm-create-right{animation-name:sm-create-destination;transform-origin:76% 72%;animation-delay:1s}
  .sm-create-route-left{animation-name:sm-create-route-left}
  .sm-create-route-right{animation-name:sm-create-route-right;animation-delay:.3s}
  .sm-aio-query{animation-name:sm-aio-type;transform-origin:18% 40%}
  .sm-aio-cursor{animation-name:sm-aio-cursor}
  .sm-aio-result{animation-name:sm-aio-answer;transform-origin:54% 78%}
  .service-motion [data-gaze-head]{animation-name:sm-agent-nod;transform-origin:50% 60%}
  .service-motion [data-gaze-pupil]{animation-name:sm-agent-look}
  .service-motion [data-gaze-eye]{animation-name:sm-agent-blink;animation-timing-function:ease-in-out}
}

@keyframes sm-web-search{
  0%,8%,65%,100%{transform:scale(1)}
  24%,42%{transform:scale(1.045)}
}
@keyframes sm-web-point{
  0%,10%,46%,100%{opacity:0}
  18%,31%{opacity:.9}
}
@keyframes sm-web-scan{
  0%,12%{opacity:0;transform:translateX(0)}
  19%{opacity:.65}
  43%{opacity:0;transform:translateX(26px)}
  100%{opacity:0;transform:translateX(26px)}
}
@keyframes sm-systems-row{
  0%,5%,44%,100%{opacity:1;transform:translateX(0)}
  12%{opacity:.18;transform:translateX(-2px)}
  27%{opacity:1;transform:translateX(0)}
}
@keyframes sm-systems-confirm{
  0%,10%,52%,100%{transform:scale(1)}
  20%{transform:scale(1.025)}
  34%{transform:scale(1.08)}
}
@keyframes sm-call-turn{
  0%,8%{transform:rotate(0deg)}
  70%,100%{transform:rotate(360deg)}
}
@keyframes sm-call-confirm{
  0%,54%,82%,100%{transform:scale(1)}
  66%{transform:scale(.94)}
  73%{transform:scale(1.025)}
}
@keyframes sm-flow-phone{
  0%,15%,66%,100%{transform:scale(1)}
  35%,47%{transform:scale(1.045)}
}
@keyframes sm-flow-send{
  0%,6%{opacity:0;transform:scaleX(0)}
  12%{opacity:.9;transform:scaleX(.08)}
  27%{opacity:.9;transform:scaleX(1)}
  36%,100%{opacity:0;transform:scaleX(1)}
}
@keyframes sm-flow-receive{
  0%,26%{opacity:0;transform:scaleX(0)}
  33%{opacity:.9;transform:scaleX(.08)}
  44%{opacity:.9;transform:scaleX(1)}
  56%,100%{opacity:0;transform:scaleX(1)}
}
@keyframes sm-create-source{
  0%,6%,50%,100%{transform:translateY(0)}
  20%{transform:translateY(-2px)}
}
@keyframes sm-create-destination{
  0%,12%,57%,100%{transform:translateY(0)}
  30%{transform:translateY(-2px)}
}
@keyframes sm-create-route-left{
  0%,10%{opacity:0;transform:translate(0,0)}
  15%{opacity:1;transform:translate(0,5px)}
  27%{opacity:1;transform:translate(-21px,5px)}
  35%{opacity:0;transform:translate(-21px,15px)}
  100%{opacity:0;transform:translate(-21px,15px)}
}
@keyframes sm-create-route-right{
  0%,10%{opacity:0;transform:translate(0,0)}
  15%{opacity:1;transform:translate(0,5px)}
  27%{opacity:1;transform:translate(24px,5px)}
  35%{opacity:0;transform:translate(24px,15px)}
  100%{opacity:0;transform:translate(24px,15px)}
}
@keyframes sm-aio-type{
  0%,5%{opacity:0;transform:scaleX(0)}
  12%{opacity:1;transform:scaleX(.1)}
  31%,74%{opacity:1;transform:scaleX(1)}
  85%,100%{opacity:0;transform:scaleX(1)}
}
@keyframes sm-aio-cursor{
  0%,9%{opacity:0;transform:translateX(-30px)}
  12%{opacity:1;transform:translateX(-28px)}
  31%,44%{opacity:1;transform:translateX(0)}
  48%,100%{opacity:0;transform:translateX(0)}
}
@keyframes sm-aio-answer{
  0%,6%,53%,100%{opacity:1;transform:translateY(0)}
  17%,28%{opacity:.2;transform:translateY(3px)}
  43%{opacity:1;transform:translateY(0)}
}
@keyframes sm-agent-nod{
  0%,10%,58%,100%{transform:rotate(0deg)}
  28%{transform:rotate(-4deg)}
  40%{transform:rotate(2deg)}
}
@keyframes sm-agent-look{
  0%,8%,60%,100%{transform:translate(0,0)}
  26%,39%{transform:translate(-9px,-3px)}
}
@keyframes sm-agent-blink{
  0%,20%,24%,68%,72%,100%{transform:scaleY(1)}
  22%,70%{transform:scaleY(.08)}
}

/* Restore the exact static artwork for the OS motion preference. */
@media(prefers-reduced-motion:reduce){
  :is(.service-art,.intent-art).service-motion.is-motion-ready{background-image:url('/web/assets/web-service-icons-solid.webp')}
  .offering :is(.art-4,.art-5,.art-6).is-motion-ready{clip-path:inset(5% 0 0)}
  .intent-art.service-motion.is-motion-ready{clip-path:inset(9% 0 0)}
  .service-motion.is-motion-ready>.service-motion-graphic{display:none}
  .offering .service-mascot.is-motion-ready>img{display:block}
  .service-motion .sm-part{animation:none!important}
}