/* Jimbo hero animations (homepage only). Built by _build/jimbo_anim_live.py from _build/anim/. */
/* ---------- Jimbo idle (same keyframes as the live site) ---------- */
.jimbo__body{transform-box:fill-box;transform-origin:50% 100%;animation:jb-bob 3.4s ease-in-out infinite}
.jimbo__flick{transform-box:fill-box;transform-origin:50% 100%;animation:jb-flick 1.7s ease-in-out infinite}
.jimbo__eyes{transform-box:fill-box;transform-origin:50% 55%;animation:jb-blink 5.2s infinite}
.jimbo__pupils{animation:jb-look 9s ease-in-out infinite}
@keyframes jb-bob{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-2.5%) rotate(2.5deg)}}
@keyframes jb-flick{0%,100%{transform:scale(1,1)}25%{transform:scale(.97,1.05)}55%{transform:scale(1.03,.96)}80%{transform:scale(.99,1.02)}}
@keyframes jb-blink{0%,91%,97%,100%{transform:scaleY(1)}93.5%{transform:scaleY(.08)}}
@keyframes jb-look{0%,38%,100%{transform:translate(0,0)}44%,58%{transform:translate(-1.6px,0)}64%,80%{transform:translate(1.4px,.4px)}}
/* 6) hover: faster + brighter */
.jb-in{transition:filter .25s}

/* ---------- props: hidden until a move uses them ---------- */
.p-watch,.r-scene,.s-desk,.s-type,.s-cov,.s-n,.r-sign--green,.r-happy,.r-spark,.r-inset,.r-ring,.d-headset,.d-desk,.d-type,.d-booked,.d-track,.u-trail,.t-truck,.h-burst,.h-dust,.h-streak,.t-thumb,.t-speed,.t-driver{opacity:0}
.jb-in,.jb-pose,.d-desk,.d-type,.d-pin,.d-booked,.d-track,.d-hand,.p-chassis,.p-spin,.p-trail,.p-box,.p-thumb,.p-speed,.p-burst,.p-dust,.p-streak,.g-glow,.t-truck{transform-box:view-box}
.jb-in,.jb-pose{transform-origin:50px 134px}            /* his feet (Jimbo's own 100x140 box) */
.jb-arm{transform-box:view-box;transform-origin:83px 101px}  /* his shoulder */
.jimbo__pupils{transform-box:view-box}
.p-box{transform-origin:0 0}.p-thumb{transform-origin:0 6px}.p-burst,.p-dust{transform-origin:0 0}.g-glow{transform-origin:0 -10px}

/* timing helpers: every layer of one move runs on the same clock */
.stage[class*="play-"] *{animation-fill-mode:both}
.play-urgency{--d:5s}.play-truck{--d:5.5s}.play-hero{--d:4s}.play-desk{--d:5.5s}.play-rush{--d:6s}.play-recovery{--d:6.5s}.play-spot{--d:5.6s}

