:root{--ease-nexo:cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .button{transition:background-color .25s ease,transform .35s var(--ease-nexo)}
  .button span,header nav a span,.hero-foot a span,footer a span{display:inline-block;transition:transform .3s var(--ease-nexo)}
  .button:active{transform:scale(.98)}
  header nav a,.hero-foot a,footer a{position:relative}
  header nav a:after,.hero-foot a:after,footer a:after{content:"";position:absolute;bottom:5px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-nexo)}
  header nav a:focus-visible:after,.hero-foot a:focus-visible:after,footer a:focus-visible:after{transform:scaleX(1)}
  .service-overview a{transition:background-color .25s ease}
  .motion-line .connector{transform-origin:left;animation:nexo-line 1s var(--ease-nexo) both}
  .motion-line .connector ~ .connector{animation-delay:.16s}
  .service-aside.motion-line svg path{stroke-dasharray:540;animation:nexo-draw 1.2s var(--ease-nexo) both}
  .service-aside.motion-line svg circle{transform-box:fill-box;transform-origin:center;animation:nexo-node .7s var(--ease-nexo) both}
  .service-aside.motion-line svg circle:nth-child(3){animation-delay:.15s}
  .service-aside.motion-line svg circle:nth-child(4){animation-delay:.25s}
  @keyframes nexo-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes nexo-draw{from{stroke-dashoffset:540}to{stroke-dashoffset:0}}
  @keyframes nexo-node{from{transform:scale(.65);opacity:.2}to{transform:scale(1);opacity:1}}
  @supports(animation-timeline:scroll()){
    body:before{content:"";position:fixed;top:0;left:0;right:0;height:2px;background:#88887b;z-index:5;pointer-events:none;transform-origin:left;animation:nexo-line linear both;animation-timeline:scroll(root block)}
  }
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .button:hover{transform:translateY(-2px)}
  .button:hover span,header nav a:hover span{transform:translate(3px,-3px)}
  .hero-foot a:hover span{transform:translateY(4px)}
  footer a:hover span{transform:translateY(-4px)}
  header nav a:hover:after,.hero-foot a:hover:after,footer a:hover:after{transform:scaleX(1)}
  .service-overview a:hover{background-color:var(--surface)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}