.step14-area .s14-scene { position:absolute; inset:0; container-type:size; }
.step14-area .s14-scene img { user-select:none; -webkit-user-drag:none; pointer-events:none; }
/* Rays behind the cup; pour above cup but clipped at its opening; Reset above all. */
.step14-area .s14-cup { position:absolute; left:64%; top:55%; width:18%; height:40.6%; z-index:5; pointer-events:none; }
.step14-area .s14-cup img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
.step14-area .s14-full { clip-path:inset(100% 0 0 0); }
.step14-area .s14-shaker { position:absolute; left:18%; top:26%; width:24%; height:67%; z-index:10; cursor:grab; touch-action:none; }
/* These PNGs include transparent side padding; height/auto preserves the supplied art. */
.step14-area .s14-body { position:absolute; left:50%; top:34%; height:66%; width:auto; transform:translateX(-50%); }
.step14-area .s14-lid { position:absolute; left:0; top:0; width:100%; height:36%; padding:0; border:0; background:transparent; cursor:pointer; touch-action:none; }
.step14-area .s14-lid img { position:absolute; left:50%; top:0; height:100%; width:auto; transform:translateX(-50%); }
.step14-area .s14-lid[hidden], .step14-area .s14-pour-mask[hidden] { display:none; }
.step14-area .s14-dragging { z-index:20; cursor:grabbing; }
.step14-area .s14-returning { transition:left .35s ease, top .35s ease; cursor:default; }
.step14-area .s14-pour-mask { position:absolute; inset:0; clip-path:inset(0 0 43% 0); pointer-events:none; z-index:12; }
/* Mirror the lower-left stream toward the cup; body stays left of Reset. */
.step14-area .s14-pour-mask img { position:absolute; left:39%; top:5%; width:46%; height:52.2%; transform:scaleX(-1); object-fit:fill; }
.step14-area .step14-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; }
/* Finish: soft white-gold light beams fan out from behind the drink, a warm halo, and twinkles. */
.step14-area .s14-scene { overflow:hidden; }
.step14-area .s14-finish { position:absolute; left:73%; top:60%; height:120%; aspect-ratio:1; transform:translate(-50%,-50%); z-index:2; opacity:0; pointer-events:none; }
.step14-area .s14-rays,
.step14-area .s14-halo { position:absolute; inset:0; border-radius:50%; }
.step14-area .s14-rays { background:repeating-conic-gradient(from 0deg, #ffc93c00 0deg, #ffd24de6 4deg, #fff3b8 7deg, #ffc93cb3 10deg, #ffc93c00 15deg, #ffc93c00 26deg); filter:blur(3px);
  mask-image:radial-gradient(closest-side, #000 25%, #000c 55%, transparent 100%); -webkit-mask-image:radial-gradient(closest-side, #000 25%, #000c 55%, transparent 100%); }
.step14-area .s14-halo { inset:22%; background:radial-gradient(closest-side, #fffef5 0%, #fff0a8 28%, #ffd65ccc 52%, #ffc93c00 100%); }
.step14-area .s14-finish i { position:absolute; left:30%; top:30%; width:4%; height:4%; background:#fffbe8; filter:drop-shadow(0 0 4px #ffe28a); clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%); }
.step14-area .s14-finish i:nth-of-type(2) { left:66%; top:36%; animation-delay:.6s; }
.step14-area .s14-finish i:nth-of-type(3) { left:42%; top:22%; width:3%; height:3%; animation-delay:1.1s; }
.step14-area .s14-finish i:nth-of-type(4) { left:62%; top:58%; width:3%; height:3%; animation-delay:1.5s; }
.step14-area .s14-complete .s14-finish { opacity:1; transition:opacity .8s ease; }
.step14-area .s14-complete .s14-rays { animation:s14-spin 24s linear infinite, s14-breathe 2.6s ease-in-out infinite; }
.step14-area .s14-complete .s14-halo { animation:s14-breathe 2.6s ease-in-out infinite reverse; }
.step14-area .s14-complete .s14-finish i { animation:s14-sparkle 1.8s ease-in-out infinite; }
.step14-area .s14-complete .s14-full { filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #fff6c8) drop-shadow(0 0 18px #ffc93c); }
@keyframes s14-spin { to { rotate:360deg; } }
@keyframes s14-breathe { 0%,100% { opacity:.65; scale:.94; } 50% { opacity:1; scale:1.04; } }
@keyframes s14-sparkle { 0%,100% { opacity:0; transform:scale(.4) rotate(0deg); } 50% { opacity:1; transform:scale(1.3) rotate(45deg); } }

.step14-area .step14-reset { white-space:nowrap; }