/* The demo amount, trend and staggered bars share an 8.2-second rhythm. */
[data-commerce-motion]{--commerce-cycle:8200ms}
[data-commerce-motion] .mock-stats b{white-space:nowrap;font-variant-numeric:tabular-nums}
[data-commerce-motion] .stat-symbol{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0}
[data-commerce-motion] .commerce-trend{width:32px;height:32px}
[data-commerce-motion].compact .stat-symbol{width:34px;height:34px}
[data-commerce-motion].compact .commerce-trend{width:28px;height:28px}
[data-commerce-ready="true"] .mini-chart>i{transform-origin:50% 100%;animation:commerce-bar-rise var(--commerce-cycle) cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(var(--bar-index)*65ms);animation-play-state:paused;animation-fill-mode:both}
[data-commerce-ready="true"] .stat-symbol{animation:commerce-trend-lift var(--commerce-cycle) ease-in-out infinite;animation-play-state:paused}
[data-commerce-motion].is-commerce-running :is(.mini-chart>i,.stat-symbol){animation-play-state:running}
@keyframes commerce-bar-rise{0%,3%{transform:scaleY(.025);opacity:0}8%{opacity:var(--bar-alpha)}25%,82%{transform:scaleY(1);opacity:var(--bar-alpha)}90%,99%{transform:scaleY(1);opacity:0}100%{transform:scaleY(.025);opacity:0}}
@keyframes commerce-trend-lift{0%,100%{transform:translate(-2px,2px);opacity:.6}16%{transform:translate(5px,-5px);opacity:1}32%,78%{transform:translate(0,0);opacity:1}92%{transform:translate(-2px,2px);opacity:.6}}
@media(prefers-reduced-motion:reduce){[data-commerce-ready="true"] :is(.mini-chart>i,.stat-symbol){animation:none!important;transform:none!important}}