.topping-layer{background-image:url('/assets/natural-sauces.png')}
.cookie-half{position:absolute;inset:0;will-change:transform}
.torn-dough{background-image:url('/assets/torn-cookies.png');background-size:300% 100%}
.half-left{clip-path:inset(0 50% 0 0);animation:pull-left 1s cubic-bezier(.22,.65,.25,1) both}
.half-right{clip-path:inset(0 0 0 50%);animation:pull-right 1s cubic-bezier(.22,.65,.25,1) both}
.split-cookie .topping-layer{opacity:.9}
.interior-ooze{position:absolute;inset:0;z-index:3;animation:reveal-centre 1.2s ease both;pointer-events:none}
.interior-still,.interior-drip{position:absolute;inset:0;background-image:url('/assets/melting-centres.png');background-size:400% 100%;background-position:var(--position) center;background-repeat:no-repeat}
.interior-still{clip-path:inset(0 0 47% 0)}
.interior-drip{clip-path:inset(53% 0 0 0);transform-origin:50% 53%;animation:slow-ooze 3.8s ease-in-out 1s infinite}
@keyframes pull-left{from{transform:translateX(5%)}to{transform:translateX(-3%)}}
@keyframes pull-right{from{transform:translateX(-5%)}to{transform:translateX(3%)}}
@keyframes reveal-centre{0%,25%{opacity:0;transform:scaleX(.65)}100%{opacity:1;transform:scaleX(1)}}
@keyframes slow-ooze{0%,100%{transform:scaleY(.96)}55%{transform:scaleY(1.17)}}
@media(prefers-reduced-motion:reduce){.cookie-half,.interior-ooze,.interior-drip{animation:none!important}.half-left{transform:translateX(-3%)}.half-right{transform:translateX(3%)}}
.interior-ooze{left:34%;right:34%;top:25%;bottom:30%}
.interior-ooze{left:28%;right:28%;top:20%;bottom:20%}@keyframes slow-ooze{0%,100%{transform:scaleY(.94)}55%{transform:scaleY(1.4)}}