/* Four short service stories. Final frame stays still until hovered/focused again. */
.pro-site .opening-screen .service-motion-card .motion-scene{animation:none;isolation:isolate}
.pro-site .opening-screen .service-motion-card .scene-primary{position:relative;z-index:2;transform:none;transition:none}
.pro-site .opening-screen .service-motion-card:hover .scene-primary{transform:none}
.pro-site .opening-screen .rescue-road{position:absolute;bottom:5px;left:-5px;width:220px;height:6px;border-radius:50%;background:#b66f3433;z-index:0}
.pro-site .opening-screen .rescue-road:after{content:'';position:absolute;left:12px;right:9px;top:2px;height:1px;background:repeating-linear-gradient(90deg,#ffe9b4 0 12px,transparent 12px 28px)}
.pro-site .opening-screen .rescue-beacon{position:absolute;left:66%;top:8%;width:24px;height:10px;border-radius:50%;background:#ffdb6d88;filter:blur(3px);opacity:.25;z-index:3;pointer-events:none}
.pro-site .opening-screen .rescue-lightbeam{position:absolute;right:-17px;bottom:31px;width:42px;height:23px;background:linear-gradient(90deg,#ffe59e44,transparent);clip-path:polygon(0 35%,100% 0,100% 100%,0 65%);opacity:.25;z-index:0}
.pro-site .opening-screen .scene-playing.urgent-choice .scene-primary{animation:rescue-arrive 3.6s cubic-bezier(.2,.7,.2,1) both}
.pro-site .opening-screen .scene-playing .rescue-beacon{animation:beacon-hello 3.6s ease-in-out both}
.pro-site .opening-screen .scene-playing .rescue-road:after{animation:road-arrive 1.4s linear both}
.pro-site .opening-screen .service-art-vip{width:218px}
.pro-site .opening-screen .service-art-vip .scene-primary{position:absolute;left:3px;bottom:0;width:auto;height:108px;object-fit:contain;transform-origin:50% 92%;z-index:3}
.pro-site .opening-screen .vip-transfer{position:absolute;right:0;bottom:13px;width:139px;height:76px;z-index:1;opacity:.9;filter:drop-shadow(0 4px 3px #75552420)}
.pro-site .opening-screen .vip-transfer .transfer-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:none}
.pro-site .opening-screen .transfer-cover{position:absolute;left:3%;top:3%;width:58%;height:45%;background:linear-gradient(135deg,#345271,#182e49 70%);border:1px solid #6e8698;border-bottom:2px solid #cbac67;border-radius:5px 4px 1px 1px;box-shadow:inset 1px 2px 1px #adc0c136}
.pro-site .opening-screen .transfer-cover:after{content:'';position:absolute;inset:5px;border:1px solid #bfa87466;border-radius:2px}
.pro-site .opening-screen .transfer-glint{position:absolute;top:10px;left:10px;width:32px;height:2px;background:#fff4b7;transform:rotate(-25deg);opacity:0}
.pro-site .opening-screen .vip-greeting{position:absolute;top:5px;left:73px;color:#b4873c;font-size:19px;opacity:.6;z-index:4}
.pro-site .opening-screen .scene-playing .vip-transfer{animation:vip-transfer-arrive 3.9s ease-out both}
.pro-site .opening-screen .scene-playing.vip-choice .scene-primary{animation:vip-greeting 3.9s ease-in-out both}
.pro-site .opening-screen .scene-playing .vip-greeting{animation:greeting-spark 3.9s ease-in-out both}
.pro-site .opening-screen .scene-playing .transfer-glint{animation:vip-glint 3.9s ease-in-out both}
.pro-site .opening-screen .service-art-battery{width:208px}
.pro-site .opening-screen .service-art-battery .scene-primary{width:139px;height:100%;z-index:3}
.pro-site .opening-screen .charge-car{position:absolute;right:0;bottom:20px;width:82px;height:56px;z-index:1;opacity:.9}
.pro-site .opening-screen .charge-car .charge-car-image{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 2px #65704625)}
.pro-site .opening-screen .charge-headlight{position:absolute;right:-3px;top:26px;width:24px;height:16px;background:radial-gradient(ellipse at 0 50%,#fff9bdc9,transparent 75%);opacity:.55;transform-origin:0 50%;pointer-events:none}
.pro-site .opening-screen .charge-cables{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:2.4;stroke-linecap:round;z-index:4;pointer-events:none}
.charge-cables .cable-black{stroke:#4c615b}.charge-cables .cable-red{stroke:#c35d3e}
.pro-site .opening-screen .charge-meter{position:absolute;left:148px;bottom:4px;display:flex;gap:3px;align-items:flex-end;padding:3px 5px;border:1px solid #668e6555;border-radius:5px;background:#ecf1c8aa;z-index:4;height:19px}
.pro-site .opening-screen .charge-cell{display:block;width:5px;height:10px;background:#5e9e61;border-radius:1px;transform-origin:center bottom}
.pro-site .opening-screen .scene-playing .charge-cables path{animation:cable-connect 3.8s ease-in-out both}
.pro-site .opening-screen .scene-playing .charge-cell{animation:charge-fill 3.8s ease-in-out both;animation-delay:calc(var(--cell)*.15s)}
.pro-site .opening-screen .scene-playing .charge-headlight{animation:car-lights-on 3.8s ease-in-out both}
.pro-site .opening-screen .service-art-tyre{width:170px}
.pro-site .opening-screen .service-art-tyre .motion-wheel{width:103px;height:100%;object-fit:contain;transform-origin:52% 54%;z-index:2}
.pro-site .opening-screen .service-art-tyre .motion-wrench{position:absolute;left:87px;bottom:8px;width:62px;height:66px;object-fit:contain;object-position:center;filter:drop-shadow(0 3px 2px #3e565b33);transform-origin:29% 79%;z-index:3}
.pro-site .opening-screen .wheel-seat{position:absolute;bottom:2px;left:12px;height:4px;width:93px;border-radius:50%;background:#47798a26;z-index:1}
.pro-site .opening-screen .wheel-complete{position:absolute;left:145px;top:15px;width:13px;height:13px;border-right:2px solid #607e65;border-bottom:2px solid #607e65;transform:rotate(45deg) scale(.55);opacity:0}
.pro-site .opening-screen .scene-playing .motion-wheel{animation:wheel-seat 3.8s cubic-bezier(.2,.7,.2,1) both}
.pro-site .opening-screen .scene-playing .motion-wrench{animation:wrench-tighten 3.8s ease-in-out both}
.pro-site .opening-screen .scene-playing .wheel-complete{animation:wheel-ready 3.8s ease-in-out both}
.service-motion-paused .service-motion-card *, .scene-offscreen *{animation-play-state:paused!important}
/* The truck marks the actual form step, never dispatch or a real vehicle location. */
.request-journey{position:relative;max-width:700px;height:49px;margin:2px 0 9px;--journey-stop:0;pointer-events:none;isolation:isolate}
.journey-track{position:absolute;left:16.666%;right:16.666%;bottom:5px;height:9px;border-radius:10px;background:#bba17a66;border:1px solid #b8a077;box-shadow:0 2px 0 #fff1bd66}
.journey-track:before{content:'';position:absolute;inset:3px 2px;height:1px;background:repeating-linear-gradient(90deg,#fff2c2 0 13px,transparent 13px 23px)}
.journey-fill{position:absolute;left:0;top:-1px;bottom:-1px;width:calc(var(--journey-stop)*50%);background:linear-gradient(90deg,#da9248,#8ab397);border-radius:10px;transition:width .75s cubic-bezier(.22,.7,.22,1)}
.journey-waypoint{position:absolute;left:calc(var(--stop)*50%);top:50%;width:9px;height:9px;border-radius:50%;background:#f5dfb5;border:2px solid #b79965;transform:translate(-50%,-50%);z-index:1}
.journey-truck{position:absolute;left:calc(16.666% + var(--journey-stop)*33.333%);bottom:7px;width:76px;height:42px;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 3px 2px #8e703a26);transition:left .75s cubic-bezier(.22,.7,.22,1);z-index:3}
.pro-site .flow-stepper{border-bottom:0;padding-bottom:10px;margin-bottom:16px;gap:0;max-width:700px}
.pro-site .flow-stepper li{justify-content:center;gap:7px;flex:1;font-size:11px;text-align:center}
.pro-site .flow-stepper b{height:25px;width:25px;border-radius:9px;font-size:10px;flex-shrink:0}
.pro-site .flow-stepper .current{color:#865128}.pro-site .flow-stepper .current b{background:#f5b55f;color:#72451e;box-shadow:0 2px 0 #ce964c44}
@keyframes rescue-arrive{0%{transform:translateX(-95px);opacity:0}9%{opacity:1}38%{transform:translateX(3px)}48%{transform:translateX(0)}61%{transform:translateY(-1px)}100%{transform:none;opacity:1}}
@keyframes beacon-hello{0%,100%{opacity:.25;transform:scale(.9)}20%,43%,66%{opacity:.8;transform:scale(1.25)}32%,54%{opacity:.3;transform:scale(.95)}}
@keyframes road-arrive{from{transform:translateX(-15px)}to{transform:translateX(0)}}
@keyframes vip-transfer-arrive{0%,12%{transform:translateX(32px);opacity:0}45%,100%{transform:none;opacity:.9}}
@keyframes vip-greeting{0%,28%,100%{transform:none}42%{transform:rotate(-4deg) translateY(-2px)}58%{transform:rotate(2deg)}72%{transform:none}}
@keyframes greeting-spark{0%,25%,100%{opacity:.3;transform:scale(.7)}42%,65%{opacity:.9;transform:scale(1)}54%{opacity:.6;transform:scale(.85)}}
@keyframes vip-glint{0%,45%,100%{opacity:0;transform:translateX(0) rotate(-25deg)}60%{opacity:.8;transform:translateX(42px) rotate(-25deg)}75%{opacity:0;transform:translateX(65px) rotate(-25deg)}}
@keyframes cable-connect{0%,8%{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}30%,100%{stroke-dasharray:1;stroke-dashoffset:0;opacity:1}}
@keyframes charge-fill{0%,28%{transform:scaleY(.15);opacity:.15}58%,100%{transform:scaleY(1);opacity:1}}
@keyframes car-lights-on{0%,53%{opacity:0;transform:scaleX(.2)}66%,100%{opacity:.8;transform:scaleX(1)}}
@keyframes wheel-seat{0%{transform:translateX(-28px) rotate(-22deg);opacity:0}12%{opacity:1}38%{transform:translateX(2px) rotate(2deg)}50%,100%{transform:none;opacity:1}}
@keyframes wrench-tighten{0%,32%{transform:translateX(8px) rotate(-16deg);opacity:0}43%{transform:none;opacity:1}53%{transform:rotate(-22deg)}64%{transform:rotate(5deg)}75%{transform:rotate(-15deg)}87%,100%{transform:none;opacity:1}}
@keyframes wheel-ready{0%,76%,100%{opacity:0;transform:rotate(45deg) scale(.55)}87%{opacity:.8;transform:rotate(45deg) scale(.9)}}
@media(max-width:740px){.pro-site .opening-screen .service-art-vip{width:158px}.pro-site .opening-screen .service-art-vip .scene-primary{height:100px;left:2px}.pro-site .opening-screen .vip-transfer{width:102px;height:58px;right:-3px;bottom:10px}.pro-site .opening-screen .vip-greeting{left:58px;font-size:15px}.pro-site .opening-screen .service-art-battery{width:158px}.pro-site .opening-screen .service-art-battery .scene-primary{width:112px}.pro-site .opening-screen .charge-car{width:58px;height:41px;right:-3px;bottom:18px}.pro-site .opening-screen .charge-headlight{top:18px;width:18px;height:12px}.pro-site .opening-screen .charge-meter{left:113px;bottom:4px;height:16px;gap:2px;padding:2px 4px}.pro-site .opening-screen .charge-cell{width:4px;height:8px}.pro-site .opening-screen .service-art-tyre{width:145px}.pro-site .opening-screen .service-art-tyre .motion-wheel{width:88px}.pro-site .opening-screen .service-art-tyre .motion-wrench{left:76px;width:52px;height:56px;bottom:5px}.pro-site .opening-screen .wheel-seat{width:79px;left:8px}.pro-site .opening-screen .wheel-complete{left:129px;top:16px;width:9px;height:9px}.pro-site .opening-screen .rescue-road{width:159px;left:0}.pro-site .opening-screen .rescue-beacon{width:19px;height:7px;top:10%;left:65%}.pro-site .opening-screen .rescue-lightbeam{right:-5px;bottom:26px;width:25px;height:15px}.request-journey{height:43px;margin-bottom:8px}.journey-truck{width:64px;height:36px}.pro-site .flow-stepper li{flex-direction:column;gap:5px;font-size:10px;line-height:1.35}.pro-site .flow-stepper{margin-bottom:18px}}
@media(max-width:360px){.pro-site .opening-screen .service-art-battery,.pro-site .opening-screen .service-art-vip{width:136px}.pro-site .opening-screen .charge-car{width:48px;right:-2px}.pro-site .opening-screen .charge-meter{left:106px;padding-inline:3px;gap:1px}.pro-site .opening-screen .service-art-battery .scene-primary{width:101px}.pro-site .opening-screen .vip-transfer{width:93px;right:-6px}.pro-site .opening-screen .service-art-tyre{width:135px}}
@media(prefers-reduced-motion:reduce){.pro-site .opening-screen .service-motion-card *, .pro-site .opening-screen .service-motion-card *:before,.pro-site .opening-screen .service-motion-card *:after,.request-journey *{animation:none!important;transition:none!important}.pro-site .opening-screen .rescue-beacon{opacity:.3}.pro-site .opening-screen .wheel-complete{opacity:0}}