/* ===== 1) URGENCY (5 s) ===== */
.play-urgency .jb-in{animation:u-move var(--d) linear}
.play-urgency .jb-arm{animation:u-arm var(--d) ease-in-out}
.play-urgency .p-watch{animation:u-watch var(--d) linear}
.play-urgency .jimbo__eyes{animation:u-eyes var(--d) ease-out}
.play-urgency .jimbo__flick{animation:jb-flick .32s ease-in-out infinite}
.play-urgency .jb-pose{animation:u-flare var(--d) ease-in-out}
.play-urgency .jimbo__pupils{animation:u-look var(--d) ease-in-out}
@keyframes u-look{0%,14%{transform:none}20%,44%{transform:translate(2.2px,-1.6px)}50%,100%{transform:none}}
@keyframes c-look{0%,5%{transform:none}9%,25%{transform:translate(2.2px,-1.6px)}29%,62%{transform:none}66%,76%{transform:translate(2px,1.6px)}80%,100%{transform:none}}
.play-urgency .u-trail{animation:u-trailo var(--d) linear}
.play-urgency .p-trail{animation:u-trail var(--d) linear}
@keyframes u-arm{0%,12%{transform:none}24%,40%{transform:rotate(-112deg)}48%,100%{transform:none}}
@keyframes u-watch{0%,12%{opacity:0}16%,42%{opacity:1}47%,100%{opacity:0}}
@keyframes u-eyes{0%,26%{transform:scale(1)}30%,46%{transform:scale(1.28)}50%,100%{transform:scale(1)}}
@keyframes u-flare{0%,32%{transform:none}36%{transform:scale(1.04,1.14)}39%{transform:scale(1.02,.95)}42%{transform:scale(1.03,1.12)}46%{transform:scale(1,1)}100%{transform:none}}
@keyframes u-move{0%,46%{transform:none;animation-timing-function:cubic-bezier(.6,0,1,.6)}50%{transform:translateX(-10px) skewX(8deg)}62%{transform:translateX(300px) skewX(-16deg)}62.01%,76%{transform:translateX(-240px) skewX(-10deg);animation-timing-function:cubic-bezier(0,.5,.4,1)}90%{transform:translateX(6px) skewX(4deg)}95%{transform:translateX(-2px)}100%{transform:none}}
@keyframes u-trailo{0%,50%{opacity:0}53%,62%{opacity:1}68%,76%{opacity:0}80%,88%{opacity:.8}94%,100%{opacity:0}}
@keyframes u-trail{0%,50%{transform:translateX(0) scaleX(.3)}62%{transform:translateX(300px) scaleX(2.2)}62.01%,76%{transform:translateX(-240px) scaleX(1.6)}90%{transform:translateX(6px) scaleX(.6)}100%{transform:translateX(0) scaleX(.3)}}

/* ===== 2) TRUCK (5.5 s): rolls in, Jimbo hops into the cab (he drives, seen through the window), thumbs-up, peels out to the right edge of his
   column, then Jimbo slides back in from the column's left edge. Wheels spin, the body rides on a slight suspension bob. ===== */
.play-truck .t-truck{animation:t-truck var(--d) linear}
.play-truck .jb-in{animation:t-jimbo var(--d) linear}
.play-truck .t-driver{animation:t-driver var(--d) linear}
.play-truck .t-thumb{animation:t-thumbo var(--d) linear}.play-truck .p-thumb{animation:t-thumb var(--d) ease-out}
.play-truck .t-speed{animation:t-speedo var(--d) linear}.play-truck .p-speed{animation:t-speed .25s linear infinite}
.play-truck .p-spin{animation:t-spin var(--d) linear}
.play-truck .p-chassis{animation:t-bob .42s ease-in-out infinite}
@keyframes t-truck{0%{opacity:0;transform:translateX(-26px)}10%{opacity:1;transform:none}46%{transform:none;animation-timing-function:cubic-bezier(.55,0,1,.45)}50%{transform:translateX(-5px)}68%{opacity:1;transform:translateX(270px)}68.01%,100%{opacity:0;transform:translateX(270px)}}
@keyframes t-spin{0%{transform:rotate(-200deg)}10%,46%{transform:rotate(0)}50%{transform:rotate(-40deg)}68%,100%{transform:rotate(1500deg)}}
@keyframes t-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}}
/* feet (180,194) hop up to the cab door, shrink and slip inside; the driver copy takes over in the window */
@keyframes t-jimbo{0%,11%{transform:none;opacity:1;animation-timing-function:ease-out}18%{transform:translate(26px,-70px) scale(.6)}24%{transform:translate(48px,-46px) scale(.2);opacity:1}24.01%,79%{opacity:0;transform:translateX(-240px)}79.01%{opacity:1;transform:translateX(-240px);animation-timing-function:cubic-bezier(.15,.6,.35,1)}93%{transform:translateX(5px) skewX(3deg)}97%{transform:translateX(-2px)}100%{transform:none;opacity:1}}
@keyframes t-driver{0%,22%{opacity:0}25%,100%{opacity:1}}
@keyframes t-thumbo{0%,27%{opacity:0}29%,45%{opacity:1}48%,100%{opacity:0}}
@keyframes t-thumb{0%,27%{transform:scale(0) rotate(-30deg)}32%{transform:scale(1.25) rotate(8deg)}36%,100%{transform:scale(1) rotate(0)}}
@keyframes t-speedo{0%,47%{opacity:0}50%,64%{opacity:1}68%,100%{opacity:0}}
@keyframes t-speed{0%{transform:translateX(0)}100%{transform:translateX(-14px)}}

