/* The scene is a clipped paint boundary. No image can cover the text below. */
#mp-app .mp-cooking{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:30px 0 5px;gap:0;isolation:isolate}
#mp-app .mp-cook-back{top:0;left:0;z-index:2}
#mp-app .lns-cook-stage{position:relative;width:100%;height:244px;flex:none;overflow:hidden;contain:paint;isolation:isolate;pointer-events:none;background:#fff}
#mp-app .lns-pot{position:absolute;width:280px;height:170px;left:50%;bottom:16px;transform:translateX(-50%);isolation:isolate;animation:lns-pot-in 700ms cubic-bezier(.2,0,0,1) both}
#mp-app .lns-pot-photo{position:absolute;inset:0;background-image:url('./assets/tagine-photo.png');background-size:560px 560px;background-position:left -230px;background-repeat:no-repeat;z-index:1}
#mp-app .lns-food-bed{position:absolute;left:8%;right:8%;top:12%;height:58%;z-index:2;overflow:hidden;border-radius:50%}
#mp-app .lns-food{position:absolute;left:var(--x);top:var(--y);width:32%;animation:lns-place 1350ms cubic-bezier(.22,.61,.36,1) var(--delay) both;transform-origin:50% 80%}
#mp-app .lns-food .mp-photo{background-image:url('./assets/cooking-ingredients-alpha.png');mask-image:none;-webkit-mask-image:none;mix-blend-mode:normal;filter:none;animation:lns-simmer 4100ms ease-in-out calc(var(--delay) + 1350ms) infinite}
#mp-app .lns-pot-rim{z-index:3;clip-path:inset(59% 0 0)}
#mp-app .lns-steam{position:absolute;width:280px;height:180px;left:50%;bottom:78px;transform:translateX(-50%);z-index:4;overflow:hidden;filter:blur(3px)}
#mp-app .lns-steam path{stroke-width:12;opacity:0;animation:lns-steam-rise 3400ms ease-in-out 1700ms infinite;transform-origin:50% 90%}
#mp-app .lns-steam path:nth-child(2){animation-delay:2700ms;stroke-width:16}
#mp-app .lns-steam path:nth-child(3){animation-delay:3700ms;stroke-width:10}
#mp-app .lns-cook-progress{position:absolute;bottom:1px;left:39%;width:22%;height:2px;background:#e8eee7;border-radius:3px;overflow:hidden}
#mp-app .lns-cook-progress span{display:block;height:100%;background:#638369;transform-origin:left;animation:lns-progress var(--cooking-duration,16000ms) linear both}
#mp-app .mp-cook-caption{position:relative;z-index:0;font:500 21px/1.3 Georgia,serif;color:#294f40;text-align:center;margin:12px 0;animation:none;min-height:28px;letter-spacing:0}
#mp-app .mp-tip-card{position:relative;z-index:0;min-height:112px;padding:12px 14px;border-radius:15px;border:1px solid #e5ece2;background:#f8faf6}
#mp-app .mp-cook-tip{font-size:14px;line-height:1.5;min-height:42px;margin:7px auto 8px;color:#345443}
#mp-app .mp-skip-cooking{margin:5px auto 0;min-height:36px}
#mp-app .mp-cook-disclaimer{margin-top:0}
@keyframes lns-pot-in{from{opacity:0;transform:translate(-50%,9px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes lns-place{0%{opacity:0;transform:translate(var(--travel),-38px) rotate(var(--angle)) scale(.88)}20%{opacity:1}80%{opacity:1;transform:translate(0,2px) rotate(0) scale(1,.86)}100%{opacity:1;transform:translate(0,0) rotate(0) scale(1,.9)}}
@keyframes lns-simmer{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes lns-steam-rise{0%{opacity:0;transform:translate(-4px,24px) scale(.85,.88)}35%{opacity:.72}65%{opacity:.4}100%{opacity:0;transform:translate(7px,-25px) scale(1.1,1.04)}}
@keyframes lns-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@container(max-width:335px){#mp-app .lns-cook-stage{height:218px}#mp-app .lns-pot{width:252px;height:153px}#mp-app .lns-pot-photo{background-size:504px 504px;background-position:left -207px}#mp-app .mp-cook-caption{font-size:19px}}
@media(prefers-reduced-motion:reduce){#mp-app .lns-cook-stage *{animation:none!important}#mp-app .lns-steam{display:none}}
/* One gesture at a time: oil → spices → water → fresh aromatics. */
#mp-app .lns-seasoning{position:absolute;width:280px;height:218px;left:50%;bottom:14px;transform:translateX(-50%);z-index:5;overflow:visible;pointer-events:none}
#mp-app .lns-oil-action,#mp-app .lns-spice-action,#mp-app .lns-water-action,#mp-app .lns-herb-action{opacity:0;animation:lns-gesture var(--gesture-duration) cubic-bezier(.4,0,.2,1) var(--gesture-start) both}
#mp-app .lns-oil-action{--gesture-start:calc(var(--cooking-duration,16000ms)*0.23125);--gesture-duration:calc(var(--cooking-duration,16000ms)*0.196875)}
#mp-app .lns-spice-action{--gesture-start:calc(var(--cooking-duration,16000ms)*0.4375);--gesture-duration:calc(var(--cooking-duration,16000ms)*0.175)}
#mp-app .lns-water-action{--gesture-start:calc(var(--cooking-duration,16000ms)*0.6125);--gesture-duration:calc(var(--cooking-duration,16000ms)*0.171875)}
#mp-app .lns-herb-action{--gesture-start:calc(var(--cooking-duration,16000ms)*0.78125);--gesture-duration:calc(var(--cooking-duration,16000ms)*0.1875)}
#mp-app .lns-oil-bottle{transform-origin:77px 80px;filter:drop-shadow(1px 2px 1.5px #243c2520);animation:lns-bottle-tilt calc(var(--cooking-duration,16000ms)*0.196875) cubic-bezier(.4,0,.2,1) calc(var(--cooking-duration,16000ms)*0.23125) both}
#mp-app .lns-oil-thread,#mp-app .lns-water-thread{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:lns-pour calc(var(--cooking-duration,16000ms)*0.125) linear calc(var(--cooking-duration,16000ms)*0.26875) both}
#mp-app .lns-oil-pool{transform-origin:108px 139px;opacity:0;animation:lns-pool calc(var(--cooking-duration,16000ms)*0.125) ease-out calc(var(--cooking-duration,16000ms)*0.290625) both}
#mp-app .lns-oil-ripple{transform-origin:108px 139px;opacity:0;animation:lns-ripple calc(var(--cooking-duration,16000ms)*0.05625) ease-out calc(var(--cooking-duration,16000ms)*0.290625) 2}
#mp-app .lns-oil-last-drop{opacity:0;animation:lns-last-drop calc(var(--cooking-duration,16000ms)*0.028125) cubic-bezier(.4,0,1,1) calc(var(--cooking-duration,16000ms)*0.3875) both}
#mp-app .lns-spice-spoon{transform-origin:182px 63px;filter:drop-shadow(1px 2px 1px #4a2c1620);animation:lns-sprinkle calc(var(--cooking-duration,16000ms)*0.10625) ease-in-out calc(var(--cooking-duration,16000ms)*0.465625) both}
#mp-app .lns-spice-grain{opacity:0;animation:lns-grain calc(var(--cooking-duration,16000ms)*0.05) cubic-bezier(.32,0,.8,.6) calc(calc(var(--cooking-duration,16000ms)*0.478125) + var(--grain-delay)) both}
#mp-app .lns-water-jug{transform-origin:204px 78px;animation:lns-jug-tilt calc(var(--cooking-duration,16000ms)*0.171875) cubic-bezier(.4,0,.2,1) calc(var(--cooking-duration,16000ms)*0.6125) both}
#mp-app .lns-water-thread{animation-duration:calc(var(--cooking-duration,16000ms)*0.10625);animation-delay:calc(var(--cooking-duration,16000ms)*0.64375)}
#mp-app .lns-water-ripple{transform-origin:169px 139px;opacity:0;animation:lns-ripple calc(var(--cooking-duration,16000ms)*0.05) ease-out calc(var(--cooking-duration,16000ms)*0.665625) 2}
#mp-app .lns-ripple-two{animation-delay:calc(var(--cooking-duration,16000ms)*0.68125)}
#mp-app .lns-water-bead{opacity:0;animation:lns-splash calc(var(--cooking-duration,16000ms)*0.034375) ease-out calc(calc(var(--cooking-duration,16000ms)*0.66875) + var(--splash-delay)) 2 both}
#mp-app .lns-herb-dish{transform-origin:168px 60px;filter:drop-shadow(0 2px 2px #49382818);animation:lns-herb-tip calc(var(--cooking-duration,16000ms)*0.15625) ease-in-out calc(var(--cooking-duration,16000ms)*0.79375) both}
#mp-app .lns-herb-leaf{opacity:0;animation:lns-leaf calc(var(--cooking-duration,16000ms)*0.06875) cubic-bezier(.3,0,.65,1) calc(calc(var(--cooking-duration,16000ms)*0.8125) + var(--leaf-delay)) both;transform-origin:2px 0}
#mp-app .lns-garlic-piece{opacity:0;animation:lns-grain calc(var(--cooking-duration,16000ms)*0.046875) cubic-bezier(.32,0,.8,.6) calc(calc(var(--cooking-duration,16000ms)*0.815625) + var(--grain-delay)) both}
#mp-app .lns-steam path{animation-delay:calc(var(--cooking-duration,16000ms)*0.75)}
#mp-app .lns-steam path:nth-child(2){animation-delay:calc(var(--cooking-duration,16000ms)*0.8)}
#mp-app .lns-steam path:nth-child(3){animation-delay:calc(var(--cooking-duration,16000ms)*0.84375)}
@keyframes lns-gesture{0%{opacity:0;transform:translate(6px,-9px)}12%,85%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(5px,-10px)}}
@keyframes lns-bottle-tilt{0%,100%{transform:rotate(-42deg)}22%,74%{transform:rotate(0)}}
@keyframes lns-jug-tilt{0%,100%{transform:rotate(24deg)}22%,76%{transform:rotate(0)}}
@keyframes lns-pour{0%{stroke-dashoffset:1;opacity:0}10%{opacity:.9}24%,78%{stroke-dashoffset:0;opacity:.9}99%{stroke-dashoffset:-1;opacity:.6}100%{stroke-dashoffset:-1;opacity:0}}
@keyframes lns-pool{0%{opacity:0;transform:scale(.2)}45%,75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}
@keyframes lns-ripple{0%{opacity:0;transform:scale(.2)}15%{opacity:.7}100%{opacity:0;transform:scale(1.3)}}
@keyframes lns-last-drop{0%{opacity:0;transform:translate(0,0) scale(.8,1.3)}15%{opacity:1}95%{opacity:1;transform:translate(29px,55px) scale(.8,1.3)}100%{opacity:0;transform:translate(29px,58px)}}
@keyframes lns-sprinkle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}45%{transform:rotate(-8deg) translateY(1px)}65%{transform:rotate(-13deg)}80%{transform:rotate(-7deg)}}
@keyframes lns-grain{0%{opacity:0;transform:translate(0,0)}10%,90%{opacity:.9}100%{opacity:0;transform:translate(var(--drift),var(--fall))}}
@keyframes lns-splash{0%{opacity:0;transform:translate(0,0)}20%{opacity:.7}55%{opacity:.5;transform:translate(var(--splash-x),var(--splash-y))}100%{opacity:0;transform:translate(var(--splash-x),2px)}}
@keyframes lns-herb-tip{0%,100%{transform:rotate(0)}25%,75%{transform:rotate(-18deg)}}
@keyframes lns-leaf{0%{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:1}60%{opacity:1;transform:translate(calc(var(--leaf-x)*.5),36px) rotate(calc(var(--leaf-turn)*.6))}88%{opacity:1}100%{opacity:.7;transform:translate(var(--leaf-x),77px) rotate(var(--leaf-turn))}}
@container(max-width:335px){#mp-app .lns-seasoning{width:252px;height:196px}}
@media(prefers-reduced-motion:reduce){#mp-app .lns-seasoning{display:none}}