/* Late 2 The Future: scroll story layer (decorative only). Oct 10 2026.
   Base styles = the static "rest" pose of each beat (shown as-is with prefers-reduced-motion).
   Keyframes are driven by the scroll position: CSS scroll-driven animations where supported, JS scrub fallback otherwise. */
.story{position:relative;overflow:hidden;pointer-events:none;user-select:none;contain:layout paint;view-timeline:--st block}
.story *{pointer-events:none}
.story img{display:block;width:100%;height:auto;max-width:none;margin:0;border:0;border-radius:0;background:none;object-fit:fill}
.story .in{position:absolute;inset:0;max-width:1120px;margin:0 auto}
.story .tr{position:absolute;inset:0}
.story .ac{position:absolute;bottom:0;transform-origin:50% 100%;will-change:transform}
.story .pit{position:absolute;left:0;right:0;top:0;bottom:12px;overflow:hidden}
.story .desk{position:absolute;left:2%;right:2%;bottom:0;height:16px;background:var(--oat);border:3px solid var(--esp);border-radius:9px}
.story .fx{position:absolute;font-family:Rubik,system-ui,sans-serif;font-weight:900;line-height:1;white-space:nowrap;color:var(--mus);-webkit-text-stroke:2px var(--esp);paint-order:stroke fill;text-shadow:3px 3px 0 var(--esp)}
.story .bub{position:absolute;white-space:nowrap;font-family:Caveat,cursive;font-size:clamp(17px,2.1vw,24px);line-height:1;color:var(--esp);background:var(--card);border:2.5px solid var(--esp);border-radius:14px;padding:5px 10px 6px;box-shadow:3px 3px 0 var(--esp)}
.story .a{animation-duration:1s;animation-timing-function:cubic-bezier(.3,.55,.4,1);animation-fill-mode:both;animation-play-state:paused}
@supports (animation-timeline:view()){html:not(.js-scrub) .story .a{animation-play-state:running;animation-timeline:--st;animation-range:entry 30% exit 70%}}
.bob{animation:bob .56s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-5%)}}