/* ===== 3) HERO (4 s) ===== */
.play-hero .jb-in{animation:h-move var(--d) linear}
.play-hero .h-streak{animation:h-streako var(--d) linear}.play-hero .p-streak{animation:h-streak var(--d) linear}
.play-hero .h-burst{animation:h-bursto var(--d) linear}.play-hero .p-burst{animation:h-burst var(--d) ease-out}
.play-hero .h-dust{animation:h-dusto var(--d) linear}.play-hero .p-dust{animation:h-dust var(--d) ease-out}
.play-hero .jb-arm{animation:h-arm var(--d) ease-in-out}
@keyframes h-move{0%{transform:translateY(-175px) scale(.7);filter:none;animation-timing-function:cubic-bezier(.5,0,.9,.6)}36%{transform:translateY(0) scale(.95,1.08)}42%{transform:scale(1.18,.8);animation-timing-function:ease-out}52%{transform:scale(.95,1.06)}60%{transform:scale(1.02,.99)}66%{transform:scale(1.06);filter:drop-shadow(0 0 10px rgba(255,180,40,.9))}88%{transform:scale(1.06);filter:drop-shadow(0 0 6px rgba(255,180,40,.6))}100%{transform:none;filter:none}}
@keyframes h-streako{0%,30%{opacity:1}38%,100%{opacity:0}}
@keyframes h-streak{0%{transform:translateY(-175px) scaleY(1.2)}36%{transform:translateY(0) scaleY(.4)}100%{transform:translateY(0) scaleY(.2)}}
@keyframes h-bursto{0%,36%{opacity:0}40%{opacity:1}64%,100%{opacity:0}}
@keyframes h-burst{0%,36%{transform:scale(.9)}64%,100%{transform:scale(2)}}
@keyframes h-dusto{0%,36%{opacity:0}40%{opacity:.9}60%,100%{opacity:0}}
@keyframes h-dust{0%,36%{transform:scale(.4,1)}60%,100%{transform:scale(1.8,.6) translateY(-4px)}}
@keyframes h-arm{0%,58%{transform:none}68%,88%{transform:rotate(-150deg)}100%{transform:none}}   /* fist up */

/* ===== 4) DISPATCH DESK (5.5 s): the desk + monitor slide up in front of him, headset on, he types; the load card fills in (pickup, delivery),
   BOOKED pops, then TRACKING while the truck pin runs the route; the desk slides away and he's back to idle. Everything stays inside his column. ===== */
