.step8-area .s8-scene { position:absolute; inset:0; container-type:size; isolation:isolate; }
.step8-area .s8-scene img { display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.step8-area .s8-resetting * { animation:none !important; transition:none !important; }
/* Stove 1, pot back 3, water 5, bowl 6, front 8, falling pearls 18, handle 11, tools 15. */
/* Scale the page-3 stove/pot contact geometry by 48/63; keep explicit image dimensions. */
.step8-area .s8-scene .s8-stove { position:absolute; left:46%; top:55%; width:48%; height:41.14%; object-fit:fill; z-index:1; }
.step8-area .s8-pot { position:absolute; left:45.7%; top:37.1%; width:48.5%; height:36.4%; pointer-events:none; }
.step8-area .s8-back { z-index:3; }
.step8-area .s8-pot .s8-pot-image { height:100%; object-fit:fill; position:absolute; left:0; top:0; opacity:0; transition:opacity 1.1s ease; }
.step8-area .s8-pot .s8-pot-1 { width:107%; height:107%; left:-3.5%; }
.step8-area .s8-pot .s8-pot-2 { width:105.5%; height:108%; left:-4%; top:0; }
.step8-area .s8-scene[data-pot="0"] .s8-pot-0,
.step8-area .s8-scene[data-pot="1"] .s8-pot-1,
.step8-area .s8-scene[data-pot="2"] .s8-pot-2 { opacity:1; }
/* Trace the front half of the opening, leaving the water visible above its curved lip. */
.step8-area .s8-front { z-index:8; clip-path:polygon(0 28%,16% 28%,18% 35%,26% 42%,36% 47%,50% 49%,64% 47%,74% 42%,82% 35%,84% 28%,100% 28%,100% 100%,0 100%); }
.step8-area .s8-water,
.step8-area .s8-falls,
.step8-area .s8-spoon-layer { position:absolute; inset:0; pointer-events:none; }
.step8-area .s8-water { z-index:5; clip-path:ellipse(15.5% 6% at 70% 48%); animation:s8-simmer 1.3s ease-in-out infinite alternate; }
/* Falling pearls remain above water, then disappear along the front rim's elliptical edge. */
.step8-area .s8-falls { z-index:18; clip-path:polygon(0 0,100% 0,100% 47%,85.5% 47%,83% 50%,78% 53%,70% 55%,62% 53%,57% 50%,54.5% 47%,0 47%); }
.step8-area .s8-bowl-layer { z-index:6; clip-path:ellipse(15.5% 6% at 70% 48%); }
/* Fixed waterline mask hides the bowl even as the upright spoon sweeps/rotates. */
.step8-area .s8-handle-layer { z-index:11; clip-path:inset(0 0 52% 0); }
.step8-area .s8-dipped-spoon { position:absolute; left:61%; top:28%; width:18%; height:36%; overflow:hidden; clip-path:inset(0 0 43% 0); transform-origin:50% 57%; }
.step8-area .s8-dipped-spoon img { width:100%; height:100%; object-fit:contain; transform:rotate(-25deg); }
.step8-area .s8-stirring .s8-dipped-spoon { animation:s8-stir .96s ease-in-out 5; }
.step8-area .s8-tool { position:absolute; z-index:15; cursor:grab; touch-action:none; outline-offset:4px; }
.step8-area .s8-tool:focus-visible { outline:3px solid #a96516; }
.step8-area .s8-plate { left:5%; top:59%; width:29%; aspect-ratio:900/668; transform-origin:85% 65%; }
.step8-area .s8-plate img { position:absolute; inset:0; }
.step8-area .s8-plate-rim { mask-image:radial-gradient(ellipse 42% 41% at 50% 51%,transparent 96%,#000 100%); -webkit-mask-image:radial-gradient(ellipse 42% 41% at 50% 51%,transparent 96%,#000 100%); }
.step8-area .s8-plate-full { clip-path:inset(0 calc((1 - var(--s8-remaining,1)) * 100%) 0 0); }
.step8-area .s8-spoon { left:9%; top:12%; width:23%; }
.step8-area .s8-returning { transition:left .35s ease,top .35s ease,transform .35s ease,opacity .35s ease; }
.step8-area .s8-dragging { z-index:25; cursor:grabbing; transition:none; }
.step8-area .s8-pearl { position:absolute; width:1.55%; aspect-ratio:1; border-radius:50%; background:#885b3c; box-shadow:inset -.15cqw -.15cqw .15cqw #57371d55; }
.step8-area .s8-ripple { position:absolute; width:4%; height:2%; border:1px solid #d8f5ff; border-radius:50%; }
.step8-area .s8-bubble { position:absolute; width:2%; height:2.6%; border:1px solid #ecfbffb0; border-radius:50%; animation:s8-bubble 1.4s ease-out infinite; }
.step8-area .s8-steam { position:absolute; left:59%; top:37%; width:22%; height:13%; z-index:12; pointer-events:none; }
.step8-area .s8-steam i { position:absolute; left:10%; bottom:0; width:10%; height:70%; border-left:.65cqw solid #ffffffa0; border-radius:50%; filter:blur(.2cqw); animation:s8-steam 2.5s ease-out infinite; }
.step8-area .s8-steam i:nth-child(2) { left:48%; animation-delay:-.8s; }
.step8-area .s8-steam i:nth-child(3) { left:85%; animation-delay:-1.7s; }
.step8-area .step8-reset { position:absolute; right:3%; top:2%; z-index:30; border:2px solid #56351d; border-radius:10px; background:#fff1d0; padding:7px 14px; font-size:clamp(12px,1.4vw,19px); cursor:pointer; }
@keyframes s8-steam { 0% { opacity:0; transform:translateY(0) rotate(-8deg); } 25% { opacity:.65; } 100% { opacity:0; transform:translateY(-65%) rotate(12deg); } }
@keyframes s8-simmer { from { transform:translateY(0); } to { transform:translateY(-.25%); } }
@keyframes s8-bubble { 0% { opacity:0; transform:scale(.3); } 45% { opacity:.8; } 100% { opacity:0; transform:translateY(-60%) scale(1.4); } }
@keyframes s8-stir { 0%,100% { transform:translateX(-15%) rotate(-4deg); } 50% { transform:translateX(15%) rotate(5deg); } }