/* Actual Amazi product image and a geometric battery-swap process diagram. */
.moto-product{position:relative;aspect-ratio:1.08;background:var(--cloud);overflow:hidden;border-radius:var(--radius)}
.moto-product img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;mix-blend-mode:multiply}
.swap-visual{position:relative}
.swap-visual .swap-stage{height:340px;background:#e7f0f6}
.swap-road{position:absolute;left:5%;right:5%;bottom:54px;height:1px;background:#b1c8d6}
.swap-visual .moving-moto{width:220px;height:165px;left:4%;top:auto;bottom:40px;overflow:hidden;mix-blend-mode:multiply;transition:left 1.6s var(--ease)}
.swap-visual .moving-moto img{position:absolute;width:100%;height:auto;max-width:none;left:0;bottom:-18px}
.swap-visual .swap-stage[data-step="0"] .moving-moto{left:4%;transition:none}
.swap-visual .swap-stage[data-step="1"] .moving-moto{left:18%}
.swap-visual .swap-stage[data-step="2"] .moving-moto{left:110%}
.swap-visual .swap-cabinet{left:69%;top:auto;bottom:54px;width:184px;height:214px;padding:18px 14px 12px;border:1px solid #7da4ba;border-radius:12px;background:#f8fbfd;box-shadow:0 10px 22px rgba(16,47,67,.08)}
.swap-visual .cabinet-brand{font-size:19px;letter-spacing:-.04em;color:var(--ink);margin-bottom:2px}
.cabinet-label{text-align:center;font-size:10px;color:var(--muted);line-height:1.4;margin-bottom:18px}
.swap-visual .cabinet-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.battery-bay{height:110px;background:#dce8f0;border-radius:6px;display:flex;justify-content:center;align-items:center;position:relative}
.swap-stage .cabinet-slots span{background:transparent;height:auto}
.swap-stage .cabinet-slots span:after{content:none}
.traction-battery{position:relative;width:30px;height:72px;border:1px solid #236185;border-radius:5px;background:var(--blue)}
.traction-battery .battery-handle{position:absolute;left:6px;right:6px;top:-11px;height:12px!important;border:3px solid #236185;border-bottom:0;border-radius:4px 4px 0 0;background:transparent!important}
.traction-battery .battery-bolt{position:absolute;left:9px;top:18px;width:12px;height:22px!important;background:var(--white)!important;clip-path:polygon(55% 0,0 57%,42% 57%,25% 100%,100% 38%,58% 38%,78% 0)}
.traction-battery .battery-charge{position:absolute;left:5px;right:5px;bottom:7px;height:3px!important;background:#a4dff7!important;border-radius:1px}
.battery-bay:first-child .traction-battery{background:#688898;border-color:#526f80}
.cabinet-foot{height:5px;background:#bed0dc;border-radius:2px;margin:12px -4px 0}
.transfer-pack{position:absolute;width:30px;height:72px;opacity:0;z-index:3}
.transfer-pack.spent{left:39%;top:47%}
.transfer-pack.charged{left:67%;top:43%}
.transfer-pack.spent .traction-battery{background:#688898;border-color:#526f80}
.swap-visual .swap-stage[data-step="1"] .spent{animation:pack-return 2.1s var(--ease) both}
.swap-visual .swap-stage[data-step="1"] .charged{animation:pack-replace 2.1s var(--ease) both}
.swap-stage[data-playing="false"] .transfer-pack{animation-play-state:paused!important}
@keyframes pack-return{0%{opacity:0;transform:translate(-40px,44px)}15%{opacity:1}60%{opacity:1;transform:translate(95px,-10px)}78%,100%{opacity:0;transform:translate(95px,-10px)}}
@keyframes pack-replace{0%,45%{opacity:0;transform:translate(0,0)}55%{opacity:1;transform:translate(0,0)}85%{opacity:1;transform:translate(-100px,44px)}100%{opacity:0;transform:translate(-100px,44px)}}
.swap-visual .journey-check{top:auto;bottom:80px;right:7%;padding:9px}
.swap-pause{position:absolute;top:12px;right:12px;z-index:5;display:grid;place-items:center;width:44px;height:44px;background:rgba(255,255,255,.88);color:var(--blue-deep);border-radius:50%}
.swap-pause svg{width:18px;height:18px}
.swap-pause:hover{background:var(--white)}
@media(max-width:699px){
 .swap-visual .swap-stage{height:280px}
 .swap-visual .moving-moto{width:150px;height:112px;bottom:42px}
 .swap-visual .moving-moto img{bottom:-12px}
 .swap-visual .swap-stage[data-step="1"] .moving-moto{left:5%}
 .swap-visual .swap-cabinet{left:72%;width:124px;height:174px;padding:13px 9px 9px}
 .swap-visual .cabinet-brand{font-size:16px}
 .cabinet-label{font-size:8px;margin-bottom:14px}
 .swap-visual .cabinet-slots{gap:5px}
 .battery-bay{height:86px}
 .traction-battery{width:24px;height:57px}
 .traction-battery .battery-handle{left:5px;right:5px;top:-9px;height:10px!important;border-width:2px}
 .traction-battery .battery-bolt{left:7px;top:14px;width:10px;height:18px!important}
 .transfer-pack.spent{left:37%;top:45%}
 .transfer-pack.charged{left:68%;top:41%}
 @keyframes pack-return{0%{opacity:0;transform:translate(-22px,35px)}15%{opacity:1}60%{opacity:1;transform:translate(62px,-8px)}78%,100%{opacity:0;transform:translate(62px,-8px)}}
 @keyframes pack-replace{0%,45%{opacity:0;transform:translate(0,0)}55%{opacity:1;transform:translate(0,0)}85%{opacity:1;transform:translate(-62px,35px)}100%{opacity:0;transform:translate(-62px,35px)}}
 .swap-visual .journey-check{bottom:90px}
}
@media(prefers-reduced-motion:reduce){
 .swap-visual .moving-moto{transition:none}
 .swap-visual .transfer-pack{animation:none!important}
 .swap-visual .swap-stage[data-step="1"] .charged{opacity:1}
}