[data-mo] {
  --motion-x: var(--mo-x-base);
  --motion-stagger: var(--mo-s-base);
  --motion-delay: 0ms;
}

[data-mo-distance="hair"]  { --motion-x: var(--mo-x-hair);  }
[data-mo-distance="short"] { --motion-x: var(--mo-x-short); }
[data-mo-distance="base"]  { --motion-x: var(--mo-x-base);  }
[data-mo-distance="long"]  { --motion-x: var(--mo-x-long);  }
 
[data-mo-distance="max"]   { --motion-x: var(--mo-x-max);   }

[data-mo-stagger="tight"] { --motion-stagger: var(--mo-s-tight); }
[data-mo-stagger="base"]  { --motion-stagger: var(--mo-s-base);  }
[data-mo-stagger="wide"]  { --motion-stagger: var(--mo-s-wide);  }







.motion-ready [data-mo="settle"][data-mo-state],
.motion-ready [data-mo="settle-stagger"] > [data-mo-state],
.motion-ready [data-mo="settle-stagger"] [data-mo-item][data-mo-state],
.motion-ready [data-mo="column-fill"] > [data-mo-state],
.motion-ready [data-mo="column-fill"] [data-mo-item][data-mo-state],
.motion-ready [data-mo="advance"] [data-mo-item][data-mo-state],
.motion-ready [data-mo="scale-mark"] [data-mo-item][data-mo-state] {
  transition-property: opacity, translate;
  transition-duration: var(--mo-d-base);
  transition-timing-function: var(--mo-e-enter);
  transition-delay: var(--motion-delay);
  will-change: opacity, translate;
}

.motion-ready [data-mo-state="armed"] {
  opacity: 0;
  translate: 0 var(--motion-x, var(--mo-x-base));
}

.motion-ready [data-mo-state="run"],
.motion-ready [data-mo-state="done"] {
  opacity: 1;
  translate: none;
}



.motion-ready [data-mo-state="done"] { will-change: auto; }







.motion-ready [data-mo="rule-draw"] {
  transform-origin: left center;
  transition-property: scale;
  transition-duration: var(--mo-d-long);
  transition-timing-function: var(--mo-e-move);
  transition-delay: var(--motion-delay);
}
.motion-ready [data-mo="rule-draw"][data-mo-state="armed"] { opacity: 1; translate: none; scale: 0 1; }
.motion-ready [data-mo="rule-draw"][data-mo-state="run"],
.motion-ready [data-mo="rule-draw"][data-mo-state="done"] { scale: 1 1; }

 
.motion-ready [data-mo="rule-draw"][data-mo-axis="y"] { transform-origin: center top; }
.motion-ready [data-mo="rule-draw"][data-mo-axis="y"][data-mo-state="armed"] { scale: 1 0; }
.motion-ready [data-mo="rule-draw"][data-mo-axis="y"][data-mo-state="run"],
.motion-ready [data-mo="rule-draw"][data-mo-axis="y"][data-mo-state="done"] { scale: 1 1; }



[data-mo="column-fill"] { --motion-stagger: var(--mo-s-tight); }







[data-mo="count-to"] {
  font-variant-numeric: tabular-nums lining;
  font-feature-settings: "tnum" 1, "cv05" 1;
   
  display: inline-block;
  min-inline-size: var(--motion-count-w, auto);
  text-align: inherit;
}




.motion-ready [data-mo="gauge-fill"] .art-gauge__fill,
.motion-ready [data-mo="gauge-fill"][data-mo-fill] {
  transform-origin: left center;
  transition-property: scale;
  transition-duration: var(--mo-d-read);
  transition-timing-function: var(--mo-e-settle);
}
.motion-ready [data-mo="gauge-fill"][data-mo-state="armed"] .art-gauge__fill { scale: 0 1; }
.motion-ready [data-mo="gauge-fill"][data-mo-state="run"] .art-gauge__fill,
.motion-ready [data-mo="gauge-fill"][data-mo-state="done"] .art-gauge__fill { scale: var(--motion-gauge, 1) 1; }