.d-desk,.d-type{transform-origin:225px 200px}
.d-fill{transform-box:fill-box;transform-origin:0 50%}
.d-booked,.d-track{transform-origin:306px 158px}
.play-desk .d-desk,.play-desk .d-type{animation:d-desk var(--d) cubic-bezier(.3,.7,.4,1)}
.play-desk .d-headset{animation:d-headset var(--d) ease-out}
.play-desk .jb-arm{animation:d-wave var(--d) linear}
.play-desk .jimbo__pupils{animation:d-look var(--d) ease-in-out}
.play-desk .d-hand--l{animation:d-tap .22s ease-in-out infinite}.play-desk .d-hand--r{animation:d-tap .22s ease-in-out .11s infinite}
.play-desk .d-talk{animation:d-talk .7s ease-in-out infinite}
.play-desk .d-fill1{animation:d-fill1 var(--d) ease-out}.play-desk .d-fill2{animation:d-fill2 var(--d) ease-out}
.play-desk .d-booked{animation:d-booked var(--d) linear}.play-desk .d-track{animation:d-track var(--d) linear}
.play-desk .d-pin{animation:d-pin var(--d) ease-in-out}.play-desk .d-dot{animation:d-talk .6s ease-in-out infinite}
@keyframes d-desk{0%{opacity:0;transform:translateY(26px)}9%,90%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(26px)}}
@keyframes d-headset{0%,4%{opacity:0;transform:translateY(-8px)}10%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes d-wave{0%{opacity:1}5%,92%{opacity:0}97%,100%{opacity:1}}
@keyframes d-look{0%,8%{transform:none}12%,88%{transform:translate(2.2px,.6px)}94%,100%{transform:none}}
@keyframes d-tap{0%,100%{transform:translateY(0)}50%{transform:translateY(1.6px)}}
@keyframes d-talk{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes d-fill1{0%,12%{transform:scaleX(0)}24%,100%{transform:scaleX(1)}}
@keyframes d-fill2{0%,26%{transform:scaleX(0)}38%,100%{transform:scaleX(1)}}
@keyframes d-booked{0%,41%{opacity:0;transform:scale(.3)}45%{opacity:1;transform:scale(1.2)}48%,55%{opacity:1;transform:scale(1)}57%,100%{opacity:0}}
@keyframes d-track{0%,55%{opacity:0;transform:scale(.6)}58%{opacity:1;transform:scale(1.1)}60%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0}}
@keyframes d-pin{0%,56%{transform:translate(0,0)}66%{transform:translate(20px,-18px)}74%{transform:translate(38px,-11px)}88%,100%{transform:translate(57px,-48px)}}

/* ===== 5) URGENCY -> DISPATCH DESK (6 s): watch check, eyes wide, flame flares, then the desk slides in and he books it fast. ===== */
.play-rush .p-watch{animation:r-watch var(--d) linear}
.play-rush .jb-arm{animation:r-arm var(--d) ease-in-out}
.play-rush .jimbo__eyes{animation:r-eyes var(--d) ease-out}
.play-rush .jb-pose{animation:r-flare var(--d) ease-in-out}
.play-rush .jimbo__flick{animation:jb-flick .32s ease-in-out infinite}
.play-rush .jimbo__pupils{animation:r-look var(--d) ease-in-out}
.play-rush .d-desk,.play-rush .d-type{animation:r-desk var(--d) cubic-bezier(.3,.7,.4,1)}
.play-rush .d-headset{animation:r-headset var(--d) ease-out}
.play-rush .d-hand--l{animation:d-tap .16s ease-in-out infinite}.play-rush .d-hand--r{animation:d-tap .16s ease-in-out .08s infinite}
.play-rush .d-talk{animation:d-talk .5s ease-in-out infinite}
.play-rush .d-fill1{animation:r-fill1 var(--d) ease-out}.play-rush .d-fill2{animation:r-fill2 var(--d) ease-out}
.play-rush .d-booked{animation:r-booked var(--d) linear}.play-rush .d-track{animation:r-track var(--d) linear}
.play-rush .d-pin{animation:r-pin var(--d) ease-in-out}.play-rush .d-dot{animation:d-talk .5s ease-in-out infinite}
@keyframes r-watch{0%,3%{opacity:0}6%,20%{opacity:1}23%,100%{opacity:0}}
@keyframes r-arm{0%,3%{transform:none;opacity:1}10%,19%{transform:rotate(-112deg);opacity:1}24%{transform:none;opacity:1}27%,92%{opacity:0;transform:none}97%,100%{opacity:1}}
@keyframes r-eyes{0%,10%{transform:scale(1)}13%,24%{transform:scale(1.28)}28%,100%{transform:scale(1)}}
@keyframes r-flare{0%,15%{transform:none}18%{transform:scale(1.04,1.14)}21%{transform:scale(1.02,.95)}24%{transform:scale(1.03,1.1)}27%,100%{transform:none}}
@keyframes r-look{0%,4%{transform:none}8%,22%{transform:translate(2.2px,-1.6px)}28%{transform:none}32%,88%{transform:translate(2.2px,.6px)}94%,100%{transform:none}}
@keyframes r-desk{0%,24%{opacity:0;transform:translateY(26px)}31%,91%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(26px)}}
@keyframes r-headset{0%,26%{opacity:0;transform:translateY(-8px)}31%,91%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes r-fill1{0%,32%{transform:scaleX(0)}40%,100%{transform:scaleX(1)}}
@keyframes r-fill2{0%,41%{transform:scaleX(0)}49%,100%{transform:scaleX(1)}}
@keyframes r-booked{0%,51%{opacity:0;transform:scale(.3)}54%{opacity:1;transform:scale(1.2)}57%,63%{opacity:1;transform:scale(1)}65%,100%{opacity:0}}
@keyframes r-track{0%,63%{opacity:0;transform:scale(.6)}66%{opacity:1;transform:scale(1.1)}68%,91%{opacity:1;transform:scale(1)}96%,100%{opacity:0}}
@keyframes r-pin{0%,64%{transform:translate(0,0)}72%{transform:translate(20px,-18px)}79%{transform:translate(38px,-11px)}89%,100%{transform:translate(57px,-48px)}}


/* ===== RECOVERY (6.5 s, r139): another (unbranded) carrier no-shows at the shipper's dock; the shipper calls; Jimbo answers (inset, headset);
   the JT truck, Jimbo driving, pulls in from the left edge of his column; thumbs-up; the sign flips to COVERED, the shipper cheers. Jimbo himself
   steps aside for the scene and is back at the end. ===== */
.r-scene,.r-truck,.r-gray,.r-inset,.r-sign,.r-jump,.r-phonearm,.r-spark,.r-ring{transform-box:view-box}
.r-sign{transform-origin:86px 112.5px}.r-inset{transform-origin:296px 100px}.r-phonearm{transform-origin:200px 153px}.r-jump{transform-origin:190px 200px}.r-spark{transform-origin:192px 126px}
.play-recovery .jb-in{animation:r-jb var(--d) linear}
.play-recovery .r-scene{animation:r-scene var(--d) linear}
.play-recovery .r-gray{animation:r-gray var(--d) cubic-bezier(.5,0,1,.6)}
.play-recovery .r-sad{animation:r-sad var(--d) linear}.play-recovery .r-happy{animation:r-happy var(--d) linear}
.play-recovery .r-phonearm{animation:r-phone var(--d) ease-in-out}
.play-recovery .r-ring{animation:r-ring var(--d) linear}
.play-recovery .r-inset{animation:r-inset var(--d) cubic-bezier(.3,.7,.4,1.3)}
.play-recovery .r-talk{animation:d-talk .5s ease-in-out infinite}
.play-recovery .r-truck{animation:r-truck var(--d) linear}
.play-recovery .r-truck .t-driver{opacity:1}
.play-recovery .r-truck .t-thumb{animation:r-thumbo var(--d) linear}.play-recovery .r-truck .p-thumb{animation:r-thumb var(--d) ease-out}
.play-recovery .r-truck .p-spin{animation:r-spin var(--d) linear}
.play-recovery .r-truck .p-chassis{animation:t-bob .42s ease-in-out infinite}
.play-recovery .r-sign--red{animation:r-red var(--d) linear}.play-recovery .r-sign--green{animation:r-green var(--d) linear}
.play-recovery .r-jump{animation:r-jump var(--d) ease-in-out}
.play-recovery .r-spark{animation:r-spark var(--d) ease-out}
@keyframes r-jb{0%{opacity:1}4%,91%{opacity:0}97%,100%{opacity:1}}
@keyframes r-scene{0%{opacity:0}4%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes r-gray{0%,4%{transform:none;opacity:1}20%{transform:translateX(230px);opacity:1}20.01%,100%{opacity:0;transform:translateX(230px)}}
@keyframes r-sad{0%,73%{opacity:1}73.01%,100%{opacity:0}}
@keyframes r-happy{0%,73%{opacity:0}73.01%,100%{opacity:1}}
@keyframes r-phone{0%,18%{transform:none}25%,46%{transform:rotate(-128deg)}52%,75%{transform:none}77%,79%{transform:rotate(-100deg)}81%{transform:rotate(-125deg)}83%{transform:rotate(-100deg)}85%,87%{transform:rotate(-125deg)}91%,100%{transform:none}}
@keyframes r-ring{0%,25%{opacity:0}27%{opacity:1}30%{opacity:.2}33%{opacity:1}36%{opacity:.2}39%{opacity:1}42%,100%{opacity:0}}
@keyframes r-inset{0%,31%{opacity:0;transform:scale(.4)}35%,47%{opacity:1;transform:scale(1)}51%,100%{opacity:0;transform:scale(.6)}}
@keyframes r-truck{0%,48%{transform:translateX(-200px);animation-timing-function:cubic-bezier(.2,.7,.35,1)}63%{transform:translateX(3px)}66%{transform:none}100%{transform:none}}
@keyframes r-spin{0%,48%{transform:rotate(-900deg)}63%,100%{transform:rotate(0)}}
@keyframes r-thumbo{0%,64%{opacity:0}66%,80%{opacity:1}83%,100%{opacity:0}}
@keyframes r-thumb{0%,64%{transform:scale(0) rotate(-30deg)}68%{transform:scale(1.25) rotate(8deg)}71%,100%{transform:scale(1) rotate(0)}}
@keyframes r-red{0%,70%{transform:scaleY(1);opacity:1}72.5%{transform:scaleY(0);opacity:1}72.51%,100%{opacity:0}}
@keyframes r-green{0%,72.5%{transform:scaleY(0);opacity:0}72.51%{opacity:1;transform:scaleY(0)}75%{transform:scaleY(1.12)}77%,100%{opacity:1;transform:scaleY(1)}}
@keyframes r-jump{0%,74%{transform:none}77%{transform:translateY(-12px)}80%{transform:none}82.5%{transform:translateY(-7px)}85%,100%{transform:none}}
@keyframes r-spark{0%,74%{opacity:0;transform:scale(.4) rotate(0)}78%{opacity:1;transform:scale(1.1) rotate(10deg)}88%{opacity:.8;transform:scale(1) rotate(20deg)}93%,100%{opacity:0}}
.play-recovery .r-sad,.play-recovery .r-happy{animation-fill-mode:both}

/* ===== SPOT MARKET (5.6 s, r140): desk + load board slide up; generic lanes scroll; he clicks row after row and each flips to COVERED, faster and
   faster; the counter ticks up; his flame burns hotter as he goes. ===== */
.s-desk,.s-type,.s-rows,.s-click,.s-hand{transform-box:view-box}.s-desk,.s-type{transform-origin:225px 200px}.s-click{transform-origin:0 0}
.play-spot .s-desk,.play-spot .s-type{animation:d-desk var(--d) cubic-bezier(.3,.7,.4,1)}
.play-spot .jb-arm{animation:d-wave var(--d) linear}
.play-spot .jimbo__pupils{animation:d-look var(--d) ease-in-out}
.play-spot .s-hand--l{animation:d-tap .2s ease-in-out infinite}.play-spot .s-hand--r{animation:d-tap .2s ease-in-out .1s infinite}
.play-spot .jimbo__flick{animation:jb-flick .45s ease-in-out infinite}
.play-spot .jb-in{animation:s-hot var(--d) ease-in}
.play-spot .jb-pose{animation:s-grow var(--d) ease-in}
.play-spot .s-rows{animation:s-scroll var(--d) linear}
.play-spot .s-click{animation:s-click var(--d) linear}
@keyframes s-hot{0%,10%{filter:none}50%{filter:brightness(1.08) saturate(1.15) drop-shadow(0 0 5px rgba(255,150,40,.6))}82%{filter:brightness(1.2) saturate(1.35) drop-shadow(0 0 13px rgba(255,120,20,.95))}92%{filter:brightness(1.1) drop-shadow(0 0 6px rgba(255,150,40,.6))}100%{filter:none}}
@keyframes s-grow{0%,10%{transform:none}82%{transform:scale(1.05,1.1)}94%,100%{transform:none}}
@keyframes s-scroll{0%{transform:translateY(0px)}12%{transform:translateY(0px)}25%{transform:translateY(0px)}36%{transform:translateY(-12px)}45.5%{transform:translateY(-28px)}53.5%{transform:translateY(-44px)}60.5%{transform:translateY(-60px)}66.5%{transform:translateY(-76px)}71.5%{transform:translateY(-92px)}75.5%{transform:translateY(-108px)}79%{transform:translateY(-124px)}90%{transform:translateY(-124px)}100%{transform:translateY(-124px)}}
@keyframes s-click{0%{transform:scale(1)}10.8%{transform:scale(1)}11.6%{transform:scale(.72)}12.6%{transform:scale(1)}23.8%{transform:scale(1)}24.6%{transform:scale(.72)}25.6%{transform:scale(1)}34.8%{transform:scale(1)}35.6%{transform:scale(.72)}36.6%{transform:scale(1)}44.3%{transform:scale(1)}45.1%{transform:scale(.72)}46.1%{transform:scale(1)}52.3%{transform:scale(1)}53.1%{transform:scale(.72)}54.1%{transform:scale(1)}59.3%{transform:scale(1)}60.1%{transform:scale(.72)}61.1%{transform:scale(1)}65.3%{transform:scale(1)}66.1%{transform:scale(.72)}67.1%{transform:scale(1)}70.3%{transform:scale(1)}71.1%{transform:scale(.72)}72.1%{transform:scale(1)}74.3%{transform:scale(1)}75.1%{transform:scale(.72)}76.1%{transform:scale(1)}77.8%{transform:scale(1)}78.6%{transform:scale(.72)}79.6%{transform:scale(1)}100%{transform:scale(1)}}
.play-spot .s-cov0{animation:s-cov0 var(--d) linear}@keyframes s-cov0{0%,12%{opacity:0}12.01%,93%{opacity:1}97%,100%{opacity:0}}
.play-spot .s-cov1{animation:s-cov1 var(--d) linear}@keyframes s-cov1{0%,25%{opacity:0}25.01%,93%{opacity:1}97%,100%{opacity:0}}
.play-spot .s-cov2{animation:s-cov2 var(--d) linear}@keyframes s-cov2{0%,36%{opacity:0}36.01%,93%{opacity:1}97%,100%{opacity:0}}
.play-spot .s-cov3{animation:s-cov3 var(--d) linear}@keyframes s-cov3{0%,45.5%{opacity:0}45.51%,93%{opacity:1}97%,100%{opacity:0}}
.play-spot .s-cov4{animation:s-cov4 var(--d) linear}@keyframes s-cov4{0%,53.5%{opacity:0}53.51%,93%{opacity:1}97%,100%{opacity:0}}
.play-spot .s-cov5{animation:s-cov5 var(--d) linear}@keyframes s-cov5{0%,60.5%{opacity:0}60.51%,93%{opacity:1}97%,100%{opacity:0}}
.play-spot .s-cov6{animation:s-cov6 var(--d) linear}@keyframes s-cov6{0%,66.5%{opacity:0}66.51%,93%{opacity:1}97%,100%{opacity:0}}
.play-spot .s-cov7{animation:s-cov7 var(--d) linear}@keyframes s-cov7{0%,71.5%{opacity:0}71.51%,93%{opacity:1}97%,100%{opacity:0}}
.play-spot .s-cov8{animation:s-cov8 var(--d) linear}@keyframes s-cov8{0%,75.5%{opacity:0}75.51%,93%{opacity:1}97%,100%{opacity:0}}
.play-spot .s-cov9{animation:s-cov9 var(--d) linear}@keyframes s-cov9{0%,79%{opacity:0}79.01%,93%{opacity:1}97%,100%{opacity:0}}
.play-spot .s-n0{animation:s-n0 var(--d) linear}@keyframes s-n0{0%,12%{opacity:1}12.01%,100%{opacity:0}}
.play-spot .s-n1{animation:s-n1 var(--d) linear}@keyframes s-n1{0%,12%{opacity:0}12.01%,25%{opacity:1}25.01%,100%{opacity:0}}
.play-spot .s-n2{animation:s-n2 var(--d) linear}@keyframes s-n2{0%,25%{opacity:0}25.01%,36%{opacity:1}36.01%,100%{opacity:0}}
.play-spot .s-n3{animation:s-n3 var(--d) linear}@keyframes s-n3{0%,36%{opacity:0}36.01%,45.5%{opacity:1}45.51%,100%{opacity:0}}
.play-spot .s-n4{animation:s-n4 var(--d) linear}@keyframes s-n4{0%,45.5%{opacity:0}45.51%,53.5%{opacity:1}53.51%,100%{opacity:0}}
.play-spot .s-n5{animation:s-n5 var(--d) linear}@keyframes s-n5{0%,53.5%{opacity:0}53.51%,60.5%{opacity:1}60.51%,100%{opacity:0}}
.play-spot .s-n6{animation:s-n6 var(--d) linear}@keyframes s-n6{0%,60.5%{opacity:0}60.51%,66.5%{opacity:1}66.51%,100%{opacity:0}}
.play-spot .s-n7{animation:s-n7 var(--d) linear}@keyframes s-n7{0%,66.5%{opacity:0}66.51%,71.5%{opacity:1}71.51%,100%{opacity:0}}
.play-spot .s-n8{animation:s-n8 var(--d) linear}@keyframes s-n8{0%,71.5%{opacity:0}71.51%,75.5%{opacity:1}75.51%,100%{opacity:0}}
.play-spot .s-n9{animation:s-n9 var(--d) linear}@keyframes s-n9{0%,75.5%{opacity:0}75.51%,79%{opacity:1}79.01%,100%{opacity:0}}
.play-spot .s-n10{animation:s-n10 var(--d) linear}@keyframes s-n10{0%,79%{opacity:0}79.01%,93%{opacity:1}97%,100%{opacity:0}}


/* r141: Jimbo slides 48 units left while a desk is out, so the bigger monitor never covers him */
@keyframes d-shift{0%{transform:none}9%,90%{transform:translateX(-48px)}98%,100%{transform:none}}
@keyframes r-shift{0%,24%{transform:none}31%,91%{transform:translateX(-48px)}98%,100%{transform:none}}
.play-desk .jb-in{animation:d-shift var(--d) cubic-bezier(.3,.7,.4,1)}
.play-rush .jb-in{animation:r-shift var(--d) cubic-bezier(.3,.7,.4,1)}
.play-spot .jb-in{animation:s-hot var(--d) ease-in,d-shift var(--d) cubic-bezier(.3,.7,.4,1)}
/* reduced motion: Jimbo stays still, no props, no moves */
@media (prefers-reduced-motion:reduce){
  .stage *,.stage[class*="play-"] *{animation:none!important;transition:none!important}
  .stage .p-watch,.stage .r-scene,.stage .s-desk,.stage .s-type,.stage .d-headset,.stage .d-desk,.stage .d-type,.stage .d-booked,.stage .d-track,.stage .t-driver,.stage .g-glow,.stage .u-trail,.stage .t-truck,.stage .h-burst,.stage .h-dust,.stage .h-streak,.stage .t-thumb,.stage .t-speed{opacity:0!important}
  .jb-in{transform:none!important}
}

/* ---------- r141 live layout (homepage hero) ---------- */
.jb-stagewrap .stage{pointer-events:none}
.jb-stagewrap .jb-in{transition:filter .25s}
.hero-jimbo:hover .jb-stagewrap .jb-in,.hero-jimbo:focus-visible .jb-stagewrap .jb-in{filter:brightness(1.14) drop-shadow(0 0 9px rgba(255,170,40,.85))}
.hero-jimbo:hover .jb-stagewrap .jimbo__flick{animation-duration:.55s}.hero-jimbo:hover .jb-stagewrap .jimbo__body{animation-duration:1.5s}
.hero-jimbo.is-moving .hero-jimbo__bubble{visibility:hidden}
/* phones / tablets: the stage overlays the in-card Jimbo 1:1 (the original keeps his exact size and spot) */
.jb-stagewrap--card{position:relative;display:inline-block;line-height:0}
.jb-stagewrap--card>.jimbo{visibility:hidden}
.jb-stagewrap--card .stage{position:absolute;width:360%;height:157.143%;left:-130%;top:-42.857%;max-width:none;max-height:none;overflow:visible}
@media (min-width:1280px){
  :root{--jcol:clamp(20rem,24vw,28rem)}
  .hero__grid:has(.hot-wrap){grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr)}
  .hero:has(.hot-wrap) h1{font-size:clamp(2.6rem,min(4.25vw,11.5vh),5.6rem)}
  .hotx-jimbo,.hotx__text{width:var(--jcol)}
  .hero:has(.hot-wrap) .kicker{font-size:.8rem;letter-spacing:.12em;gap:.6rem;white-space:nowrap}.hero:has(.hot-wrap) .kicker::before{width:1.6rem}
  .hotx{gap:clamp(.9rem,2.2vh,1.6rem)}
  .hotx-jimbo{padding-top:0;gap:.45rem;justify-items:center}
  .hero-jimbo--side{gap:.3rem}
  .jb-stagewrap--side{position:relative;display:block;width:100%;aspect-ratio:360/220}
  .jb-stagewrap--side .stage{display:block;width:100%;height:100%;overflow:hidden}
  .jb-stagewrap--side .jb-in{filter:drop-shadow(0 0 10px rgba(255,122,26,.4))}
  .hero .hero-jimbo--side .jb-stagewrap--side .hero-jimbo__bubble{top:0;bottom:auto;left:0;right:0;margin-inline:auto;z-index:2;max-width:calc(100% - 1rem);transform-origin:50% 100%}
}
@media (min-width:1600px){.hero__grid:has(.hot-wrap){grid-template-columns:minmax(0,.84fr) minmax(0,1.6fr)}.hero:has(.hot-wrap) h1{font-size:clamp(2.6rem,min(3.8vw,11vh),5.4rem)}}