.kitchen-art{display:block;width:100%;height:100%;max-height:175px;overflow:visible;shape-rendering:crispEdges}
.kitchen-art--pork-transfer,.kitchen-art--soy-pour,.kitchen-art--mix-top,.kitchen-art--wrap{shape-rendering:geometricPrecision}
.kitchen-art--active .cup-pour{animation:kitchen-pour .48s steps(4,end)}
.kitchen-art--active .kitchen-squeeze{animation:kitchen-squeeze .32s steps(3,end) 2;transform-origin:160px 98px}
@keyframes kitchen-pour{50%{transform:rotate(-12deg) translate(-5px,8px)}}
@keyframes kitchen-squeeze{50%{transform:scale(.94,1.05)}}

.kitchen-art--active .pork-transfer{animation:pork-transfer 1.2s ease-in-out both}
.kitchen-art--active .pork-scraper{animation:pork-scrape 1.2s ease-in-out both}
@keyframes pork-transfer{0%,18%{transform:translate(-68px,-39px) scale(.9)}70%,100%{transform:translate(0,0) scale(1)}}
@keyframes pork-scrape{0%,18%{transform:translate(0,0)}65%{transform:translate(68px,40px);opacity:1}90%,100%{transform:translate(68px,0);opacity:0}}
.soy-bottle{transform-origin:184px 48px}
.kitchen-art--active .soy-bottle{animation:soy-tilt 1.2s ease-in-out both}
.kitchen-art--active .soy-stream{stroke-dasharray:34;stroke-dashoffset:34;animation:soy-stream 1.2s linear both}
.soy-drop{opacity:0}
.kitchen-art--active .soy-drop-one{animation:soy-drip .5s .18s linear both}
.kitchen-art--active .soy-drop-two{animation:soy-drip .5s .4s linear both}
.kitchen-art--active .soy-drop-three{animation:soy-drip .5s .62s linear both}
.kitchen-art--active .soy-arriving{animation:soy-stain 1.2s linear both}
@keyframes soy-tilt{0%,100%{transform:rotate(0)}25%,75%{transform:rotate(-7deg)}}
@keyframes soy-stream{0%,15%{stroke-dashoffset:34;opacity:0}25%,65%{stroke-dashoffset:0;opacity:1}80%,100%{stroke-dashoffset:-34;opacity:0}}
@keyframes soy-drip{0%{transform:translate(0,0);opacity:0}15%{opacity:1}90%{transform:translate(-12px,39px);opacity:1}100%{transform:translate(-12px,39px);opacity:0}}
@keyframes soy-stain{0%,28%{opacity:0}80%,100%{opacity:1}}
.mix-paddle{transform-origin:231px 20px}
.kitchen-art--active .mix-paddle{animation:mix-scoop 1.2s ease-in-out both}
.kitchen-art--active .mix-fold{animation:mix-fold-in 1.2s ease-in-out both;transform-origin:159px 98px}
.kitchen-art--active .mix-furrow{stroke-dasharray:110;animation:mix-trace 1.2s ease-in-out both}
.kitchen-art--active .mix-onion-moving{animation:mix-spread 1.2s ease-in-out both}
@keyframes mix-scoop{0%{transform:rotate(0)}15%{transform:rotate(-15deg)}40%{transform:rotate(14deg)}62%{transform:rotate(4deg) translate(5px,-6px)}82%{transform:rotate(-9deg) translate(0,-3px)}100%{transform:rotate(0)}}
@keyframes mix-fold-in{0%,15%{transform:translate(6px,-6px) scale(.9)}45%{transform:translate(-12px,10px) scale(1.1,.85)}75%{transform:translate(-4px,-4px) scale(.9,1.1)}100%{transform:none}}
@keyframes mix-trace{0%,10%{stroke-dashoffset:110;opacity:0}20%{opacity:.8}55%{stroke-dashoffset:0;opacity:.8}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes mix-spread{0%,12%{transform:translate(var(--onion-x),var(--onion-y))}48%{transform:translate(calc(var(--onion-x) + var(--push-x)),calc(var(--onion-y) + var(--push-y)))}100%{transform:translate(0,0)}}
.wrap-fingers{transform:translateX(var(--finger-reach));transform-origin:90px 128px}
.kitchen-art--active .wrap-fingers{animation:wrap-pinch .7s ease-in-out both}
@keyframes wrap-pinch{0%,100%{transform:translateX(var(--finger-reach))}48%{transform:translateX(calc(var(--finger-reach) + 9px)) rotate(-4deg)}}
.mix-furrow{opacity:0}
.mix-grain{opacity:var(--grain-after);transform:scale(var(--grain-size-after));transform-origin:0 0}
.mix-bind{opacity:var(--bind-after)}
.kitchen-art--active .mix-grain{animation:mix-grain-blend 1.2s ease-in-out both}
.kitchen-art--active .mix-bind{animation:mix-bind-in 1.2s ease-in-out both}
@keyframes mix-grain-blend{0%,15%{opacity:var(--grain-before);transform:scale(var(--grain-size-before))}100%{opacity:var(--grain-after);transform:scale(var(--grain-size-after))}}
@keyframes mix-bind-in{0%,15%{opacity:var(--bind-before)}100%{opacity:var(--bind-after)}}
.mix-spoon-load{opacity:0}
.kitchen-art--active .mix-spoon-load{animation:mix-lift 1.2s linear both}
@keyframes mix-lift{0%,38%{opacity:0}46%,68%{opacity:1}84%,100%{opacity:0}}
body.reduced .kitchen-art--active *{animation:none!important}
body.reduced .pork-scraper,body.reduced .soy-drips{display:none}
@media(prefers-reduced-motion:reduce){body:not(.full-motion) .kitchen-art--active *{animation:none!important}body:not(.full-motion) .pork-scraper,body:not(.full-motion) .soy-drips{display:none}}
