/* ONEPRO — scene animations (hero panorama, truck, service illustrations, incident lab) */

.scene svg,.scene-svg{display:block;width:100%;height:auto;overflow:visible}
.scene svg *{transform-box:fill-box;transform-origin:center}
.s-place{transform-origin:0 0!important;transform-box:view-box!important}
/* phones: hero panorama fills the whole width, so pull the truck left to leave breathing room at the right edge */
@media (max-width:860px){.hero-truck{transform:translate(530px,470px) scale(1.36)!important}}
.scene .s-text{font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.5px}
.scene .s-sm{font-family:'Inter',sans-serif;font-weight:600}

/* ── truck ── */
.tw{animation:s-wheel .42s linear infinite}
@keyframes s-wheel{to{transform:rotate(360deg)}}
.s-bob{animation:s-bob .5s ease-in-out infinite;transform-origin:50% 100%}
@keyframes s-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
.s-beam{animation:s-beam 3s ease-in-out infinite}
@keyframes s-beam{0%,100%{opacity:.5}50%{opacity:.72}}
.s-head{animation:s-beam 2.4s ease-in-out infinite}
.s-mark{animation:s-mark 1.2s steps(1) infinite;animation-delay:var(--d,0s)}
@keyframes s-mark{0%,60%{opacity:1}61%,100%{opacity:.25}}
.s-smoke circle{opacity:0;animation:s-smoke 2.2s ease-out infinite;animation-delay:var(--d,0s)}
@keyframes s-smoke{0%{transform:translate(0,0) scale(.5);opacity:.55}100%{transform:translate(-46px,-40px) scale(2.4);opacity:0}}

