/* craft signature "soap": a colour pours into a bar mould and sets (scaleY, once per pick), petals settle (transform/opacity), 14 bubbles rise in an IO-paused loop, one small swirl turns slowly.
   All motion is transform/opacity. Loops run only while .sp-live (set by the engine IO), never in reduced motion. */
.sp-stage{--sp-c:#F2B8C0;--sp-p:#D9707F;--sp-s:#FBE3E6;position:relative;width:min(100%,520px);aspect-ratio:1;margin:0 auto}
.sp-halo{position:absolute;inset:3%;border-radius:50%;background:radial-gradient(circle at 50% 38%,#FFF8F3 0,var(--sig-bg,#F7DEDA) 72%)}
.sp-bubs{position:absolute;inset:0;overflow:hidden;border-radius:50%}
.sp-bubs i{position:absolute;bottom:-4%;display:block;border-radius:50%;border:1.5px solid rgba(201,138,147,.55);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,1) 0,rgba(255,255,255,.35) 36%,rgba(243,201,207,.6) 100%);opacity:0;animation:sp-rise linear infinite;animation-play-state:paused}
.sp-live .sp-bubs i{animation-play-state:running}
@keyframes sp-rise{0%{transform:translate(0,0) scale(.7);opacity:0}12%{opacity:.95}30%{transform:translate(9px,-130px) scale(.9)}55%{transform:translate(-8px,-270px) scale(1)}80%{transform:translate(9px,-400px) scale(1.05);opacity:.8}100%{transform:translate(0,-520px) scale(1.1);opacity:0}}
.sp-jug{position:absolute;left:41%;top:5%;width:27%;height:auto;rotate:-26deg;z-index:3;overflow:visible}
.sp-stream{position:absolute;left:41.5%;top:21%;width:1.8%;height:35%;z-index:2;border-radius:0 0 4px 4px;background:var(--sp-c);transform-origin:50% 0}
.sp-mould{position:absolute;left:16%;right:16%;top:54%;height:26%;z-index:2;overflow:hidden;border-radius:44px/36px;background:#FFFDFB;border:3px solid #fff;box-shadow:0 14px 30px rgba(156,79,94,.18)}
.sp-fill{position:absolute;inset:0;background:var(--sp-c);transform-origin:50% 100%}
.sp-swirl{position:absolute;left:-12%;top:-70%;width:124%;height:auto;aspect-ratio:1;display:block}
.sp-gloss{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.2) 100%);pointer-events:none}
.sp-petals{position:absolute;inset:0}
.sp-petal{position:absolute;left:var(--x);top:var(--y);width:11%;aspect-ratio:3/2;border-radius:100% 0 100% 0;background:var(--sp-p);rotate:var(--r);box-shadow:inset 0 -3px 0 rgba(255,255,255,.25)}
.sp-dish{position:absolute;left:8%;right:8%;top:76%;height:11%;z-index:1;border-radius:50%;background:#F1DDD6;box-shadow:inset 0 6px 0 rgba(255,255,255,.55)}
.sp-ctl{margin-top:18px;text-align:center}
.sp-q{margin:0 0 10px;font:italic 400 19px/1.3 var(--f-disp);color:var(--mute)}
.sp-pals{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.sp-pal{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:6px 18px 6px 8px;border:1.5px solid #D2AFAA;border-radius:999px;background:var(--paper,#fff);color:var(--ink);font:700 15px/1 var(--f-body);cursor:pointer;transition:transform .15s var(--ease,ease)}
.sp-pal[aria-pressed=true]{background:var(--deep);border-color:var(--deep);color:#fff}
.sp-pal:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}
.sp-sw{position:relative;display:inline-block;width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #D2AFAA}
.sp-sw i{position:absolute;right:-3px;bottom:-3px;width:13px;height:9px;border-radius:100% 0 100% 0;border:1px solid #fff}
.sp-cap{margin:12px auto 0;max-width:42ch;font-size:14.5px;color:var(--mute)}
/* one-shot: pour -> set -> petals settle. Armed only by html.cf-js, so no-JS shows the finished bar. */
.cf-js .sp-fill{transform:scaleY(0);will-change:transform}
.cf-js .sp-stream{transform:scaleY(0);will-change:transform}
.cf-js .sp-swirl,.cf-js .sp-gloss{opacity:0}
.cf-js .sp-petal{opacity:0;transform:translateY(-46px) scale(.5)}
.cf-js .sp-go .sp-stream{animation:sp-stream 1.05s cubic-bezier(.4,0,.6,1) both}
@keyframes sp-stream{0%{transform:scaleY(0);transform-origin:50% 0;opacity:1}35%{transform:scaleY(1);transform-origin:50% 0;opacity:1}70%{transform:scaleY(1);transform-origin:50% 100%;opacity:1}100%{transform:scaleY(0);transform-origin:50% 100%;opacity:1}}
.cf-js .sp-go .sp-fill{transform:none;will-change:auto;transition:transform .85s cubic-bezier(.45,.1,.3,1) .25s}
.cf-js .sp-go .sp-swirl{opacity:.9;transition:opacity .7s ease 1.05s}
.cf-js .sp-go .sp-gloss{opacity:1;transition:opacity .6s ease 1.2s}
.cf-js .sp-go .sp-petal{opacity:1;transform:none;transition:transform .6s var(--bounce,cubic-bezier(.34,1.56,.64,1)) calc(1.15s + var(--i)*70ms),opacity .35s ease calc(1.15s + var(--i)*70ms)}
.sp-live .sp-swirl{animation:sp-turn 42s linear infinite}
@keyframes sp-turn{to{transform:rotate(360deg)}}
@media (max-width:480px){@keyframes sp-rise{0%{transform:translate(0,0) scale(.7);opacity:0}12%{opacity:.95}30%{transform:translate(7px,-90px) scale(.9)}55%{transform:translate(-6px,-190px) scale(1)}80%{transform:translate(7px,-280px) scale(1.05);opacity:.8}100%{transform:translate(0,-370px) scale(1.1);opacity:0}}}
@media (prefers-reduced-motion:reduce){
  .sp-bubs i{animation:none!important;opacity:0}
  .sp-swirl{animation:none!important}
  .cf-js .sp-fill,.cf-js .sp-stream,.cf-js .sp-petal,.cf-js .sp-swirl,.cf-js .sp-gloss{transform:none!important;opacity:1!important;transition:none!important;animation:none!important;will-change:auto}
  .cf-js .sp-stream{opacity:0!important}
}