/* The Sugar Story · motion system v1.0
   Palette sampled from the current preview (wpvibe draft). Everything is scoped under .ss-motion-art.
   Set --bg on the wrapper to the section colour it sits on. */
.ss-motion-art{--bg:#FEFAF2;--ink:#3D2C31;--sub:#745D5D;--accent:#724D58;--plum:#503641;--butter:#F1E4AF;--blush:#F0E2DA;--sage:#DEE2C9;--sage-d:#A7AF8E;--beige:#F5ECD9;--line:#DED5C8;--cream:#FFFDF9;--cocoa:#4A2D2B;--crust:#6A4440;--caramel:#B98A62;--metal:#E4DCD1;--glow:#F3D9A0;font-family:'Jost',system-ui,sans-serif}
.ss-motion-art .serif{font-family:'Cormorant Garamond',Georgia,serif}
.ss-motion-art .eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500}
.ss-motion-art .ln{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ss-motion-art .lt{stroke-width:1.1}
.ss-motion-art .la{stroke:var(--accent)}
.ss-motion-art .lc{stroke:var(--cream)}
.ss-motion-art .lca{stroke:var(--caramel)}
.ss-motion-art .fc{fill:var(--cream)}
.ss-motion-art .fbe{fill:var(--beige)}
.ss-motion-art .fbu{fill:var(--butter)}
.ss-motion-art .fco{fill:var(--cocoa)}
.ss-motion-art .fcr{fill:var(--crust)}
.ss-motion-art .fca{fill:var(--caramel)}
.ss-motion-art .fac{fill:var(--accent)}
.ss-motion-art .fgl{fill:var(--glow)}
.ss-motion-art .fpl{fill:var(--plum)}
.ss-motion-art .fme{fill:var(--metal)}
.ss-motion-art .fln{fill:var(--line)}
.ss-motion-art .nos{stroke:none}
.ss-motion-art .vb{transform-box:view-box}
.ss-motion-art .oc{transform-box:fill-box;transform-origin:50% 50%}
.ss-motion-art .ob{transform-box:fill-box;transform-origin:50% 100%}
.ss-motion-art .lln{stroke:var(--line)}
.ss-motion-art .ls{stroke:var(--sub)}
.ss-motion-art .stg{stop-color:var(--glow)}
.ss-motion-art .fbl{fill:var(--blush)}
.ss-motion-art .fsg{fill:var(--sage)}
.ss-motion-art .fbg{fill:var(--bg)}
.ss-motion-art .fsub{fill:var(--sub)}
.ss-motion-art .ot{transform-box:fill-box;transform-origin:50% 0}
.ss-motion-art .lco{stroke:var(--cocoa)}
.ss-motion-art.on-plum,.on-plum .ss-motion-art{--ink:#F5ECD9;--sub:#CDBBB6;--accent:#F1E4AF;--line:#6E525C}
.ss-motion-art.on-butter,.on-butter .ss-motion-art{--glow:#EAC27C}
.ss-motion-art{margin-inline:auto}

.ss-motion-art svg{display:block}



.ss-motion-art .c-a{animation-duration:10s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.65,0,.35,1)}
.ss-motion-art .c-whisk{transform-origin:70px 52px;animation-name:tssm-c-whisk}
@keyframes tssm-c-whisk{0%,4%{transform:none}8%{transform:translateY(-6px) rotate(-6deg)}12%,100%{transform:none}}
.ss-motion-art .c-spat{transform-origin:175px 55px;animation-name:tssm-c-spat}
@keyframes tssm-c-spat{0%,13%{transform:none}18%{transform:translate(20px,113px) rotate(-3deg)}26%{transform:translate(64px,113px) rotate(-2deg)}30%{transform:translate(30px,113px) rotate(-3deg)}35%,100%{transform:none}}
.ss-motion-art .c-shine{opacity:0;animation-name:tssm-c-shine;animation-timing-function:cubic-bezier(.33,0,.2,1)}
@keyframes tssm-c-shine{0%,19%{opacity:0;transform:translateX(0)}22%{opacity:.9}29%,100%{opacity:0;transform:translateX(80px)}}
.ss-motion-art .c-bag{transform-origin:280px 55px;animation-name:tssm-c-bag}
@keyframes tssm-c-bag{0%,35%{transform:none}39%{transform:translate(-132px,70px) rotate(-90deg)}43%{transform:translate(-110px,63px) rotate(-90deg)}48%{transform:translate(-80px,60px) rotate(-90deg)}53%{transform:translate(-50px,63px) rotate(-90deg)}58%{transform:translate(-28px,70px) rotate(-90deg)}62%{transform:translate(-28px,40px) rotate(-80deg)}66%,100%{transform:none}}
.ss-motion-art .c-tw{transform-origin:361px 55px;animation-name:tssm-c-tw}
@keyframes tssm-c-tw{0%,65%{transform:none}70%{transform:translate(-176px,90px) rotate(-90deg)}74%{transform:translate(-146px,90px) rotate(-90deg)}78%{transform:translate(-161px,96px) rotate(-90deg)}82%,100%{transform:none}}
.ss-motion-art .c-ros{animation-name:tssm-c-r0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
.ss-motion-art .c-ros.r1{animation-name:tssm-c-r1}
.ss-motion-art .c-ros.r2{animation-name:tssm-c-r2}
.ss-motion-art .c-ros.r3{animation-name:tssm-c-r3}
.ss-motion-art .c-ros.r4{animation-name:tssm-c-r4}
@keyframes tssm-c-r0{0%,39%{opacity:0;transform:scale(.001)}41.5%{opacity:1;transform:scale(1)}93%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes tssm-c-r1{0%,43%{opacity:0;transform:scale(.001)}45.5%{opacity:1;transform:scale(1)}93%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes tssm-c-r2{0%,48%{opacity:0;transform:scale(.001)}50.5%{opacity:1;transform:scale(1)}93%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes tssm-c-r3{0%,53%{opacity:0;transform:scale(.001)}55.5%{opacity:1;transform:scale(1)}93%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes tssm-c-r4{0%,58%{opacity:0;transform:scale(.001)}60.5%{opacity:1;transform:scale(1)}93%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.ss-motion-art .c-ber{animation-name:tssm-c-b0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
.ss-motion-art .c-ber.b1{animation-name:tssm-c-b1}
.ss-motion-art .c-ber.b2{animation-name:tssm-c-b2}
@keyframes tssm-c-b0{0%,70%{opacity:0;transform:scale(.3)}72%{opacity:1;transform:scale(1)}93%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes tssm-c-b1{0%,74%{opacity:0;transform:scale(.3)}76%{opacity:1;transform:scale(1)}93%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes tssm-c-b2{0%,78%{opacity:0;transform:scale(.3)}80%{opacity:1;transform:scale(1)}93%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.ss-motion-art .c-a{animation:none!important}}



.ss-motion-art .u-a{animation-duration:11s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.33,0,.2,1)}
.ss-motion-art .u-sketch{stroke-dasharray:100;stroke-dashoffset:0;opacity:0;animation-name:tssm-u-sketch}
@keyframes tssm-u-sketch{0%{stroke-dashoffset:100;opacity:1}16%{stroke-dashoffset:0;opacity:1}34%{opacity:1}42%,100%{stroke-dashoffset:0;opacity:0}}
.ss-motion-art .u-sw{animation-name:tssm-u-sw0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
.ss-motion-art .u-sw.s1{animation-name:tssm-u-sw1}
.ss-motion-art .u-sw.s2{animation-name:tssm-u-sw2}
@keyframes tssm-u-sw0{0%,15%{opacity:0;transform:scale(.4)}19%{opacity:1;transform:scale(1)}36%{opacity:1;transform:scale(1)}44%,100%{opacity:0;transform:scale(.8)}}
@keyframes tssm-u-sw1{0%,18%{opacity:0;transform:scale(.4)}22%{opacity:1;transform:scale(1)}36%{opacity:1;transform:scale(1)}44%,100%{opacity:0;transform:scale(.8)}}
@keyframes tssm-u-sw2{0%,21%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1)}36%{opacity:1;transform:scale(1)}44%,100%{opacity:0;transform:scale(.8)}}
.ss-motion-art .u-sw{opacity:0}
.ss-motion-art .u-solid{animation-name:tssm-u-solid}
@keyframes tssm-u-solid{0%,30%{opacity:0}40%{opacity:1}94%{opacity:1}100%{opacity:0}}
.ss-motion-art .u-fill{transform-origin:150px 240px;animation-name:tssm-u-fill}
@keyframes tssm-u-fill{0%,38%{opacity:1;transform:scaleY(.001)}54%{transform:scaleY(1)}94%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}
.ss-motion-art .u-dec{animation-name:tssm-u-dec;animation-timing-function:cubic-bezier(.16,1,.3,1)}
@keyframes tssm-u-dec{0%,54%{opacity:0;transform:scale(.2)}58%{opacity:1;transform:scale(1)}94%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.ss-motion-art .u-pet{animation-name:tssm-u-pet;animation-timing-function:cubic-bezier(.16,1,.3,1)}
@keyframes tssm-u-pet{0%,64%{opacity:0;transform:translateY(-10px) rotate(-20deg)}70%{opacity:1;transform:none}94%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.ss-motion-art .u-plq{animation-name:tssm-u-plq;animation-timing-function:cubic-bezier(.16,1,.3,1)}
@keyframes tssm-u-plq{0%,72%{opacity:0;transform:scale(.6)}77%{opacity:1;transform:scale(1)}94%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.ss-motion-art .u-t1{animation-name:tssm-u-t1}
@keyframes tssm-u-t1{0%{opacity:0;transform:translateY(8px)}6%,44%{opacity:1;transform:none}52%,94%{opacity:.28}100%{opacity:0}}
.ss-motion-art .u-t2{animation-name:tssm-u-t2}
@keyframes tssm-u-t2{0%,46%{opacity:0;transform:translateY(8px)}54%,94%{opacity:1;transform:none}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.ss-motion-art .u-a{animation:none!important}}



.ss-motion-art .h-a{animation-duration:10s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.65,0,.35,1)}
.ss-motion-art .h-p1{opacity:0;animation-name:tssm-h-p1}
.ss-motion-art .h-p2{opacity:0;animation-name:tssm-h-p2}
.ss-motion-art .h-p3{opacity:0;animation-name:tssm-h-p3}
@keyframes tssm-h-p1{0%,10%{opacity:1;transform:none}20%{opacity:1;transform:translate(90px,128px) scale(.86)}26%{opacity:0;transform:translate(90px,140px) scale(.86)}92%{opacity:0;transform:translate(90px,140px) scale(.86)}93%{opacity:0;transform:none}100%{opacity:1;transform:none}}
@keyframes tssm-h-p2{0%,20%{opacity:1;transform:none}30%{opacity:1;transform:translate(65px,130px) scale(.86)}36%{opacity:0;transform:translate(65px,142px) scale(.86)}92%{opacity:0;transform:translate(65px,142px) scale(.86)}93%{opacity:0;transform:none}100%{opacity:1;transform:none}}
@keyframes tssm-h-p3{0%,30%{opacity:1;transform:none}40%{opacity:1;transform:translate(-15px,118px) scale(.86)}46%{opacity:0;transform:translate(-15px,130px) scale(.86)}92%{opacity:0;transform:translate(-15px,130px) scale(.86)}93%{opacity:0;transform:none}100%{opacity:1;transform:none}}
.ss-motion-art .h-ring{opacity:0;animation-name:tssm-h-r1}
.ss-motion-art .h-ring.r2{animation-name:tssm-h-r2}
.ss-motion-art .h-ring.r3{animation-name:tssm-h-r3}
@keyframes tssm-h-r1{0%,6%{opacity:0;transform:scale(.7)}9%{opacity:1;transform:scale(1)}12%,100%{opacity:0;transform:scale(1.1)}}
@keyframes tssm-h-r2{0%,16%{opacity:0;transform:scale(.7)}19%{opacity:1;transform:scale(1)}22%,100%{opacity:0;transform:scale(1.1)}}
@keyframes tssm-h-r3{0%,26%{opacity:0;transform:scale(.7)}29%{opacity:1;transform:scale(1)}32%,100%{opacity:0;transform:scale(1.1)}}
.ss-motion-art .h-rest{animation-name:tssm-h-rest}
@keyframes tssm-h-rest{0%,44%{opacity:1}50%,92%{opacity:.3}100%{opacity:1}}
.ss-motion-art .h-rest{opacity:.3}
.ss-motion-art .h-lid{transform-origin:200px 178px;animation-name:tssm-h-lid;animation-timing-function:cubic-bezier(.16,1,.3,1)}
@keyframes tssm-h-lid{0%,48%{transform:translate(78px,-70px) rotate(16deg);opacity:1}58%{transform:none;opacity:1}92%{transform:none;opacity:1}96%{transform:none;opacity:0}97%{transform:translate(78px,-70px) rotate(16deg);opacity:0}100%{transform:translate(78px,-70px) rotate(16deg);opacity:1}}
.ss-motion-art .h-rib{stroke-dasharray:100;stroke-dashoffset:0;animation-name:tssm-h-rib;animation-timing-function:cubic-bezier(.33,0,.2,1)}
@keyframes tssm-h-rib{0%,58%{stroke-dashoffset:100;opacity:1}68%{stroke-dashoffset:0;opacity:1}92%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
.ss-motion-art .h-bow{animation-name:tssm-h-bow;animation-timing-function:cubic-bezier(.16,1,.3,1)}
@keyframes tssm-h-bow{0%,66%{opacity:0;transform:scale(.2)}71%{opacity:1;transform:scale(1)}92%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
.ss-motion-art .h-tag{transform-origin:208px 166px;animation-name:tssm-h-tag;animation-timing-function:cubic-bezier(.16,1,.3,1)}
@keyframes tssm-h-tag{0%,70%{opacity:0;transform:rotate(-40deg)}75%{opacity:1;transform:rotate(8deg)}80%{transform:rotate(-3deg)}84%{transform:rotate(0)}92%{opacity:1;transform:rotate(0)}96%,100%{opacity:0;transform:rotate(0)}}
.ss-motion-art .h-t{animation-name:tssm-h-t}
@keyframes tssm-h-t{0%,8%{opacity:.35}12%,44%{opacity:1}50%,100%{opacity:.35}}
.ss-motion-art .h-t.t2{animation-name:tssm-h-t2}
.ss-motion-art .h-t.t3{animation-name:tssm-h-t3}
@keyframes tssm-h-t2{0%,46%{opacity:.35}50%,60%{opacity:1}64%,100%{opacity:.35}}
@keyframes tssm-h-t3{0%,62%{opacity:.35}66%,92%{opacity:1}96%,100%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.ss-motion-art .h-a{animation:none!important}}


/* Integration: small decorative scenes, separate from ordering controls. */
.ss-motion-scene{margin:24px 0 0;max-width:300px;position:relative}
.ss-motion-art{width:100%;--bg:#fffdf8}
.ss-motion-art svg{width:100%;height:auto;overflow:visible}
.ss-motion-art:not(.is-playing) *{animation:none!important}
.ss-motion-art.is-playing *{animation-iteration-count:1!important}
body .ss-motion-scene button.ss-motion-control{display:inline-flex;align-items:center;gap:7px;border:0;border-bottom:1px solid #d6c5bc;background:transparent;color:#724d58;font:400 11px Jost,sans-serif;padding:6px 0;cursor:pointer}
body .ss-motion-scene button.ss-motion-control[hidden]{display:none!important}
body .ss-motion-scene button.ss-motion-control:focus-visible{outline:2px solid #724d58;outline-offset:5px}
.ss-gift-copy .ss-motion-scene{max-width:230px;margin:8px 0 14px}
.ss-founder .ss-motion-scene,.tss-founder-copy .ss-motion-scene{max-width:230px}
.tss-custom-page-hero .ss-motion-scene{max-width:180px;margin-top:12px}
.ss-hamper-hero .ss-motion-scene{max-width:220px;margin:12px 0 0}
.ss-motion-art .h-rest{opacity:.6}
@media(max-width:600px){.ss-motion-scene{max-width:210px!important}body .ss-motion-scene button.ss-motion-control{min-height:44px}.ss-gift-copy .ss-motion-scene{max-width:190px!important}}
@media(prefers-reduced-motion:reduce){.ss-motion-art *{animation:none!important}body .ss-motion-scene button.ss-motion-control{display:none}}

/* Keep utility controls in the brand palette, including Astra hover/focus states. */
body .ss-motion-scene button.ss-motion-control:hover,body .ss-motion-scene button.ss-motion-control:focus{background:transparent;color:#503641;border-color:#724d58}
@media(max-width:600px){.tss-custom-page-hero .ss-motion-scene{max-width:160px!important}}