/* Copied from index.html by tools/seo/build_pages.py: the landing's green car and its service scenes. Do not edit here. */
/* ---------- SERVICE STAGE: the car acts out the service ---------- */
.sv-stage{position:relative;margin:4px 0 18px;height:clamp(170px,31svh,300px);container-type:size;border-radius:20px;overflow:hidden;background:#0B0B0B;isolation:isolate}
.sv-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 55% at 50% 70%,rgba(255,255,255,.11),rgba(255,255,255,.03) 55%,transparent 80%)}
.sv-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;z-index:-1;background:linear-gradient(to top,rgba(255,255,255,.035),transparent)}
.car{position:absolute;left:0;right:0;margin:0 auto;bottom:18%;width:min(96cqw,134cqh);height:auto;overflow:visible}
/* the floor is polished: a faded mirror image of the whole scene */
.car.refl{transform:scaleY(-1);transform-origin:50% 90.91%;opacity:.24;filter:blur(.6px);-webkit-mask-image:linear-gradient(to bottom,transparent 64%,#000 91%);mask-image:linear-gradient(to bottom,transparent 64%,#000 91%);pointer-events:none}
.car *{transform-box:view-box}
.car .spin,.car .wf,.car .wfi,.car .bw,.car .gfill,.car .spark,.car .cap,.car .puff{transform-box:fill-box;transform-origin:50% 50%}
.car .wfi,.car .jack{transform-box:fill-box;transform-origin:50% 100%}
.car .gfill{transform-origin:0 50%;transform:scaleX(.08)}
.car .tilt{transform-origin:150px 140px}
.car .hood{transform-origin:300px 88px}
.car .door{transform-origin:298px 112px}
.car .flap{transform-origin:138px 96px}
.car .bed{transform:translateX(620px)}
.car .beam,.car .spark,.car .noz,.car .gauge,.car .lock,.car .cb,.car .bay,.car .jack,.car .smoke{opacity:0}
.car .sweep{animation:sweep 7s cubic-bezier(.45,0,.55,1) 1s infinite}
@keyframes sweep{0%{transform:translateX(-60px)}38%,100%{transform:translateX(560px)}}
.car .puff{animation:puff 1.5s ease-out infinite}
.car .puff:nth-child(2){animation-delay:-.5s}
.car .puff:nth-child(3){animation-delay:-1s}
@keyframes puff{0%{transform:scale(.4);opacity:.75}100%{transform:translate(-34px,-18px) scale(3.2);opacity:0}}
.s-jump .car .cb{opacity:1}
/* outlined wordmarks drifting behind the car, kept clear of the floor reflection */
.sv-bg{position:absolute;z-index:-1;left:0;right:0;top:2%;bottom:28%;display:flex;flex-direction:column;justify-content:space-evenly;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 72%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 72%,transparent)}
.sv-row{display:flex;width:max-content;animation:svmq 40s linear infinite}
.sv-row:nth-child(even){animation-direction:reverse;animation-duration:46s}
.sv-row span{font-family:var(--wordmark);font-weight:800;letter-spacing:-.05em;font-size:clamp(13px,min(4.8cqh,5.2cqw),30px);line-height:1;white-space:nowrap;padding-right:.32em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14)}
.sv-row span i{font-style:normal;-webkit-text-stroke-color:rgba(200,255,0,.55)}
@keyframes svmq{to{transform:translateX(-50%)}}
.sheet-wrap:not(.open) .sv-row{animation-play-state:paused}
.sv-bubble{position:absolute;z-index:2;top:7%;left:0;right:0;margin:0 auto;width:max-content;max-width:86%;display:flex;align-items:center;gap:9px;padding:7px 13px 7px 7px;border-radius:14px;background:#fff;color:var(--ink);opacity:0;pointer-events:none}
.sv-bubble img{flex:none;width:26px;height:26px;border-radius:50%;object-fit:cover;object-position:50% 15%}
.sv-bubble b{display:block;font-size:11px;line-height:1.2}
.sv-bubble p{font-size:12.5px;line-height:1.3;color:var(--ink2)}
/* scenes. Every loop ends where it starts, so they repeat forever. */
.s-arrive .rig{animation:arrive 1.7s cubic-bezier(.16,.72,.24,1) both}
.s-arrive .spin{animation:arriveSpin 1.7s cubic-bezier(.16,.72,.24,1) both}
.s-arrive .beam{animation:arriveBeam 1.7s both}
.s-arrive .tilt{animation:brake 1.7s both}
@keyframes brake{0%,66%{transform:none}80%{transform:rotate(1deg)}91%{transform:rotate(-.35deg)}100%{transform:none}}
@keyframes arrive{from{transform:translateX(-560px)}to{transform:none}}
@keyframes arriveSpin{from{transform:rotate(-1080deg)}to{transform:none}}
@keyframes arriveBeam{0%,70%{opacity:1}100%{opacity:0}}
.s-tow .bed{animation:bedTow 5.4s cubic-bezier(.65,0,.35,1) infinite}
.s-tow .rig{animation:rigTow 5.4s cubic-bezier(.65,0,.35,1) infinite}
.s-tow .spin{animation:spinTow 5.4s cubic-bezier(.65,0,.35,1) infinite}
.s-tow .bw{animation:bwTow 5.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes bedTow{0%{transform:translateX(620px)}18%,30%{transform:none}56%,100%{transform:translateX(640px)}}
@keyframes rigTow{0%,18%{transform:none}25%{transform:translateY(-16px)}28%,31%{transform:translateY(-14px)}56%{transform:translate(640px,-14px)}56.01%{transform:translateX(-560px);animation-timing-function:cubic-bezier(.16,.72,.24,1)}84%,100%{transform:none}}
@keyframes spinTow{0%,56.01%{transform:none;animation-timing-function:cubic-bezier(.16,.72,.24,1)}84%,100%{transform:rotate(900deg)}}
@keyframes bwTow{0%{transform:rotate(-500deg)}18%,30%{transform:none}56%,100%{transform:rotate(700deg)}}
.s-jump .hood{animation:hood 4.8s cubic-bezier(.65,0,.35,1) infinite}
.s-jump .cb{animation:cable 4.8s cubic-bezier(.65,0,.35,1) infinite}
.s-jump .cb+.cb{animation-delay:.12s}
.s-jump .spark{animation:spark 4.8s linear infinite}
.s-jump .beam{animation:beamOn 4.8s linear infinite}
.s-jump .tilt{animation:idle 4.8s linear infinite}
.s-jump .bay{animation:bay 4.8s linear infinite}
.s-jump .smoke{animation:smokeOn 4.8s linear infinite}
@keyframes smokeOn{0%,50%{opacity:0}53%,90%{opacity:1}97%,100%{opacity:0}}
@keyframes bay{0%,3%{opacity:0}6%,82%{opacity:1}86%,100%{opacity:0}}
@keyframes hood{0%{transform:none}14%,74%{transform:rotate(-30deg)}88%,100%{transform:none}}
@keyframes cable{0%,14%{stroke-dashoffset:1}30%,70%{stroke-dashoffset:0}84%,100%{stroke-dashoffset:1}}
@keyframes spark{0%,31%{opacity:0;transform:scale(.3)}33%{opacity:1;transform:scale(1.25)}37%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1)}45%,100%{opacity:0;transform:scale(.3)}}
@keyframes beamOn{0%,45%{opacity:0}47%{opacity:.6}49%{opacity:.1}53%,90%{opacity:1}97%,100%{opacity:0}}
@keyframes idle{0%,46%{transform:none}48%{transform:translateY(-1.2px)}50%{transform:translateY(.6px)}52%{transform:translateY(-.5px)}55%,100%{transform:none}}
.s-tire .wf{animation:swap 5.4s cubic-bezier(.65,0,.35,1) infinite}
.s-tire .wfi{animation:flat 5.4s cubic-bezier(.65,0,.35,1) infinite}
.s-tire .tilt{animation:tiltF 5.4s cubic-bezier(.65,0,.35,1) infinite}
.s-tire .jack{animation:jack 5.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes flat{0%{transform:none}10%,44%{transform:scale(1.05,.82)}44.01%,100%{transform:none}}
@keyframes swap{0%,32%{transform:none;opacity:1}44%,48%{transform:translateX(170px) rotate(320deg);opacity:0}62%,100%{transform:none;opacity:1}}
@keyframes tiltF{0%{transform:none}10%,20%{transform:rotate(1.1deg)}30%,62%{transform:rotate(-.7deg)}72%,100%{transform:none}}
@keyframes jack{0%,12%{opacity:0;transform:scaleY(.25)}16%{opacity:1;transform:scaleY(.25)}30%,62%{opacity:1;transform:none}72%{opacity:1;transform:scaleY(.25)}78%,100%{opacity:0;transform:scaleY(.25)}}
.s-door .lock{animation:lockShow 4.8s cubic-bezier(.65,0,.35,1) infinite}
.s-door .shk{animation:unlock 4.8s cubic-bezier(.65,0,.35,1) infinite}
.s-door .lkb{animation:lockFill 4.8s linear infinite}
.s-door .door{animation:door 4.8s cubic-bezier(.65,0,.35,1) infinite}
.s-door .amb{animation:amb 4.8s linear infinite}
.s-door .beam{animation:unlockBlink 4.8s linear infinite}
@keyframes unlockBlink{0%,22%{opacity:0}23%{opacity:.8}26%{opacity:0}28%{opacity:.8}31%,100%{opacity:0}}
@keyframes lockShow{0%{opacity:0;transform:translateY(6px)}10%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:none}}
@keyframes unlock{0%,18%{transform:none}26%,84%{transform:translateY(-5px)}92%,100%{transform:none}}
@keyframes lockFill{0%,22%{fill:#fff}24%,100%{fill:#C8FF00}}
@keyframes door{0%,28%{transform:none;filter:none}46%,74%{transform:scaleX(.3) skewY(-6deg);filter:brightness(.6)}90%,100%{transform:none;filter:none}}
@keyframes amb{0%,30%{opacity:.25}44%,76%{opacity:1}90%,100%{opacity:.25}}
.s-fuel .flap{animation:flap 5.6s cubic-bezier(.65,0,.35,1) infinite}
.s-fuel .cap{animation:cap 5.6s cubic-bezier(.65,0,.35,1) infinite}
.s-fuel .noz{animation:noz 5.6s cubic-bezier(.65,0,.35,1) infinite}
.s-fuel .gauge{animation:gauge 5.6s linear infinite}
.s-fuel .gfill{animation:gfill 5.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes flap{0%,6%{transform:none}14%,84%{transform:scaleX(-.65)}92%,100%{transform:none}}
@keyframes cap{0%,16%{transform:none;opacity:1}26%{transform:rotate(-220deg);opacity:1}32%,72%{transform:translate(-12px,-12px) rotate(-260deg);opacity:0}78%{transform:rotate(-220deg);opacity:1}86%,100%{transform:none;opacity:1}}
@keyframes noz{0%,28%{transform:translate(-46px,-16px);opacity:0}38%,68%{transform:none;opacity:1}76%,100%{transform:translate(-46px,-16px);opacity:0}}
@keyframes gauge{0%,30%{opacity:0}36%,80%{opacity:1}88%,100%{opacity:0}}
@keyframes gfill{0%,40%{transform:scaleX(.08)}70%,100%{transform:none}}
.s-help .beam{animation:blink 4.8s linear infinite}
.s-help .sv-bubble{animation:bubble 4.8s cubic-bezier(.65,0,.35,1) infinite}
@keyframes blink{0%,8%{opacity:0}10%{opacity:1}14%{opacity:0}17%{opacity:1}21%,100%{opacity:0}}
@keyframes bubble{0%,22%{opacity:0;transform:translateY(10px) scale(.96)}32%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-4px)}}