/* Motion has its own transform channels; slide composition stays intact. */
.motion-float {
  --float-y:-9px;
  --float-x:2px;
  --float-turn:.45deg;
}
body[data-theme=lively] .motion-float {
  animation: slide-float var(--float-duration,7.5s) ease-in-out infinite;
  animation-delay:var(--float-delay,0s);
  animation-play-state:paused;
}
body[data-theme=lively] .motion-float.motion-visible {animation-play-state:running}
body[data-theme=lively] .motion-float:hover {animation-play-state:paused}
@keyframes slide-float {
  0%,100% {translate:0 0;rotate:0deg}
  50% {translate:var(--float-x) var(--float-y);rotate:var(--float-turn)}
}
.motion-depth {
  transform:perspective(1500px) rotateX(var(--pointer-rx,0deg)) rotateY(var(--pointer-ry,0deg));
  transition:transform 650ms cubic-bezier(.2,.65,.25,1);
  transform-origin:50% 55%;
}
.v-stage .motion-photo img {
  animation:photo-drift 16s ease-in-out infinite;
  animation-play-state:paused;
  transform-origin:55% 55%;
}
.v-stage .motion-photo.motion-visible img {animation-play-state:running}
@keyframes photo-drift {0%,100%{scale:1.015}50%{scale:1.055}}
.motion-chart.motion-chart-ready .v-bars i {
  transform-origin:50% 100%;
  animation:chart-grow 1.15s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--bar-order,0) * 110ms);
}
@keyframes chart-grow {from{scale:1 .08;opacity:.45}to{scale:1 1;opacity:1}}
.motion-roadmap.motion-visible .v-stages>div>span {
  animation:step-breathe 7.5s ease-in-out infinite;
  animation-delay:calc(var(--step-order,0) * 850ms);
}
@keyframes step-breathe {0%,15%,55%,100%{scale:1}32%{scale:1.14}}
.motion-toolbar {display:flex;justify-content:center;margin-top:23px}
.motion-toggle {
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:8px 15px;border:1px solid #e5e8dc;border-radius:99px;
  background:#fff;color:#67715c;font:inherit;font-size:12px;
  transition:border-color .2s,color .2s;
}
.motion-toggle:hover {border-color:#a6b68c;color:#34492b}
.motion-toggle-icon {width:12px;height:12px;display:flex;align-items:center;justify-content:center;gap:3px}
.motion-toggle-icon:before,.motion-toggle-icon:after {content:'';display:block;width:3px;height:10px;background:currentColor;border-radius:1px}
.motion-toggle[aria-pressed=true] .motion-toggle-icon:before {width:0;height:0;background:none;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor;border-radius:0}
.motion-toggle[aria-pressed=true] .motion-toggle-icon:after {display:none}
body.motion-paused *,body.motion-paused *:before,body.motion-paused *:after,
body.motion-background *,body.motion-background *:before,body.motion-background *:after {animation-play-state:paused!important}
body.motion-paused .motion-depth {transform:none}
body.motion-paused .v-photo {transition:none}
@media(max-width:800px) {
  .motion-float {--float-y:-5px;--float-x:0px;--float-turn:0deg}
  .motion-depth {transform:none;transition:none}
}
@media(max-width:580px) {
  .motion-float {--float-y:-3px}
  .motion-toolbar {margin-top:17px}
}
@media(prefers-reduced-motion:reduce) {
  .motion-float,.motion-depth,.motion-chart,.motion-roadmap {animation:none!important;translate:none!important;rotate:none!important;transform:none!important}
  .motion-photo img {animation:none!important;scale:1!important}
  .motion-toolbar {display:none}
}

body.motion-paused .motion-chart .v-bars i {animation:none!important;scale:1;opacity:1}
/* Pausing before a reload must not leave entrance effects half-transparent. */
body.motion-paused *:not(.motion-float),body.motion-paused *:before,body.motion-paused *:after {animation:none!important}