.art-gauge { block-size: var(--art-space-1); background: var(--art-surface-chip); }
.art-gauge__fill { block-size: 100%; background: var(--art-action-bg); transform-origin: left center; }



[data-mo="scale-mark"] { --motion-stagger: var(--mo-s-tight); }







[data-mo="wipe-compare"] .art-compare__clip,
[data-mo="compare-wipe"] .art-compare__clip {
  clip-path: inset(0 calc(100% - var(--motion-compare, 50%)) 0 0);
  transition: none;
}

 
[data-mo-snap="true"] .art-compare__clip {
  transition: clip-path var(--mo-d-long) var(--mo-e-move);
}



@keyframes mo-nudge {
  0%   { translate: 0 0; }
  50%  { translate: var(--mo-x-base) 0; }
  100% { translate: 0 0; }
}

.motion-ready .art-compare__handle[data-mo-nudge="play"] {
  animation-name: mo-nudge;
  animation-duration: calc(var(--mo-d-considered) * 2);
  animation-timing-function: var(--mo-e-move);
  animation-iteration-count: 1;    
  animation-fill-mode: none;
}

 
.art-compare__handle {
  min-inline-size: var(--art-space-7);
  min-block-size: var(--art-space-7);
  touch-action: pan-y;    
}




[data-mo="swap-hold"] { display: grid; }
[data-mo="swap-hold"] > [data-mo-layer] { grid-area: 1 / 1; }

.motion-ready [data-mo="swap-hold"] > [data-mo-layer] {
  transition-property: opacity;
  transition-duration: var(--mo-d-base);
  transition-timing-function: var(--mo-e-enter);
}
.motion-ready [data-mo="swap-hold"] > [data-mo-layer][aria-hidden="true"] {
  opacity: 0;
  transition-duration: var(--mo-d-quick);
  transition-timing-function: var(--mo-e-exit);
  pointer-events: none;
}
[data-mo="swap-hold"] > [data-mo-layer][aria-hidden="true"] { pointer-events: none; }



[data-mo="swap-hold"] > [data-mo-layer][aria-hidden="true"] { visibility: hidden; }
.motion-ready [data-mo="swap-hold"] > [data-mo-layer][aria-hidden="true"] { visibility: visible; }






[data-mo="advance"] { --motion-stagger: var(--mo-s-wide); }




.art-conductor__run {
  transform-box: fill-box;
  transform-origin: var(--motion-run-origin, left center);
  scale: var(--motion-run-scale, 1 1);
}

.motion-ready .art-conductor__run {
  transition: scale var(--mo-d-long) var(--mo-e-move);
}


.motion-ready .art-conductor[data-mode="scrub"] .art-conductor__run {
  transition-timing-function: var(--mo-e-scrub);
  transition-duration: 0ms;
}

.art-conductor__arc {
  stroke-dasharray: var(--motion-arc-len, 0);
  stroke-dashoffset: var(--motion-arc-off, 0);
}
.motion-ready .art-conductor__arc {
  transition: stroke-dashoffset var(--mo-d-long) var(--mo-e-move);
}
.motion-ready .art-conductor[data-mode="scrub"] .art-conductor__arc {
  transition-timing-function: var(--mo-e-scrub);
  transition-duration: 0ms;
}



.art-conductor:not([data-mode]) .art-conductor__run { scale: 1 1; }
.art-conductor:not([data-mode]) .art-conductor__arc { stroke-dashoffset: 0; }




.motion-ready [data-mo="timeline-step"] [data-mo-item] {
  transition-property: color, border-color;
  transition-duration: var(--mo-d-base);
  transition-timing-function: var(--mo-e-move);
}
[data-mo="timeline-step"] [data-mo-item][data-state="past"] { color: var(--art-text-muted); }
[data-mo="timeline-step"] [data-mo-item][data-state="current"] { color: var(--art-text-primary); }










.art-pin { position: absolute; translate: -50% -50%; }
.art-pin__ring {
  position: absolute;
  inset: 0;
  border: var(--art-border-hair) solid currentColor;
  border-radius: var(--art-radius-dot);
  pointer-events: none;
}