/* ---------- hero loop video (sits exactly on top of the static scene image) ---------- */
.hero-vid{position:absolute;top:0;left:50%;width:100%;max-width:1600px;aspect-ratio:16/9;translate:-50% 0;pointer-events:none;opacity:0;transition:opacity .4s}
.hero-vid.on{opacity:1}
.hero-vid video{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- A: rocket zooms past, hosts react, the Dood barks ---------- */
.st-a{height:clamp(170px,22vw,250px);margin:-36px 0 18px}
.st-a .ac img{filter:none}
.st-a .luke{left:4%;width:clamp(92px,15vw,190px)}
.st-a .dood{left:50%;translate:-50% 0;width:clamp(104px,16vw,200px);z-index:1}
.st-a .david{right:4%;width:clamp(92px,15vw,190px)}
.st-a .q1{left:92%;top:6%;font-size:clamp(26px,3.4vw,44px);rotate:12deg}
.st-a .q2{left:80%;top:-2%;font-size:clamp(18px,2.2vw,30px);rotate:-10deg;color:var(--oat)}
.st-a .bang{right:96%;top:4%;font-size:clamp(28px,3.6vw,48px);rotate:-12deg;color:var(--org)}
.st-a .woof{left:84%;top:0;font-size:clamp(18px,2.4vw,32px);rotate:-8deg;color:var(--oat);background:var(--org);-webkit-text-stroke:0;text-shadow:none;border:3px solid var(--esp);border-radius:12px;padding:4px 8px;box-shadow:3px 3px 0 var(--esp)}
.st-a .rkt{position:absolute;left:0;top:2%;width:clamp(130px,20vw,270px)}
.st-a .tr.rk{transform:translateX(27%)}
@keyframes a-rk{0%,3.2%{transform:translateX(-30%);animation-timing-function:cubic-bezier(.45,.1,.55,.9)}46.4%,100%{transform:translateX(115%)}}
@keyframes a-pop1{0%,9.6%{transform:translateY(102%)}19.2%{transform:translateY(-6%) rotate(-2deg)}24%{transform:translateY(0) rotate(-5deg)}36.8%{transform:rotate(6deg)}48%,100%{transform:rotate(0)}}
@keyframes a-pop2{0%,22.4%{transform:translateY(102%)}32%{transform:translateY(-12%) scale(1.06)}37.6%{transform:translateY(0) scale(.97)}44.8%{transform:rotate(5deg)}52.8%,100%{transform:rotate(0)}}
@keyframes a-pop3{0%,36.8%{transform:translateY(102%)}46.4%{transform:translateY(-5%)}50.4%{transform:translateY(0) rotate(-4deg)}54.4%{transform:rotate(4deg)}58.4%{transform:rotate(-4deg)}62.4%{transform:rotate(3deg)}68%,100%{transform:rotate(0)}}
@keyframes a-fx1{0%,22.4%{opacity:0;transform:scale(.2)}28%{opacity:1;transform:scale(1.25)}33.6%,100%{opacity:1;transform:scale(1)}}
@keyframes a-fx2{0%,33.6%{opacity:0;transform:scale(.2)}39.2%{opacity:1;transform:scale(1.3)}44.8%,100%{opacity:1;transform:scale(1)}}
@keyframes a-fx3{0%,49.6%{opacity:0;transform:scale(.2) rotate(-20deg)}55.2%{opacity:1;transform:scale(1.3)}60.8%,100%{opacity:1;transform:scale(1)}}
.st-a .tr.rk{animation-name:a-rk}
.st-a .luke{animation-name:a-pop1}.st-a .david{animation-name:a-pop2}.st-a .dood{animation-name:a-pop3}
.st-a .q1,.st-a .q2{animation-name:a-fx1}.st-a .bang{animation-name:a-fx2}.st-a .woof{animation-name:a-fx3}

/* ---------- B: the chase under the three cards (David trips over Mug) ---------- */
.st-b{height:clamp(170px,21vw,240px);margin-top:10px}
.st-b .ground{position:absolute;left:0;right:0;bottom:8px;border-bottom:4px dashed var(--line)}
.st-b .ac{bottom:4px}
.st-b .rkt{position:absolute;left:0;top:4%;width:clamp(104px,15vw,190px)}
.st-b .run{position:absolute;left:0;bottom:4px;width:clamp(78px,10.5vw,132px)}
.st-b .mug{position:absolute;left:0;bottom:6px;width:clamp(58px,7.4vw,92px)}
.st-b .mug .bub{left:62%;bottom:96%;rotate:-4deg}
.st-b .trip{position:absolute;left:0;bottom:0;width:100%;transform-origin:62% 92%;transform:rotate(78deg) translate(-8%,30%)}
.st-b .oof{left:-6%;bottom:58%;font-size:clamp(18px,2.2vw,28px);color:var(--org);rotate:10deg}
.st-b .rk{transform:translateX(86%)}
.st-b .lk{transform:translateX(72%)}
.st-b .dv{transform:translateX(36%)}
.st-b .mg{transform:translateX(52%)}
.st-b .dv .runimg{opacity:0}
@keyframes b-rk{0%{transform:translateX(-25%)}68.8%,100%{transform:translateX(110%)}}
@keyframes b-lk{0%{transform:translateX(-14%);animation-timing-function:linear}72%,100%{transform:translateX(108%)}}
@keyframes b-dv{0%,3.2%{transform:translateX(-22%);animation-timing-function:linear}38.4%{transform:translateX(33%)}51.2%,100%{transform:translateX(36%)}}
@keyframes b-mg{0%{transform:translateX(18%);animation-timing-function:linear}38.4%{transform:translateX(40%)}52.8%{transform:translateX(44%)}100%{transform:translateX(64%)}}
@keyframes b-run{0%,38.3%{opacity:1}38.4%,100%{opacity:0}}
@keyframes b-trip{0%,38.3%{opacity:0;transform:rotate(0) translate(0,0)}38.4%{opacity:1;transform:rotate(10deg) translate(0,-4%)}44.8%{transform:rotate(60deg) translate(-3.2%,8%)}51.2%,100%{opacity:1;transform:rotate(78deg) translate(-6.4%,30%)}}
@keyframes b-oof{0%,43.2%{opacity:0;transform:scale(.2)}48.8%{opacity:1;transform:scale(1.3)}54.4%,100%{opacity:1;transform:scale(1)}}
@keyframes b-bub{0%,49.6%{opacity:0;transform:scale(.3)}56%{opacity:1;transform:scale(1.1)}60.8%,100%{opacity:1;transform:scale(1)}}
.st-b .rk{animation-name:b-rk}.st-b .lk{animation-name:b-lk}.st-b .dv{animation-name:b-dv}.st-b .mg{animation-name:b-mg}
.st-b .runimg{animation-name:b-run}.st-b .trip{animation-name:b-trip}.st-b .oof{animation-name:b-oof}.st-b .mug .bub{animation-name:b-bub}
.st-b .runimg img,.st-b .lk img,.st-b .mug img{transform-origin:50% 100%}

/* ---------- C: the hosts hide behind their bio cards, then peek out ---------- */
.st-c{height:clamp(78px,7.4vw,96px);margin-top:-6px;overflow:hidden}
.st-c .ac{width:clamp(84px,10.5vw,128px);translate:-50% 0;transform:translateY(44%)}
.st-c .luke{left:12.5%}
.st-c .david{left:37.6%}
.st-c .bang{left:88%;top:6%;font-size:clamp(20px,2.4vw,30px);color:var(--org);rotate:14deg;z-index:2}
@keyframes c-peek{0%,6.4%{transform:translateY(102%)}12.8%{transform:translateY(84%) rotate(-3deg)}17.6%{transform:translateY(86%) rotate(3deg)}22.4%{transform:translateY(84%) rotate(-3deg)}27.2%{transform:translateY(90%)}36.8%{transform:translateY(40%)}41.6%,48%{transform:translateY(44%)}53.6%{transform:translateY(96%)}62.4%{transform:translateY(40%)}67.2%,100%{transform:translateY(44%)}}
@keyframes c-bang{0%,38.4%{opacity:0;transform:scale(.2)}44%{opacity:1;transform:scale(1.3)}49.6%,100%{opacity:1;transform:scale(1)}}
.st-c .luke{animation-name:c-peek}.st-c .david{animation-name:c-peek2}
@keyframes c-peek2{0%,9.6%{transform:translateY(102%)}16%{transform:translateY(84%) rotate(3deg)}20.8%{transform:translateY(86%) rotate(-3deg)}25.6%{transform:translateY(84%) rotate(3deg)}30.4%{transform:translateY(90%)}40%{transform:translateY(38%)}44.8%,51.2%{transform:translateY(44%)}56%{transform:translateY(96%)}64.8%{transform:translateY(38%)}69.6%,100%{transform:translateY(44%)}}
@keyframes c-peek3{0%,19.2%{transform:translateY(102%)}25.6%{transform:translateY(80%) rotate(-4deg)}32%{transform:translateY(82%) rotate(4deg)}43.2%{transform:translateY(40%) rotate(-6deg)}49.6%{transform:translateY(44%) rotate(6deg)}56%{transform:translateY(44%) rotate(-3deg)}62.4%,100%{transform:translateY(44%) rotate(0)}}
@keyframes c-woof{0%,46.4%{opacity:0;transform:scale(.2) rotate(-20deg)}52%{opacity:1;transform:scale(1.25)}57.6%,100%{opacity:1;transform:scale(1)}}
.st-c .dood{left:25%;width:clamp(72px,8.6vw,106px);z-index:1;animation-name:c-peek3}
.st-c .woofs{left:62%;bottom:100%;font-size:clamp(13px,1.5vw,18px);rotate:-10deg;color:var(--oat);background:var(--org);-webkit-text-stroke:0;text-shadow:none;border:2.5px solid var(--esp);border-radius:10px;padding:2px 6px;box-shadow:2px 2px 0 var(--esp);animation-name:c-woof}
.st-c .bang{animation-name:c-bang}

/* ---------- D: they catch the rocket... it's already gone. The Dood holds up the sign ---------- */
.st-d{height:clamp(210px,25vw,300px);margin-top:40px}
.st-d .luke{left:3%;width:clamp(88px,14vw,180px)}
.st-d .david{right:3%;width:clamp(88px,14vw,180px)}
.st-d .dood{left:50%;translate:-50% 0;width:clamp(120px,14.5vw,186px)}
.st-d .rkt{position:absolute;left:0;top:14%;width:clamp(110px,15vw,200px);translate:-50% 0}
.st-d .puff{position:absolute;left:0;top:0;width:clamp(90px,12vw,150px);translate:-50% 0;transform-origin:50% 40%}
.st-d .run{position:absolute;left:0;bottom:12px;width:clamp(74px,9vw,116px);translate:-50% 0}
.st-d .run.mir{scale:-1 1}
.st-d .late{left:24%;top:8%;font-size:clamp(22px,3.2vw,42px);rotate:-7deg;translate:-50% 0}
.st-d .rk,.st-d .lk,.st-d .dk{transform:translateX(50%)}
.st-d .rk .rkt{opacity:0;transform:scale(0)}
.st-d .run{opacity:0}
.st-d .pf{transform:translateX(77%)}
.st-d .puff{transform:scale(.7)}
@keyframes d-rk{0%{transform:translateX(-20%)}27.2%,100%{transform:translateX(50%)}}
@keyframes d-rk2{0%,27.2%{opacity:1;transform:translateY(0) scale(1)}31.2%{transform:translateY(-8%)}35.2%{transform:translateY(5%)}39.9%{opacity:1;transform:translateY(0) scale(1)}40%,100%{opacity:0;transform:scale(0)}}
@keyframes d-lk{0%,8%{transform:translateX(-12%)}40%,100%{transform:translateX(41%)}}
@keyframes d-dk{0%,8%{transform:translateX(112%)}40%,100%{transform:translateX(59%)}}
@keyframes d-run{0%,8%{opacity:1;transform:translateY(0) rotate(0)}33.6%{opacity:1;transform:translateY(-34%) rotate(-10deg)}41.6%{opacity:1;transform:translateY(-14%) rotate(-22deg)}46.4%,100%{opacity:0;transform:translateY(40%) rotate(-22deg)}}
@keyframes d-pf{0%,51.2%{transform:translateX(50%)}65.6%,100%{transform:translateX(77%)}}
@keyframes d-pf2{0%,39.2%{opacity:0;transform:scale(.1)}44%{opacity:1;transform:scale(1.3)}51.2%{opacity:1;transform:scale(1)}65.6%,100%{opacity:1;transform:scale(.7)}}
@keyframes d-late{0%,41.6%{opacity:0;transform:scale(.2)}46.4%{opacity:1;transform:scale(1.35)}51.2%,100%{opacity:1;transform:scale(1)}}
@keyframes d-cry{0%,46.4%{transform:translateY(102%)}54.4%{transform:translateY(-4%)}58.4%,100%{transform:translateY(0)}}
@keyframes d-dood{0%,52.8%{transform:translateY(102%)}61.6%{transform:translateY(-6%) rotate(-3deg)}66.4%{transform:translateY(0) rotate(2deg)}70.4%,100%{transform:rotate(0)}}
.st-d .rk{animation-name:d-rk}.st-d .rkt{animation-name:d-rk2}.st-d .lk{animation-name:d-lk}.st-d .dk{animation-name:d-dk}.st-d .run{animation-name:d-run}
.st-d .pf{animation-name:d-pf}.st-d .puff{animation-name:d-pf2}
.st-d .late{animation-name:d-late}.st-d .luke,.st-d .david{animation-name:d-cry}.st-d .dood{animation-name:d-dood}

/* ---------- breakpoints ---------- */
@media (max-width:860px){
 .st-c .luke{left:25%}.st-c .david{left:75%}.st-c .dood{left:50%}
}
@media (max-width:480px){
 .story .xtra{display:none}
 .st-a{margin:-28px 0 12px}
 .st-c .luke{left:22%}.st-c .david{left:78%}
 .st-d .late{left:22%;top:4%;font-size:20px}
 .st-d{margin-top:28px}
}
@media (prefers-reduced-motion:reduce){
 .story .a,.story .bob,.crew .card.wag>img,.crew .card.wag .dood-tail{animation:none!important}
 .hero-vid{display:none}
 .st-a .rkt{scale:.78;transform-origin:0 0}
}
@media (prefers-reduced-motion:reduce) and (max-width:480px){.st-b .lk{display:none}.st-b .rk{transform:translateX(70%)}}
.story-static .story .a{animation:none!important}

/* ---------- crew cards: the Dood wags + head-tilt bounces, Mug jiggles (triggered when the card scrolls into view) ---------- */
.crew .card{position:relative}
.crew .card>img{position:relative;z-index:1}
.dood-tail{position:absolute;z-index:0;top:58px;left:calc(50% + 38px);width:46px;transform-origin:35% 81%;rotate:22deg;pointer-events:none}
.dood-tail img{display:block;width:100%;height:auto;margin:0;border:0;border-radius:0;background:none}
.crew .card.wag .dood-tail{animation:wag .42s ease-in-out 9 alternate}
@keyframes wag{from{transform:rotate(-14deg)}to{transform:rotate(18deg)}}
.crew .card.wag.c-dood>img{animation:tilt 1.7s ease-in-out 2}
@keyframes tilt{0%,100%{transform:none}18%{transform:translateY(-7px) rotate(-8deg)}34%{transform:translateY(0) rotate(-6deg)}52%{transform:translateY(-6px) rotate(7deg)}70%{transform:translateY(0) rotate(5deg)}86%{transform:rotate(0)}}
.crew .card.wag.c-mug>img{animation:jig .5s ease-in-out 4}
@keyframes jig{0%,100%{transform:none}25%{transform:translateX(-3px) rotate(-4deg)}75%{transform:translateX(3px) rotate(4deg)}}