/* ── hero panorama ── */
.hero-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-svg *{transform-box:fill-box;transform-origin:center}
.s-pan{animation:s-pan var(--t,60s) linear infinite}
@keyframes s-pan{to{transform:translateX(calc(var(--w,1600px) * -1))}}
.s-cloud{animation:s-cloud var(--t,90s) linear infinite}
@keyframes s-cloud{0%{transform:translateX(-300px)}100%{transform:translateX(1700px)}}
.s-star{animation:s-twinkle 3s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes s-twinkle{0%,100%{opacity:.9}50%{opacity:.15}}
.s-sun{animation:s-sun 8s ease-in-out infinite}
@keyframes s-sun{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.s-dash{animation:s-dash .55s linear infinite}
@keyframes s-dash{to{stroke-dashoffset:160}}
.s-gantry{animation:s-gantry 26s linear infinite}
@keyframes s-gantry{0%{transform:translateX(1700px)}100%{transform:translateX(-800px)}}
.s-speed rect{animation:s-speed .9s linear infinite;animation-delay:var(--d,0s);transform-box:fill-box;transform-origin:right center}
@keyframes s-speed{0%{transform:translateX(0) scaleX(.2);opacity:0}30%{opacity:.9}100%{transform:translateX(-140px) scaleX(1);opacity:0}}

/* ── service scenes: shared bits ── */
.sc-frame{fill:url(#gPanel)}
.sc-grid{fill:url(#pGrid)}
.sc-line{fill:none;stroke:#5BB0FF;stroke-opacity:.35;stroke-width:1.5}
.sc-blue{fill:none;stroke:#5BB0FF;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.sc-ink{fill:#EAF2FF}
.sc-mute{fill:#8DA5CC}
.s-road{stroke:#F6F9FF;stroke-width:4;stroke-dasharray:36 30;animation:s-dashS .5s linear infinite}
@keyframes s-dashS{to{stroke-dashoffset:66}}
.s-pop{animation:s-pop var(--t,5s) cubic-bezier(.2,1.4,.4,1) infinite;animation-delay:var(--d,0s);opacity:0}
@keyframes s-pop{0%,4%{transform:scale(.4);opacity:0}10%,80%{transform:scale(1);opacity:1}92%,100%{transform:scale(1);opacity:0}}
.s-fade{animation:s-fade var(--t,5s) ease-in-out infinite;animation-delay:var(--d,0s);opacity:0}
@keyframes s-fade{0%,4%{opacity:0;transform:translateY(8px)}12%,80%{opacity:1;transform:translateY(0)}92%,100%{opacity:0}}
.s-tick{stroke-dasharray:1 2;stroke-dashoffset:1;animation:s-tick var(--t,6s) ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes s-tick{0%,5%{stroke-dashoffset:1;opacity:1}14%,82%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
.s-orbit{animation:s-spin var(--t,24s) linear infinite}
.s-orbit-r{animation:s-spin var(--t,24s) linear infinite reverse}
@keyframes s-spin{to{transform:rotate(360deg)}}
.s-pulse{animation:s-pulse var(--t,2.4s) ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes s-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.85}}
.s-blink{animation:s-blink var(--t,1s) steps(1) infinite;animation-delay:var(--d,0s)}
@keyframes s-blink{0%,50%{opacity:1}51%,100%{opacity:.15}}
.s-sweep{animation:s-spin var(--t,4s) linear infinite}
.s-ripple{animation:s-ripple var(--t,3s) ease-out infinite;animation-delay:var(--d,0s)}
@keyframes s-ripple{0%{transform:scale(.3);opacity:.8}100%{transform:scale(1.7);opacity:0}}
.s-float{animation:s-floaty var(--t,4s) ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes s-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.s-drive{animation:s-drive var(--t,7s) linear infinite}
@keyframes s-drive{0%{transform:translateX(-140px)}100%{transform:translateX(620px)}}
.s-stamp{animation:s-stampin var(--t,6s) cubic-bezier(.2,1.6,.4,1) infinite;animation-delay:var(--d,0s);opacity:0}
@keyframes s-stampin{0%,38%{transform:scale(2.6) rotate(-14deg);opacity:0}46%{transform:scale(1) rotate(-8deg);opacity:1}50%{transform:scale(.94) rotate(-8deg)}54%,84%{transform:scale(1) rotate(-8deg);opacity:1}94%,100%{transform:scale(1) rotate(-8deg);opacity:0}}
.s-shake{animation:s-shk var(--t,6s) linear infinite;animation-delay:var(--d,0s)}
@keyframes s-shk{0%,44%,60%,100%{transform:translate(0,0)}46%{transform:translate(-4px,2px)}48%{transform:translate(4px,-2px)}50%{transform:translate(-3px,1px)}52%{transform:translate(2px,-1px)}}
.s-typing{stroke-dasharray:1 2;stroke-dashoffset:1;animation:s-tick var(--t,6s) linear infinite;animation-delay:var(--d,0s)}
.s-needle{transform-box:view-box;animation:s-needle var(--t,5s) cubic-bezier(.5,0,.2,1) infinite}
@keyframes s-needle{0%,6%{transform:rotate(70deg)}55%,88%{transform:rotate(-58deg)}100%{transform:rotate(70deg)}}
.s-ring-fill{stroke-dasharray:1 2;stroke-dashoffset:1;animation:s-ringfill var(--t,5s) ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes s-ringfill{0%,5%{stroke-dashoffset:1}60%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.s-bar-grow{transform-origin:0 50%;transform-box:fill-box;animation:s-bargrow var(--t,5s) ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes s-bargrow{0%,5%{transform:scaleX(0)}55%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.s-cursor{animation:s-cursor var(--t,8s) linear infinite}
@keyframes s-cursor{0%{transform:translateX(0)}100%{transform:translateX(var(--dx,260px))}}
.s-spin-slow{animation:s-spin var(--t,30s) linear infinite}
.s-bounce{animation:s-bounce var(--t,1.6s) ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes s-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.s-flyin{animation:s-flyin var(--t,6s) cubic-bezier(.2,.9,.3,1) infinite;animation-delay:var(--d,0s);opacity:0}
@keyframes s-flyin{0%,3%{transform:translateX(var(--fx,-80px)) scale(.8);opacity:0}14%,80%{transform:translateX(0) scale(1);opacity:1}92%,100%{transform:translateX(0) scale(1);opacity:0}}
.s-travel{offset-rotate:0deg;animation:s-travel var(--t,7s) linear infinite}
@keyframes s-travel{0%{offset-distance:0%}100%{offset-distance:100%}}
.s-rot-sweep{animation:s-rotsweep var(--t,6s) cubic-bezier(.2,.7,.3,1) infinite}
@keyframes s-rotsweep{0%{transform:rotate(0)}55%,92%{transform:rotate(var(--r,1000deg))}100%{transform:rotate(var(--r,1000deg))}}

/* ── incident lab: 10 s loops ── */
.i-fadewrap{animation:i-fade var(--t,10s) linear infinite}
@keyframes i-fade{0%{opacity:0}3%{opacity:1}93%{opacity:1}100%{opacity:0}}
.i-rain line{animation:i-rain .55s linear infinite;animation-delay:var(--d,0s)}
@keyframes i-rain{0%{transform:translate(0,-40px);opacity:0}20%{opacity:.8}100%{transform:translate(-26px,60px);opacity:0}}
.i-light-r{animation:i-lr .5s steps(1) infinite}
.i-light-b{animation:i-lr .5s steps(1) infinite reverse}
@keyframes i-lr{0%{opacity:1}50%{opacity:.08}}
.i-haz{animation:i-haz .8s steps(1) infinite}
@keyframes i-haz{0%{opacity:1}50%{opacity:.1}}
.tw-i{animation:i-wroll var(--t,10s) cubic-bezier(.3,.05,.55,1) infinite}
@keyframes i-wroll{0%{transform:rotate(0)}34.5%,100%{transform:rotate(9000deg)}}
.tw-off{animation:none}

/* A · rear-end collision */
.i-shk{animation:i-shkA var(--t,10s) linear infinite}
@keyframes i-shkA{0%,34.4%{transform:translate(0,0)}35%{transform:translate(-8px,3px)}36%{transform:translate(7px,-4px)}37%{transform:translate(-5px,3px)}38%{transform:translate(4px,-2px)}39%{transform:translate(-2px,1px)}40.5%,100%{transform:translate(0,0)}}
.i-truckA{animation:i-truckA var(--t,10s) linear infinite}
@keyframes i-truckA{0%{transform:translateX(-560px);animation-timing-function:cubic-bezier(.3,.05,.55,1)}34.5%{transform:translateX(0)}36%{transform:translateX(-16px)}41%,100%{transform:translateX(-8px)}}
.i-carA{animation:i-carA var(--t,10s) linear infinite}
@keyframes i-carA{0%,34.4%{transform:translate(0,0) rotate(0)}35%{transform:translate(8px,0) rotate(-4deg)}42%{transform:translate(110px,-4px) rotate(-9deg)}47%,100%{transform:translate(122px,0) rotate(-3deg)}}
.i-burst{opacity:0;animation:i-burst var(--t,10s) linear infinite}
@keyframes i-burst{0%,34.4%{opacity:0;transform:scale(.2)}35.3%{opacity:1;transform:scale(1.15)}38%{opacity:1;transform:scale(1.32)}41%,100%{opacity:0;transform:scale(1.5)}}
.i-burst2{animation-name:i-burst2}
@keyframes i-burst2{0%,34.4%{opacity:0;transform:scale(.2)}35.3%{opacity:1;transform:scale(1.3)}37%{opacity:.9;transform:scale(1.4)}39%,100%{opacity:0;transform:scale(1.6)}}
.i-shock{opacity:0;animation:i-shock var(--t,10s) ease-out infinite}
@keyframes i-shock{0%,34.4%{opacity:0;transform:scale(.3)}35%{opacity:.9;transform:scale(.5)}44%,100%{opacity:0;transform:scale(3.4)}}
.i-flash{opacity:0;animation:i-flashA var(--t,10s) linear infinite}
@keyframes i-flashA{0%,34.4%{opacity:0}34.8%{opacity:.75}38%,100%{opacity:0}}
.i-part{opacity:0;animation:i-part var(--t,10s) ease-out infinite}
@keyframes i-part{0%,34.4%{opacity:0;transform:translate(0,0) rotate(0)}35%{opacity:1}44%{opacity:1;transform:translate(var(--px),var(--py)) rotate(var(--pr))}56%{opacity:1;transform:translate(calc(var(--px)*1.3),calc(var(--py) + 150px)) rotate(calc(var(--pr)*1.6))}60%,100%{opacity:0;transform:translate(calc(var(--px)*1.3),calc(var(--py) + 150px))}}
.i-spark{opacity:0;animation:i-spark var(--t,10s) ease-out infinite}
@keyframes i-spark{0%,34.4%{opacity:0;transform:translate(0,0)}35%{opacity:1}42%,100%{opacity:0;transform:translate(var(--px),var(--py))}}
.i-smk{opacity:0;animation:i-smk var(--t,10s) ease-out infinite;animation-delay:var(--d,0s)}
@keyframes i-smk{0%,38%{opacity:0;transform:translate(0,0) scale(.3)}44%{opacity:.5}88%,100%{opacity:0;transform:translate(24px,-90px) scale(2.6)}}
.i-after{opacity:0;animation:i-after var(--t,10s) linear infinite}
@keyframes i-after{0%,36%{opacity:0}37%,93%{opacity:1}100%{opacity:0}}
.i-after2{opacity:0;animation:i-after2 var(--t,10s) linear infinite}
@keyframes i-after2{0%,44%{opacity:0}45%,93%{opacity:1}100%{opacity:0}}
.i-cruiserA{animation:i-cruiserA var(--t,10s) ease-out infinite}
@keyframes i-cruiserA{0%,42%{transform:translateX(-520px)}62%,100%{transform:translateX(0)}}

/* B · jackknife */
.i-shk2{animation:i-shkB var(--t,10s) linear infinite}
@keyframes i-shkB{0%,24%{transform:translate(0,0)}26%{transform:translate(-3px,2px)}28%{transform:translate(3px,-2px)}30%{transform:translate(-4px,3px)}33%{transform:translate(4px,-3px)}36%{transform:translate(-3px,2px)}39%{transform:translate(3px,-2px)}41%{transform:translate(-5px,3px)}43%{transform:translate(4px,-2px)}46%,100%{transform:translate(0,0)}}
.i-rigB{animation:i-rigB var(--t,10s) linear infinite}
@keyframes i-rigB{0%{transform:translateX(-780px);animation-timing-function:cubic-bezier(.12,.6,.35,1)}42%,100%{transform:translateX(0)}}
.i-trl{animation:i-trl var(--t,10s) ease-in-out infinite}
@keyframes i-trl{0%,18%{transform:rotate(0)}30%{transform:rotate(12deg)}42%{transform:rotate(43deg)}46%,100%{transform:rotate(39deg)}}
.i-trc{animation:i-trc var(--t,10s) ease-in-out infinite}
@keyframes i-trc{0%,18%{transform:rotate(0)}30%{transform:rotate(-6deg)}42%{transform:rotate(-25deg)}46%,100%{transform:rotate(-22deg)}}
.i-tsmoke{opacity:0;animation:i-tsm var(--t,10s) ease-out infinite;animation-delay:var(--d,0s)}
@keyframes i-tsm{0%,20%{opacity:0;transform:translate(0,0) scale(.4)}26%{opacity:.55}52%,100%{opacity:0;transform:translate(-30px,-16px) scale(2.6)}}
.i-rspark{opacity:0;animation:i-rsp var(--t,10s) ease-out infinite;animation-delay:var(--d,0s)}
@keyframes i-rsp{0%,38%{opacity:0;transform:translate(0,0)}39%{opacity:1}47%,100%{opacity:0;transform:translate(var(--px),var(--py))}}
.i-lightning{opacity:0;animation:i-lit var(--t,10s) linear infinite}
@keyframes i-lit{0%,6%{opacity:0}6.5%{opacity:.85}8%{opacity:0}9.5%{opacity:.6}11%{opacity:0}31%{opacity:0}31.4%{opacity:.5}33%,100%{opacity:0}}

/* C · roadside inspection */
.i-walk{animation:i-walk var(--t,10s) linear infinite}
@keyframes i-walk{0%{transform:translateX(0) scaleX(1)}46%{transform:translateX(250px) scaleX(1)}50%{transform:translateX(250px) scaleX(-1)}96%{transform:translateX(0) scaleX(-1)}100%{transform:translateX(0) scaleX(1)}}
.i-leg{animation:i-leg .6s ease-in-out infinite alternate}
.i-leg2{animation-direction:alternate-reverse}
@keyframes i-leg{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
.i-oos{opacity:0;animation:i-oos var(--t,10s) linear infinite}
@keyframes i-oos{0%,14%{opacity:0;transform:scale(2.4)}18%{opacity:1;transform:scale(1)}24%{opacity:.45}28%{opacity:1}34%{opacity:.45}38%{opacity:1}44%{opacity:.45}48%{opacity:1}54%{opacity:.45}58%,70%{opacity:1}74%,100%{opacity:0;transform:scale(1)}}
.i-cleared{opacity:0;animation:i-clr var(--t,10s) cubic-bezier(.2,1.5,.4,1) infinite}
@keyframes i-clr{0%,76%{opacity:0;transform:scale(2.6)}80%{opacity:1;transform:scale(.92)}82%,93%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(1)}}

/* D · cargo claim */
.i-jolt{animation:i-jolt var(--t,10s) linear infinite}
@keyframes i-jolt{0%,26%{transform:translateX(0)}27%{transform:translateX(-6px)}28%{transform:translateX(4px)}29.5%{transform:translateX(-2px)}31%,100%{transform:translateX(0)}}
.i-drop{opacity:0;animation:i-drop var(--t,10s) ease-in infinite;animation-delay:var(--dd,0s)}
@keyframes i-drop{0%,26%{opacity:0;transform:translate(0,0) rotate(0)}28%{opacity:1;transform:translate(0,0) rotate(0)}36%{transform:translate(calc(var(--dx)*.5),calc(var(--dy)*.4 - 18px)) rotate(calc(var(--rot)*.5))}41%{transform:translate(calc(var(--dx)*.8),var(--dy)) rotate(calc(var(--rot)*.85))}44%{transform:translate(calc(var(--dx)*.86),calc(var(--dy) - 10px)) rotate(var(--rot))}47%,92%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}96%,100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}
.i-dustk{opacity:0;animation:i-dustk var(--t,10s) ease-out infinite;animation-delay:var(--dd,0s)}
@keyframes i-dustk{0%,39%{opacity:0;transform:scale(.3)}41%{opacity:.7}52%,100%{opacity:0;transform:scale(2.6)}}
.i-denied{opacity:0;animation:i-den var(--t,10s) cubic-bezier(.2,1.4,.4,1) infinite}
@keyframes i-den{0%,44%{opacity:0;transform:scale(2.8)}48%{opacity:1;transform:scale(.92)}50%,64%{opacity:1;transform:scale(1)}68%,100%{opacity:0;transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  .s-pop,.s-fade,.s-stamp,.s-flyin{opacity:1!important}
  .s-tick,.s-typing,.s-ring-fill{stroke-dashoffset:0!important}
}

/* ── phase system: every scene shares one cycle (--t); N = tenth of the cycle at which the element appears ── */
.ph,.st,.pf{opacity:0;animation-duration:var(--t,8s);animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.2,1.3,.4,1)}
.pd{stroke-dasharray:1 2;stroke-dashoffset:1;animation-duration:var(--t,8s);animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.pf{animation-timing-function:ease-out}
@keyframes s-ph0{0%,0%{opacity:0;transform:scale(.6)}3%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
@keyframes s-pf0{0%,0%{opacity:0;transform:translateY(10px)}4%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
@keyframes s-pd0{0%,0%{stroke-dashoffset:1;opacity:1}8%,90%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes s-st0{0%,0%{opacity:0;transform:scale(2.8) rotate(-16deg)}2%{opacity:1;transform:scale(.92) rotate(-8deg)}4%,90%{opacity:1;transform:scale(1) rotate(-8deg)}96%,100%{opacity:0;transform:scale(1) rotate(-8deg)}}
.ph0{animation-name:s-ph0}.pf0{animation-name:s-pf0}.pd0{animation-name:s-pd0}.st0{animation-name:s-st0}
@keyframes s-ph1{0%,6%{opacity:0;transform:scale(.6)}13%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
@keyframes s-pf1{0%,6%{opacity:0;transform:translateY(10px)}14%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
@keyframes s-pd1{0%,6%{stroke-dashoffset:1;opacity:1}18%,90%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes s-st1{0%,6%{opacity:0;transform:scale(2.8) rotate(-16deg)}12%{opacity:1;transform:scale(.92) rotate(-8deg)}14%,90%{opacity:1;transform:scale(1) rotate(-8deg)}96%,100%{opacity:0;transform:scale(1) rotate(-8deg)}}
.ph1{animation-name:s-ph1}.pf1{animation-name:s-pf1}.pd1{animation-name:s-pd1}.st1{animation-name:s-st1}
@keyframes s-ph2{0%,16%{opacity:0;transform:scale(.6)}23%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
@keyframes s-pf2{0%,16%{opacity:0;transform:translateY(10px)}24%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
@keyframes s-pd2{0%,16%{stroke-dashoffset:1;opacity:1}28%,90%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes s-st2{0%,16%{opacity:0;transform:scale(2.8) rotate(-16deg)}22%{opacity:1;transform:scale(.92) rotate(-8deg)}24%,90%{opacity:1;transform:scale(1) rotate(-8deg)}96%,100%{opacity:0;transform:scale(1) rotate(-8deg)}}
.ph2{animation-name:s-ph2}.pf2{animation-name:s-pf2}.pd2{animation-name:s-pd2}.st2{animation-name:s-st2}
@keyframes s-ph3{0%,26%{opacity:0;transform:scale(.6)}33%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
@keyframes s-pf3{0%,26%{opacity:0;transform:translateY(10px)}34%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
@keyframes s-pd3{0%,26%{stroke-dashoffset:1;opacity:1}38%,90%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes s-st3{0%,26%{opacity:0;transform:scale(2.8) rotate(-16deg)}32%{opacity:1;transform:scale(.92) rotate(-8deg)}34%,90%{opacity:1;transform:scale(1) rotate(-8deg)}96%,100%{opacity:0;transform:scale(1) rotate(-8deg)}}
.ph3{animation-name:s-ph3}.pf3{animation-name:s-pf3}.pd3{animation-name:s-pd3}.st3{animation-name:s-st3}
@keyframes s-ph4{0%,36%{opacity:0;transform:scale(.6)}43%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
@keyframes s-pf4{0%,36%{opacity:0;transform:translateY(10px)}44%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
@keyframes s-pd4{0%,36%{stroke-dashoffset:1;opacity:1}48%,90%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes s-st4{0%,36%{opacity:0;transform:scale(2.8) rotate(-16deg)}42%{opacity:1;transform:scale(.92) rotate(-8deg)}44%,90%{opacity:1;transform:scale(1) rotate(-8deg)}96%,100%{opacity:0;transform:scale(1) rotate(-8deg)}}
.ph4{animation-name:s-ph4}.pf4{animation-name:s-pf4}.pd4{animation-name:s-pd4}.st4{animation-name:s-st4}
@keyframes s-ph5{0%,46%{opacity:0;transform:scale(.6)}53%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
@keyframes s-pf5{0%,46%{opacity:0;transform:translateY(10px)}54%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
@keyframes s-pd5{0%,46%{stroke-dashoffset:1;opacity:1}58%,90%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes s-st5{0%,46%{opacity:0;transform:scale(2.8) rotate(-16deg)}52%{opacity:1;transform:scale(.92) rotate(-8deg)}54%,90%{opacity:1;transform:scale(1) rotate(-8deg)}96%,100%{opacity:0;transform:scale(1) rotate(-8deg)}}
.ph5{animation-name:s-ph5}.pf5{animation-name:s-pf5}.pd5{animation-name:s-pd5}.st5{animation-name:s-st5}
@keyframes s-ph6{0%,56%{opacity:0;transform:scale(.6)}63%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
@keyframes s-pf6{0%,56%{opacity:0;transform:translateY(10px)}64%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
@keyframes s-pd6{0%,56%{stroke-dashoffset:1;opacity:1}68%,90%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes s-st6{0%,56%{opacity:0;transform:scale(2.8) rotate(-16deg)}62%{opacity:1;transform:scale(.92) rotate(-8deg)}64%,90%{opacity:1;transform:scale(1) rotate(-8deg)}96%,100%{opacity:0;transform:scale(1) rotate(-8deg)}}
.ph6{animation-name:s-ph6}.pf6{animation-name:s-pf6}.pd6{animation-name:s-pd6}.st6{animation-name:s-st6}
@keyframes s-ph7{0%,66%{opacity:0;transform:scale(.6)}73%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
@keyframes s-pf7{0%,66%{opacity:0;transform:translateY(10px)}74%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
@keyframes s-pd7{0%,66%{stroke-dashoffset:1;opacity:1}78%,90%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes s-st7{0%,66%{opacity:0;transform:scale(2.8) rotate(-16deg)}72%{opacity:1;transform:scale(.92) rotate(-8deg)}74%,90%{opacity:1;transform:scale(1) rotate(-8deg)}96%,100%{opacity:0;transform:scale(1) rotate(-8deg)}}
.ph7{animation-name:s-ph7}.pf7{animation-name:s-pf7}.pd7{animation-name:s-pd7}.st7{animation-name:s-st7}
@keyframes s-ph8{0%,76%{opacity:0;transform:scale(.6)}83%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
@keyframes s-pf8{0%,76%{opacity:0;transform:translateY(10px)}84%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
@keyframes s-pd8{0%,76%{stroke-dashoffset:1;opacity:1}88%,90%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes s-st8{0%,76%{opacity:0;transform:scale(2.8) rotate(-16deg)}82%{opacity:1;transform:scale(.92) rotate(-8deg)}84%,90%{opacity:1;transform:scale(1) rotate(-8deg)}96%,100%{opacity:0;transform:scale(1) rotate(-8deg)}}
.ph8{animation-name:s-ph8}.pf8{animation-name:s-pf8}.pd8{animation-name:s-pd8}.st8{animation-name:s-st8}
@keyframes s-ph9{0%,86%{opacity:0;transform:scale(.6)}93%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
@keyframes s-pf9{0%,86%{opacity:0;transform:translateY(10px)}94%,90%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
@keyframes s-pd9{0%,86%{stroke-dashoffset:1;opacity:1}98%,90%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes s-st9{0%,86%{opacity:0;transform:scale(2.8) rotate(-16deg)}92%{opacity:1;transform:scale(.92) rotate(-8deg)}94%,90%{opacity:1;transform:scale(1) rotate(-8deg)}96%,100%{opacity:0;transform:scale(1) rotate(-8deg)}}
.ph9{animation-name:s-ph9}.pf9{animation-name:s-pf9}.pd9{animation-name:s-pd9}.st9{animation-name:s-st9}
@keyframes s-uncover{0%,4%{transform:scaleX(1)}30%,90%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.s-cover{transform-box:fill-box;transform-origin:100% 50%;animation:s-uncover var(--t,8s) steps(14,end) infinite}
@keyframes s-mag{0%,4%{transform:translateY(0)}70%,100%{transform:translateY(176px)}}
.s-mag{animation:s-mag var(--t,9s) ease-in-out infinite}
@keyframes s-glowp{0%,100%{opacity:.5}50%{opacity:1}}
.s-glowp{animation:s-glowp 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.ph,.st,.pf{opacity:1!important;transform:none!important}.pd{stroke-dashoffset:0!important}.s-cover{transform:scaleX(0)!important}}
@media (prefers-reduced-motion:reduce){.i-drop{opacity:1!important;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))!important}.i-cruiserA{transform:none!important}.i-walk{transform:translateX(120px)!important}}