/* Stable parallel slice planes avoid intersecting transparent surfaces. */
.fresh-loaf .loaf-model{transform:rotateX(-5deg) rotateY(-12deg)!important}
.fresh-loaf .loaf-slice{transform:translate3d(calc((var(--slice) - 2.5)*(12px + var(--food-progress,0)*65px)),calc((var(--slice) - 2.5)*var(--food-progress,0)*-12px),calc((2.5 - var(--slice))*3px)) scale(calc(1 - var(--food-progress,0)*.25))!important;backface-visibility:hidden}
.fresh-tomato>img{display:none}.fresh-tomato canvas{width:100%;height:auto;display:block;filter:drop-shadow(8px 18px 12px #254b2825)}
@media(max-width:600px){.fresh-loaf .loaf-slice{transform:translate3d(calc((var(--slice) - 2.5)*(8px + var(--food-progress,0)*34px)),calc((var(--slice) - 2.5)*var(--food-progress,0)*-8px),calc((2.5 - var(--slice))*2px)) scale(calc(1 - var(--food-progress,0)*.25))!important}}
@media(prefers-reduced-motion:reduce){.fresh-loaf .loaf-slice{transform:translate3d(calc((var(--slice) - 2.5)*12px),0,calc((2.5 - var(--slice))*3px))!important}}
/* Rotate the geometry inside WebGL rather than flattening the canvas in CSS. */
.fresh-tomato{transform:translate3d(calc(var(--food-progress,0)*-30px),calc(var(--food-progress,0)*-15px),40px) rotateZ(-9deg)!important}
.fresh-tomato.tomato-d{transform:translate3d(calc(var(--food-progress,0)*10px),calc(var(--food-progress,0)*-35px),30px) rotateZ(14deg)!important}
.fresh-tomato>img{display:block}.fresh-tomato.produce-rendered>img{display:none}
.closing .closing-star{display:block;width:145px;height:145px;margin:0 auto 32px;transform:rotate(-28deg)!important;font-size:0;line-height:0}
.closing-star canvas{display:block;width:100%;height:100%;filter:drop-shadow(6px 12px 9px #001f253d)}
@media(max-width:600px){.closing .closing-star{width:110px;height:110px;margin-bottom:25px}}

.fresh-tomato:not(.produce-rendered) canvas{visibility:hidden}