.motion-ready [data-mo="pin-set"] .art-pin__ring {
  transition-property: scale, opacity;
  transition-duration: var(--mo-d-considered);
  transition-timing-function: var(--mo-e-settle);
  transition-delay: var(--motion-delay);
}
.motion-ready [data-mo="pin-set"][data-mo-state="armed"] .art-pin__ring { scale: 2.4; opacity: 0; }
.motion-ready [data-mo="pin-set"][data-mo-state="run"] .art-pin__ring,
.motion-ready [data-mo="pin-set"][data-mo-state="done"] .art-pin__ring { scale: 1; opacity: 1; }

.motion-ready [data-mo="pin-set"] .art-pin__mark {
  transition-property: opacity, translate;
  transition-duration: var(--mo-d-base);
  transition-timing-function: var(--mo-e-enter);
  transition-delay: calc(var(--motion-delay) + var(--mo-d-considered));
}
.motion-ready [data-mo="pin-set"][data-mo-state="armed"] .art-pin__mark { opacity: 0; translate: 0 var(--mo-x-hair); }

 




[data-mo="frame-in"] { overflow: hidden; position: relative; }
[data-mo="frame-in"] .art-frame-in__layer {
  transform-origin: var(--motion-frame-origin, 50% 50%);
  scale: var(--motion-frame-scale, 1);
  translate: var(--motion-frame-x, 0) var(--motion-frame-y, 0);
}
.motion-ready [data-mo="frame-in"] .art-frame-in__layer {
  transition: scale var(--mo-d-considered) var(--mo-e-move),
              translate var(--mo-d-considered) var(--mo-e-move);
}
 
[data-mo="frame-in"] .art-frame-in__locator { position: absolute; opacity: 1 !important; }




.motion-ready .art-accordion__panel-inner {
  transition: opacity var(--mo-d-base) var(--mo-e-enter);
  transition-delay: calc(var(--mo-d-considered) * 0.6);
}
.motion-ready .art-accordion__item:not([data-open="true"]) .art-accordion__panel-inner {
  opacity: 0;
  transition-delay: 0ms;
}







.motion-ready main {
  transition: opacity var(--mo-d-tap) var(--mo-e-exit);
}
.motion-ready[data-page-exit="true"] main { opacity: 0; }







@media (prefers-reduced-motion: reduce) {
  html.motion-ready,
  html {
     
  }

  .motion-ready *,
  .motion-ready *::before,
  .motion-ready *::after,
  * , *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

   
  [data-mo-state] {
    opacity: 1 !important;
    translate: none !important;
  }
  [data-mo="rule-draw"],
  .art-conductor__run { scale: 1 1 !important; }
  .art-conductor__arc { stroke-dashoffset: 0 !important; }
  [data-mo="gauge-fill"] .art-gauge__fill { scale: var(--motion-gauge, 1) 1 !important; }
  [data-mo="pin-set"] .art-pin__ring { scale: 1 !important; opacity: 1 !important; }
  [data-mo="pin-set"] .art-pin__mark { opacity: 1 !important; translate: none !important; }
  .art-accordion__panel-inner { opacity: 1 !important; }
  main { opacity: 1 !important; }

  

  .art-compare__handle[data-mo-nudge] { animation: none !important; }

   
  .art-header[data-condensed="true"] .art-header__inner { min-block-size: var(--comp-header-h); }

   
  :focus-visible {
    outline: var(--art-border-emphasis) solid var(--art-focus-ring) !important;
    outline-offset: var(--art-border-emphasis) !important;
  }
}



html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0ms !important;
}
html[data-motion="off"] [data-mo-state] { opacity: 1 !important; translate: none !important; }
html[data-motion="off"] [data-mo="rule-draw"],
html[data-motion="off"] .art-conductor__run { scale: 1 1 !important; }
html[data-motion="off"] .art-conductor__arc { stroke-dashoffset: 0 !important; }
html[data-motion="off"] .art-accordion__panel-inner { opacity: 1 !important; }
html[data-motion="off"] main { opacity: 1 !important; }

 
html[data-motion="save-data"] [data-mo-state] { opacity: 1 !important; translate: none !important; }