/* ShopXpert animated feature-card scenes (preview). Pure CSS, paused off-screen by sxcards.js. */
.sxs{position:relative;width:100%;max-width:250px;margin:0 auto;aspect-ratio:3/2}
.sxs-svg{display:block;width:100%;height:100%;overflow:visible}
.sxs-svg *{transform-box:fill-box}
.sxs-off *{animation-play-state:paused!important}
:where(.sxs-svg [class*="sxs-"]){animation-duration:8s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
/* shared */
.sxs-fill{transform-origin:left center;animation-name:sxsFill}
.sxs-live{animation:sxsBlink 1.6s ease-in-out infinite!important}
.sxs-pop{animation-name:sxsPop}
.sxs-float{animation:sxsFloat 4s ease-in-out infinite!important}
.sxs-scan{animation-name:sxsScan;animation-duration:4s!important}
@keyframes sxsFill{0%{transform:scaleX(.08)}70%,100%{transform:scaleX(1)}}
@keyframes sxsBlink{50%{opacity:.25}}
@keyframes sxsPop{0%,60%{transform:scale(0);opacity:0}70%{transform:scale(1.2);opacity:1}78%,100%{transform:scale(1)}}
@keyframes sxsFloat{50%{transform:translateY(-3px)}}
@keyframes sxsScan{0%{transform:translateY(0);opacity:0}15%{opacity:.8}85%{opacity:.8}100%{transform:translateY(100px);opacity:0}}
/* A1 status */
.sxs-run1{animation-name:sxsRun1}
@keyframes sxsRun1{0%,8%{transform:translateX(10px)}22%,38%{transform:translateX(80px)}52%,70%{transform:translateX(150px)}85%,100%{transform:translateX(178px);opacity:0}}
.sxs-cyc1 .sxs-glow,.sxs-cyc1 .sxs-bar{animation-name:sxsAmberGreen}
.sxs-cyc2 .sxs-glow,.sxs-cyc2 .sxs-bar{animation-name:sxsRedGreen}
@keyframes sxsAmberGreen{0%,20%{stroke:#FBBF24;fill:#FBBF24}30%,100%{stroke:#22C55E;fill:#22C55E}}
@keyframes sxsRedGreen{0%,45%{stroke:#F43F5E;fill:#F43F5E}55%,100%{stroke:#22C55E;fill:#22C55E}}
.sxs-m .sxs-glow{fill:none!important}
.sxs-glow{animation-name:sxsGlowPulse;animation-duration:2.4s}
.sxs-cyc1 .sxs-glow{animation-name:sxsAmberGreen,sxsGlowPulse;animation-duration:8s,2.4s}
.sxs-cyc2 .sxs-glow{animation-name:sxsRedGreen,sxsGlowPulse;animation-duration:8s,2.4s}
@keyframes sxsGlowPulse{50%{opacity:.25}}
/* B1 */
.sxs-cart{animation-name:sxsCart}
@keyframes sxsCart{0%,10%{transform:translate(0,0)}45%,55%{transform:translate(44px,25px)}90%,100%{transform:translate(88px,50px);opacity:0}}
.sxs-st1 .sxs-l1{animation:sxsBlink 2.2s ease-in-out infinite!important}
.sxs-st2 .sxs-l1{opacity:.25}.sxs-st2 .sxs-l2{opacity:1!important;animation:sxsBlink 1.4s ease-in-out infinite!important}
.sxs-st3 .sxs-l1{animation-name:sxsLightOff}.sxs-st3 .sxs-l3{animation-name:sxsLightRed}
@keyframes sxsLightOff{0%,25%{opacity:1}30%,65%{opacity:.25}70%,100%{opacity:1}}
@keyframes sxsLightRed{0%,25%{opacity:.25}30%,65%{opacity:1}70%,100%{opacity:.25}}
/* C1 */
.sxs-r1.sxs-fill{animation-duration:6s}.sxs-r2.sxs-fill{animation-duration:9s}.sxs-r3.sxs-fill{animation-duration:12s}
.sxs-pill.sxs-r2 rect{animation-name:sxsAmberGreen}
.sxs-pill.sxs-r3 rect{animation-name:sxsRedGreen;animation-duration:10s}
/* A2 / B2 / C2 margin */
.sxs-run2{animation-name:sxsRun2}
@keyframes sxsRun2{0%,10%{transform:translateX(8px)}30%,45%{transform:translateX(62px)}65%,100%{transform:translateX(96px)}}
.sxs-gr{transform-origin:center bottom;animation-name:sxsG1}
.sxs-g2{animation-name:sxsG2}.sxs-g3{animation-name:sxsG3}
@keyframes sxsG1{0%,5%{transform:scaleY(0);opacity:0}20%,92%{transform:scaleY(1);opacity:1}100%{opacity:0}}
@keyframes sxsG2{0%,25%{transform:scaleY(0);opacity:0}40%,92%{transform:scaleY(1);opacity:1}100%{opacity:0}}
@keyframes sxsG3{0%,45%{transform:scaleY(0);opacity:0}58%,92%{transform:scaleY(1);opacity:1}100%{opacity:0}}
.sxs-cart2{animation-name:sxsCart2}
@keyframes sxsCart2{0%,10%{transform:translate(0,0)}50%,100%{transform:translate(30px,-17px);opacity:0}}
.sxs-grow{transform-origin:center bottom;animation-name:sxsGrow}
.sxs-b2{animation-delay:.4s}.sxs-b3{animation-delay:.8s}
@keyframes sxsGrow{0%,8%{transform:scaleY(.05)}45%,92%{transform:scaleY(1)}100%{transform:scaleY(.05)}}
/* A3 / B3 / C3 decisions */
.sxs-down .sxs-glow,.sxs-down .sxs-bar{animation-name:sxsRedGreen}
.sxs-idle .sxs-glow,.sxs-idle .sxs-bar{animation-name:sxsIdleGreen}
@keyframes sxsIdleGreen{0%,55%{stroke:#94A3B8;fill:#94A3B8}62%,100%{stroke:#22C55E;fill:#22C55E}}
.sxs-down .sxs-glow{animation-name:sxsRedGreen,sxsGlowPulse;animation-duration:8s,1s}
.sxs-ring{transform-origin:center;animation-name:sxsRing}
@keyframes sxsRing{0%,5%{transform:scale(.6);opacity:0}15%{opacity:.8}30%,100%{transform:scale(1.25);opacity:0}}
.sxs-dash{stroke-dashoffset:0;animation-name:sxsDash}
@keyframes sxsDash{0%,20%{opacity:0}28%,62%{opacity:1}70%,100%{opacity:0}}
.sxs-run3{animation-name:sxsRun3}
@keyframes sxsRun3{0%,40%{transform:translateX(0)}58%,100%{transform:translateX(52px)}}
.sxs-card{animation-name:sxsCard}
@keyframes sxsCard{0%,15%{transform:translateY(8px);opacity:0}25%,92%{transform:translateY(0);opacity:1}100%{opacity:0}}
.sxs-up{animation-name:sxsUp;animation-duration:2.6s}
.sxs-u1{animation-delay:.8s}.sxs-u2{animation-delay:1.6s}
@keyframes sxsUp{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(60px,-40px);opacity:0}}
.sxs-draw{stroke-dasharray:120;stroke-dashoffset:0;animation-name:sxsDraw}
@keyframes sxsDraw{0%{stroke-dashoffset:120}55%,100%{stroke-dashoffset:0}}
.sxs-gauge{animation-name:sxsGauge}
@keyframes sxsGauge{0%{stroke-dasharray:0 100}55%,100%{stroke-dasharray:82 100}}
.sxs-alert{animation-name:sxsAlert}.sxs-ok{animation-name:sxsOk}
@keyframes sxsAlert{0%,20%{opacity:0;transform:translateY(4px)}28%,55%{opacity:1;transform:none}62%,100%{opacity:0}}
@keyframes sxsOk{0%,60%{opacity:0;transform:translateY(4px)}68%,95%{opacity:1;transform:none}100%{opacity:0}}
/* reduced motion: still, meaningful frame (all states resolved) */
@media (prefers-reduced-motion:reduce){.sxs-svg *{animation:none!important}.sxs-alert,.sxs-ring,.sxs-up,.sxs-dash{opacity:0}.sxs-run1{transform:translateX(80px)}.sxs-run2{transform:translateX(62px)}.sxs-run3{transform:translateX(52px)}.sxs-cart2{opacity:0}}