/* Lesson 2 motion: every small job shows preparation, travel/contact and a held result. Layout lives in brand-storybook.css. */
.story-art{--motion:1}
.greeting-reply .wave-arm{transform-origin:53px 2px;animation:wave .65s ease-in-out 3}
.celebrating .pip{animation:celebrate-hop .65s ease-in-out 2}
.celebrating .pip-happy-eyes,.celebrating .pip-cheeks{opacity:1}
.celebrating .pip-eyes{opacity:0}
.rolling-pin{animation:roll calc(.8s * var(--motion)) ease-in-out both}
.lift-pastry{animation:pastry-lift calc(.85s * var(--motion)) ease-in-out both}
.ingredient-drop{animation:drop calc(.7s * var(--motion)) ease-in both}
.stirring-spoon{transform-origin:0 0;animation:stir calc(.5s * var(--motion)) ease-in-out 3}
.carried-bowl{animation:bowl-lift calc(.85s * var(--motion)) ease-in-out both}
.pouring-bowl{animation:pour-bowl calc(.8s * var(--motion)) ease-in-out both}
.pumpkin-stream{stroke-dasharray:130;animation:pour-stream calc(1.25s * var(--motion)) ease-out both}
.pie-to-oven{animation:pie-oven calc(1.1s * var(--motion)) ease-in-out both;transform-box:fill-box;transform-origin:center}
.baking-clock{animation:clock-wait calc(1.5s * var(--motion)) ease-in-out both}
.fresh-pie{animation:pie-appear calc(.8s * var(--motion)) ease-out both}
.written-words{clip-path:inset(0 100% 0 0);animation:write-words calc(1.4s * var(--motion)) linear both}
.writing-pencil{animation:write-pencil calc(1.4s * var(--motion)) linear both}
.arriving-pencil{animation:pencil-arrive calc(.65s * var(--motion)) ease-out both}
.card-sliding{animation:slide-card calc(1s * var(--motion)) ease-in-out both}
.delivering-card{animation:deliver-card calc(1.4s * var(--motion)) ease-in-out both}
.phase-choose .costume-cloth{animation:cloth-choice calc(.8s * var(--motion)) ease-in-out both}
.eye-marks{animation:marks calc(.8s * var(--motion)) ease-out both}
.scissor-snips{transform-origin:0 0;animation:snip calc(.43s * var(--motion)) ease-in-out 3}
.star-lifting{animation:lift-star calc(.75s * var(--motion)) ease-out both}
.star-sticking{animation:stick-star calc(.9s * var(--motion)) ease-in-out both}
.phase-dress .dressing-cloth{animation:dress calc(1.1s * var(--motion)) ease-out both}
.phase-walk .costumed-pip{animation:walk calc(1.4s * var(--motion)) ease-in-out both}
.basket-carry{animation:carry-basket calc(1s * var(--motion)) ease-in-out both}
.balls-carry{animation:carry-balls calc(1s * var(--motion)) ease-in-out both}
.marker-unrolling{stroke-dasharray:104;animation:unroll calc(1s * var(--motion)) ease-in-out both}
.ball-lifting{animation:lift-ball calc(.8s * var(--motion)) ease-in-out both}
.tossing-ball{animation:toss calc(1.45s * var(--motion)) cubic-bezier(.2,.3,.4,1) both}
.gathering-blocks{animation:gather-blocks calc(.95s * var(--motion)) ease-in-out both}
.boxing-blocks{animation:box-blocks calc(.95s * var(--motion)) ease-in-out both}
.puzzle-carry{animation:carry-puzzle calc(1.1s * var(--motion)) ease-in-out both}
.puzzle-pick{animation:puzzle-pick calc(.85s * var(--motion)) ease-out both}
.cups-carry{animation:carry-cups calc(1s * var(--motion)) ease-in-out both}
.water-pouring{transform-origin:770px 350px;animation:pour-water calc(1.3s * var(--motion)) ease-in-out both}
.paused *{animation-play-state:paused!important}
@keyframes wave{50%{rotate:-18deg}}
@keyframes celebrate-hop{50%{translate:0 -15px}}
@keyframes roll{0%{translate:-50px 0}35%{translate:45px 12px}70%{translate:-45px 17px}100%{translate:20px 20px}}
@keyframes pastry-lift{to{translate:0 -32px;scale:.95}}
@keyframes drop{from{translate:0 -55px;opacity:0}to{translate:0 80px;opacity:1}}
@keyframes stir{0%,100%{rotate:-13deg;translate:-9px 0}50%{rotate:18deg;translate:9px 7px}}
@keyframes bowl-lift{from{translate:16px 150px}to{translate:0 0}}
@keyframes pour-bowl{to{rotate:-38deg;translate:-50px -3px}}
@keyframes pour-stream{0%,20%{stroke-dashoffset:130;opacity:0}30%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes pie-oven{to{translate:257px 175px;scale:.45}}
@keyframes clock-wait{50%{rotate:8deg}100%{rotate:0}}
@keyframes pie-appear{from{translate:0 22px;opacity:.3}to{translate:0 0;opacity:1}}
@keyframes write-words{to{clip-path:inset(0 0 0 0)}}
@keyframes write-pencil{from{translate:-116px 0;rotate:-26deg}to{translate:var(--write-end,235px) 0;rotate:-26deg}}
@keyframes pencil-arrive{from{translate:160px -140px;rotate:-26deg;opacity:.3}to{translate:-116px 0;rotate:-26deg;opacity:1}}
@keyframes slide-card{to{translate:0 85px;scale:.84}}
@keyframes deliver-card{0%{translate:0 0;rotate:-5deg}50%{translate:170px -70px;rotate:4deg}100%{translate:442px 26px;rotate:0}}
@keyframes cloth-choice{50%{scale:1.05}}
@keyframes marks{from{opacity:0}to{opacity:1}}
@keyframes snip{50%{rotate:12deg;translate:8px 2px}}
@keyframes lift-star{to{translate:-200px -262px;rotate:20deg}}
@keyframes stick-star{0%{translate:-200px -262px;rotate:20deg}100%{translate:-517px -125px;rotate:0}}
@keyframes dress{from{translate:0 -110px;opacity:.4}to{translate:0 0;opacity:1}}
@keyframes walk{0%,100%{translate:0 0;rotate:0}25%{translate:20px -8px;rotate:3deg}50%{translate:42px 0;rotate:-3deg}75%{translate:20px -8px;rotate:3deg}}
@keyframes carry-basket{to{translate:-470px -226px;scale:1.767}}
@keyframes carry-balls{to{translate:-300px -102px;scale:1.382}}
@keyframes unroll{from{stroke-dashoffset:104}to{stroke-dashoffset:0}}
@keyframes lift-ball{from{translate:-28px 162px}to{translate:0 0}}
@keyframes toss{0%{translate:0 0;rotate:0}45%{translate:277px -262px;rotate:120deg}100%{translate:568px 49px;rotate:270deg}}
@keyframes gather-blocks{to{translate:-34px -49px;scale:.667}}
@keyframes box-blocks{to{translate:-143px -56px;scale:.614}}
@keyframes puzzle-pick{to{translate:-20px -20px;rotate:-5deg}}
@keyframes carry-puzzle{0%{translate:-20px -20px}60%{translate:-160px 100px}100%{translate:-305px 317px;scale:1.75}}
@keyframes carry-cups{to{translate:-510px 70px}}
@keyframes pour-water{0%{rotate:0;opacity:.4}40%,80%{rotate:-12deg;opacity:1}100%{rotate:0;opacity:1}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.written-words{clip-path:none}.pumpkin-stream{stroke-dashoffset:0}.marker-unrolling{stroke-dashoffset:0}}
.dish-carry{animation:dish-carry calc(.85s * var(--motion)) ease-in-out both;transform-origin:center;transform-box:fill-box}
.cooling-steam{animation:steam-fade calc(1.1s * var(--motion)) ease-out both}
@keyframes dish-carry{to{translate:-217px -24px;scale:2}}
@keyframes steam-fade{to{opacity:0}}
.water-level{transform-box:fill-box;transform-origin:center bottom;animation:water-rise calc(1.3s * var(--motion)) ease-in both}
.filling-grow{transform-box:fill-box;transform-origin:center;animation:filling-grow calc(1.25s * var(--motion)) ease-in both}
@keyframes water-rise{from{scale:1 0}to{scale:1 1}}
@keyframes filling-grow{0%,20%{scale:0;opacity:0}30%{opacity:1}100%{scale:1;opacity:1}}
.cloth-measuring{animation:cloth-measure calc(1.3s * var(--motion)) ease-in-out both}
.cloth-laying{animation:cloth-lay calc(.8s * var(--motion)) ease-in-out both}
@keyframes cloth-measure{to{translate:-130px 56px}}
@keyframes cloth-lay{to{translate:130px -56px}}
.pip-to-mirror{animation:pip-mirror calc(.9s * var(--motion)) ease-in-out both}
@keyframes pip-mirror{to{translate:246px -7px}}
.table-item-place{animation:table-item-place calc(1.05s * var(--motion,1)) ease-in-out both;animation-delay:var(--item-delay,0s)}
.table-item-lift{animation:table-item-lift calc(.7s * var(--motion,1)) ease-in-out both}
.table-cloth-carry{animation:table-cloth-carry calc(.85s * var(--motion,1)) ease-in-out both}
.table-cloth-spread{transform-origin:0 0;animation:table-cloth-spread calc(1.1s * var(--motion,1)) ease-out both}
@keyframes table-item-place{from{transform:translate(var(--from-x),var(--from-y))}to{transform:translate(0,0)}}
@keyframes table-item-lift{from{transform:translateY(0)}to{transform:translateY(-85px)}}
@keyframes table-cloth-carry{from{transform:translate(0,0)}to{transform:translate(281px,-210px)}}
@keyframes table-cloth-spread{from{transform:scale(.3,.08);opacity:.7}to{transform:scale(1,1);opacity:1}}
@media(prefers-reduced-motion:reduce){.table-item-place,.table-item-lift,.table-cloth-carry,.table-cloth-spread{animation-duration:.01ms;animation-delay:0s}}
.scene.narrating .pip{animation:job-nod .7s ease-in-out 1}
.rolling-pin{animation-duration:var(--phase-duration,1.6s)}
.pastry-flattening{transform-box:fill-box;transform-origin:center;animation:pastry-flatten var(--phase-duration,1.6s) ease-in-out both}
.pumpkin-stream,.filling-grow,.pie-to-oven,.written-words,.writing-pencil,.tossing-ball,.phase-walk .costumed-pip{animation-duration:var(--phase-duration,1.8s)}
.table-cloth-spread,.table-cloth-carry,.table-item-lift{animation-duration:var(--phase-duration,1.6s)}
.table-item-place{animation-duration:calc(var(--phase-duration,1.9s) - .25s)}
.placing-hands{animation:release-item calc(var(--phase-duration,1.9s) - .25s) ease-out both;animation-delay:var(--item-delay,0s)}
.placement-contact{transform-box:fill-box;transform-origin:center;animation:placement-contact calc(var(--phase-duration,1.9s) - .25s) ease-out both;animation-delay:var(--item-delay,0s)}
.scissor-snips{animation:none}
.scissor-blade-left,.scissor-blade-right{transform-origin:0 0;animation:scissor-left .4s ease-in-out 4}
.scissor-blade-right{animation-name:scissor-right}
.cut-openings{animation:cut-openings var(--phase-duration,1.8s) ease-out both}
.basket-landing{transform-box:fill-box;transform-origin:center;animation:landing-ring .8s ease-out both}
.landed-ball{animation:landed-ball .55s ease-out both}
@keyframes roll{0%{translate:-65px 20px}25%{translate:65px 22px}50%{translate:-65px 25px}75%{translate:65px 28px}100%{translate:0 30px}}
@keyframes pastry-flatten{0%{scale:.55 1.5}45%{scale:.8 1.25}100%{scale:1 1}}
@keyframes table-item-place{0%{transform:translate(var(--from-x),var(--from-y)) rotate(-5deg)}45%{transform:translate(calc(var(--from-x) * .5),calc(var(--from-y) * .35 - 70px)) rotate(3deg)}87%{transform:translate(0,-3px) rotate(0)}100%{transform:translate(0,0)}}
@keyframes release-item{0%,70%{opacity:1}100%{opacity:0}}
@keyframes placement-contact{0%,75%{opacity:0;scale:.6}83%{opacity:.7}100%{opacity:0;scale:1.25}}
@keyframes write-pencil{0%{translate:-116px 0;rotate:-26deg}25%{translate:calc(var(--write-end,235px) * .1) -4px;rotate:-23deg}50%{translate:calc(var(--write-end,235px) * .4) 1px;rotate:-28deg}75%{translate:calc(var(--write-end,235px) * .7) -3px;rotate:-24deg}100%{translate:var(--write-end,235px) 0;rotate:-26deg}}
@keyframes scissor-left{50%{rotate:12deg}}
@keyframes scissor-right{50%{rotate:-12deg}}
@keyframes cut-openings{0%,30%{opacity:0}55%{opacity:.4}100%{opacity:1}}
@keyframes landing-ring{from{opacity:.9;scale:.5}to{opacity:0;scale:1.6}}
@keyframes landed-ball{0%{translate:0 -15px}55%{translate:0 4px}80%{translate:0 -5px}100%{translate:0 0}}
@keyframes job-badge{from{opacity:0;translate:0 -7px}to{opacity:1;translate:0 0}}
@keyframes job-nod{50%{translate:0 5px;rotate:2deg}}
@media(prefers-reduced-motion:reduce){.scene.narrating:after,.scene.narrating .pip,.pastry-flattening,.placing-hands,.placement-contact,.cut-openings,.scissor-blade-left,.scissor-blade-right,.basket-landing,.landed-ball{animation:none}}