/* Backstube 2.42. All moving pictures are actual multi-frame WebP images
   made from the original hand-colored pencil art (no Canvas, no SVG). */

/* True 22-frame light switch. Unlike the old opacity-only switch, each
   intermediate physical oven painting is rendered, and remains pixel-aligned. */
#app .zw170-launch.zw222-bakery-entry #zw222OvenLight > img.zw242-preview-switch{
 display:block!important;position:absolute!important;inset:0!important;
 width:100%!important;height:100%!important;
 max-width:none!important;max-height:none!important;
 object-fit:contain!important;object-position:center!important;
 margin:0!important;padding:0!important;
 opacity:1!important;visibility:visible!important;
 z-index:18!important;pointer-events:none!important;
 filter:none!important;transform:none!important;
 animation:none!important;transition:none!important;
}
#app .zw170-launch.zw222-bakery-entry #zw222OvenLight.zw242-light-changing .zw222-sunburst{
 opacity:0!important;animation:none!important;
}
#app .zw170-launch.zw222-bakery-entry .zw226-friend-button.zw226-celebrating > img.zw226-friend-cheer{
 animation:zw242-joy-bob 1.65s ease-in-out 1!important;
}
@keyframes zw242-joy-bob{
 0%,100%{transform:translate3d(0,0,0) rotate(0)}
 16%{transform:translate3d(-3px,-6px,0) rotate(-3deg)}
 30%{transform:translate3d(0,-12px,0) rotate(3deg)}
 50%{transform:translate3d(3px,-4px,0) rotate(2deg)}
 75%{transform:translate3d(0,-9px,0) rotate(-2deg)}
}
/* The oven genuinely cools after baking; smoke stops BEFORE the food leaves. */
#app .zw209-bake .zw209-oven-work.zw242-cooling{
 filter:drop-shadow(0 5px 3px rgba(89,58,33,.23))!important;
}
#app .zw209-bake .zw209-oven-work.zw242-cooling .zw209-oven{
 animation:none!important;
}
#app .zw209-bake .zw209-oven-work.zw242-cooling .zw209-oven-smoke{
 opacity:0!important;box-shadow:none!important;animation:none!important;
 transition:opacity .3s linear!important;
}
#app .zw209-bake .zw209-oven-work > img.zw242-bake-oven-off{
 position:absolute!important;inset:0!important;
 display:block!important;
 width:100%!important;height:100%!important;
 max-width:none!important;max-height:none!important;
 z-index:4!important;opacity:1!important;
 object-fit:contain!important;object-position:center!important;
 pointer-events:none!important;
 margin:0!important;padding:0!important;filter:none!important;
 animation:none!important;transform:none!important;
}
#app .zw209-bake .zw209-oven-work.zw242-food-leaving .zw209-oven-food{
 opacity:0!important;transition:opacity .12s ease-out!important;
}
img.zw242-food-exit{
 position:fixed!important;z-index:99996!important;
 width:clamp(88px,25vw,130px)!important;height:clamp(88px,25vw,130px)!important;
 object-fit:contain!important;
 pointer-events:none!important;touch-action:none!important;
 filter:drop-shadow(0 5px 4px rgba(83,54,29,.33))!important;
 transform:translate(-50%,-50%);will-change:transform,opacity!important;
}
/* Hand-painted 24-frame eating animation, visible above the default static
   character. Character sprite and food each have their own 24-frame cycle. */
#app .zw209 .zw209-friend > img.zw242-chew-frames{
 display:block!important;position:absolute!important;
 width:122%!important;height:122%!important;
 max-width:none!important;max-height:none!important;
 left:-11%!important;top:-8%!important;
 object-fit:contain!important;object-position:center center!important;
 opacity:0!important;visibility:hidden!important;
 pointer-events:none!important;z-index:12!important;
 filter:drop-shadow(0 2px 2px rgba(86,49,29,.16))!important;
 animation:none!important;transform:none!important;
}
#app .zw209 .zw209-friend.zw212-chewing > img.zw242-chew-frames{
 opacity:1!important;visibility:visible!important;
}
#app .zw209 .zw209-friend.zw212-chewing > img.zw212-base,
#app .zw209 .zw209-friend.zw212-chewing > img.zw212-cheer{
 opacity:0!important;
}
#app .zw209 .zw209-friend.zw212-delighted:not(.zw212-chewing) > img.zw242-chew-frames{
 opacity:0!important;visibility:hidden!important;
}
#app .zw209 .zw209-friend.zw212-delighted:not(.zw212-chewing) > img.zw212-cheer{
 opacity:1!important;
}
@media(prefers-reduced-motion:reduce){
 #app .zw209 .zw209-friend > img.zw242-chew-frames{
  display:none!important;
 }
 #app .zw209 .zw209-friend.zw212-chewing > img.zw212-base{
  opacity:1!important;
 }
 #app .zw170-launch.zw222-bakery-entry .zw226-friend-button.zw226-celebrating > img.zw226-friend-cheer{
  animation:none!important;
 }
}

/* v243 real watercolor-pencil plate, replaces the synthetic CSS disk. */
#app .zw209 .zw209-serve-work > img.zw209-serving-plate.zw243-painted-plate{
 position:absolute!important;
 inset:14% 2% -3% 2%!important;
 display:block!important;
 width:96%!important;height:90%!important;
 max-width:none!important;max-height:none!important;
 object-fit:contain!important;object-position:center center!important;
 margin:0!important;padding:0!important;
 background:transparent!important;background-image:none!important;
 border:0!important;border-radius:0!important;
 outline:0!important;box-shadow:none!important;
 opacity:1!important;transform:none!important;
 filter:drop-shadow(0 4px 4px rgba(100,63,40,.30))!important;
 pointer-events:none!important;z-index:2!important;
}
#app .zw209 .zw209-serve-work .zw209-serving > img.zw243-serving-meal{
 width:100%!important;height:100%!important;
 object-fit:contain!important;
 margin:0!important;
 filter:drop-shadow(0 2px 2px rgba(98,54,30,.12))!important;
}
/* Disable the old blanket scale-down: a proper illustration with two
   remaining pastries is now drawn after the first feeding. */
#app .zw209 .zw212-portions-1 .zw209-serving img.zw243-serving-meal{
 transform:scale(1)!important;opacity:1!important;
}
img.zw243-exit-plate{
 position:fixed!important;
 width:clamp(125px,36vw,166px)!important;
 height:clamp(125px,36vw,166px)!important;
 z-index:99995!important;
 object-fit:contain!important;
 pointer-events:none!important;touch-action:none!important;
 filter:drop-shadow(0 5px 4px rgba(95,60,35,.33))!important;
 transform:translate(-50%,-50%);will-change:transform,opacity!important;
}
#app .zw209 .zw209-friend.zw243-final-hop{
 animation:zw243-both-friends-jump .91s ease-in-out 1!important;
}
@keyframes zw243-both-friends-jump{
 0%,100%{transform:translateY(0) rotate(0) scale(1)}
 20%{transform:translateY(-11px) rotate(-4deg) scale(1.06)}
 43%{transform:translateY(1px) rotate(3deg) scale(.98)}
 70%{transform:translateY(-8px) rotate(-2deg) scale(1.04)}
 89%{transform:translateY(0) rotate(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){
 #app .zw209 .zw209-friend.zw243-final-hop{
  animation:none!important;
 }
}