:root{--cx-motion-ease:cubic-bezier(.16,.78,.24,1)}

.cx-motion-screen-enter{
  animation:cxMotionScreenEnter .54s var(--cx-motion-ease) both
}
.cx-motion-deploy-item{
  animation:cxMotionDeployItem .52s var(--cx-motion-ease) both;
  animation-delay:calc(var(--cx-motion-index,0) * 34ms)
}
.cx-motion-rise-item{
  animation:cxMotionRiseItem .46s var(--cx-motion-ease) both;
  animation-delay:calc(var(--cx-motion-index,0) * 42ms)
}
.cx-motion-panel-enter{animation:cxMotionPanelEnter .48s var(--cx-motion-ease) both}

@keyframes cxMotionScreenEnter{
  from{opacity:0;transform:translateY(16px);filter:blur(3px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes cxMotionDeployItem{
  0%{opacity:0;transform:translateX(-38px) scale(.95);filter:blur(2px)}
  60%{opacity:1;transform:translateX(5px) scale(1.01);filter:none}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes cxMotionRiseItem{
  from{opacity:0;transform:translateY(26px) scale(.96)}
  to{opacity:1;transform:none}
}
@keyframes cxMotionPanelEnter{
  from{opacity:0;transform:translateX(34px)}
  to{opacity:1;transform:none}
}

body.cx-screen-motion-active .cx-sidebar .cx-nav.active::after{
  animation:cxMotionNavPulse .52s ease both
}
@keyframes cxMotionNavPulse{
  0%{opacity:0;transform:translateY(-50%) scaleY(.15)}
  55%{opacity:1;transform:translateY(-50%) scaleY(1.24)}
  100%{opacity:1;transform:translateY(-50%) scaleY(1)}
}

@media(prefers-reduced-motion:reduce){
  .cx-motion-screen-enter,.cx-motion-deploy-item,.cx-motion-rise-item,.cx-motion-panel-enter,
  body.cx-screen-motion-active .cx-sidebar .cx-nav.active::after{
    animation:none!important
  }
}