/* SmartRoster · logo motion library
 * 16 scoped animations for the two-block mark.
 * Drop this CSS in once, then use any motion-shape-*.svg with the matching .mNN-* class
 * already baked into the shape file, OR inline the SVG and apply the classes yourself.
 *
 * Each motion is namespaced (m01-, m04-, m07-, …) so two on the same page never collide.
 * Speeds: 1.6s–3.6s, all infinite loops.
 */

/* ── m01 · slot-in ── */
.m01-b1,.m01-b2{transform-origin:center;transform-box:fill-box}
.m01-b1{animation:m01-top 1.6s cubic-bezier(.6,.05,.35,1) infinite}
.m01-b2{animation:m01-bot 1.6s cubic-bezier(.6,.05,.35,1) infinite}
@keyframes m01-top{0%,12%{transform:translateY(-30px);opacity:0}30%,100%{transform:translateY(0);opacity:1}}
@keyframes m01-bot{0%,30%{transform:translateY(30px);opacity:0}48%,100%{transform:translateY(0);opacity:1}}

/* ── m04 · swap ── */
.m04-b1{animation:m04-s1 2s cubic-bezier(.6,.05,.35,1) infinite}
.m04-b2{animation:m04-s2 2s cubic-bezier(.6,.05,.35,1) infinite}
@keyframes m04-s1{0%,100%{transform:translateX(0)}25%{transform:translateX(-12px)}50%{transform:translateX(0)}75%{transform:translateX(12px)}}
@keyframes m04-s2{0%,100%{transform:translateX(0)}25%{transform:translateX(12px)}50%{transform:translateX(0)}75%{transform:translateX(-12px)}}

/* ── m07 · progress-fill ── */
.m07-f1{transform-origin:20px 21px;animation:m07-fill 1.8s cubic-bezier(.6,.05,.35,1) infinite}
.m07-f2{transform-origin:14px 43px;animation:m07-fill 1.8s cubic-bezier(.6,.05,.35,1) infinite .25s}
@keyframes m07-fill{0%{transform:scaleX(0)}80%,100%{transform:scaleX(1)}}

/* ── m08 · disperse ── */
.m08-b1{animation:m08-d1 2.4s ease-in-out infinite}
.m08-b2{animation:m08-d2 2.4s ease-in-out infinite}
@keyframes m08-d1{0%{opacity:0;transform:translate(-30px,-30px)}25%,75%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(30px,-30px)}}
@keyframes m08-d2{0%{opacity:0;transform:translate(30px,30px)}25%,75%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(-30px,30px)}}

/* ── m09 · flip ── */
.m09-grp{transform-origin:32px 32px;transform-box:fill-box;animation:m09-flip 2.4s cubic-bezier(.6,.05,.35,1) infinite}
@keyframes m09-flip{0%,40%{transform:rotateY(0)}60%,100%{transform:rotateY(180deg)}}

/* ── m14 · shift-swap ── */
.m14-b1{animation:m14-t1 2.4s cubic-bezier(.65,.05,.35,1) infinite}
.m14-b2{animation:m14-t2 2.4s cubic-bezier(.65,.05,.35,1) infinite}
@keyframes m14-t1{0%,15%{transform:translate(0,0)}45%,55%{transform:translate(-12px,42px)}85%,100%{transform:translate(0,0)}}
@keyframes m14-t2{0%,15%{transform:translate(0,0)}45%,55%{transform:translate(12px,-42px)}85%,100%{transform:translate(0,0)}}

/* ── m15 · slot-fill ── */
.m15-slot{stroke:oklch(0.72 0.16 70 / .5);stroke-width:2;stroke-dasharray:4 3;fill:transparent;animation:m15-sf 2.2s cubic-bezier(.6,.05,.35,1) infinite}
@keyframes m15-sf{0%,20%{fill:transparent;stroke:oklch(0.72 0.16 70 / .5);stroke-dasharray:4 3}55%,100%{fill:oklch(0.72 0.16 70);stroke:oklch(0.72 0.16 70);stroke-dasharray:0}}

/* ── m16 · week-scroll ── */
.m16-b1{animation:m16-ws 3s cubic-bezier(.65,.05,.35,1) infinite}
.m16-b2{animation:m16-ws 3s cubic-bezier(.65,.05,.35,1) infinite .15s}
@keyframes m16-ws{0%{transform:translateX(70px);opacity:0}15%,70%{transform:translateX(0);opacity:1}90%,100%{transform:translateX(-70px);opacity:0}}

/* ── m17 · drag ── */
.m17-b2{animation:m17-dg 2.4s cubic-bezier(.6,.05,.35,1) infinite}
@keyframes m17-dg{0%,12%{transform:translate(0,0)}25%{transform:translate(0,-6px)}55%{transform:translate(20px,-30px)}80%,100%{transform:translate(0,0)}}

/* ── m18 · match ── */
.m18-b1{animation:m18-mt 2.2s ease-in-out infinite}
@keyframes m18-mt{0%,40%,100%{fill:oklch(0.97 0.005 70)}55%,75%{fill:oklch(0.72 0.16 70)}}

/* ── m19 · calendar ── */
.m19-live{animation:m19-cm 3.6s steps(1) infinite}
@keyframes m19-cm{0%{transform:translate(0,0)}25%{transform:translate(16px,0)}50%{transform:translate(8px,9px)}75%{transform:translate(24px,18px)}100%{transform:translate(0,0)}}

/* ── m20 · accept ── */
.m20-b2{transform-origin:29px 43px;transform-box:fill-box;animation:m20-ac 2.6s ease-in-out infinite}
@keyframes m20-ac{0%,30%{fill:oklch(0.72 0.16 70);transform:scale(1)}45%{fill:oklch(0.62 0.08 155);transform:scale(1.04)}65%,100%{fill:oklch(0.72 0.16 70);transform:scale(1)}}

/* ── m21 · deck ── */
.m21-b1{animation:m21-d1 2.6s cubic-bezier(.6,.05,.35,1) infinite}
.m21-b2{animation:m21-d2 2.6s cubic-bezier(.6,.05,.35,1) infinite}
@keyframes m21-d1{0%,20%{transform:translateY(0)}40%,55%{transform:translateY(22px) scale(.96)}80%,100%{transform:translateY(0)}}
@keyframes m21-d2{0%,20%{transform:translateY(0)}40%,55%{transform:translateY(-22px) scale(.96)}80%,100%{transform:translateY(0)}}

/* ── m22 · auto-fill ── */
.m22-s{animation:m22-af 2.4s cubic-bezier(.6,.05,.35,1) infinite}
.m22-s0{animation-delay:0s}.m22-s1{animation-delay:.15s}.m22-s2{animation-delay:.30s}.m22-s3{animation-delay:.45s}.m22-s4{animation-delay:.60s}
@keyframes m22-af{0%,30%{fill:oklch(0.97 0.005 70);fill-opacity:.15}45%,90%{fill:oklch(0.72 0.16 70);fill-opacity:1}100%{fill:oklch(0.97 0.005 70);fill-opacity:.15}}

/* ── m23 · assign ── */
.m23-b1{animation:m23-at 2.4s cubic-bezier(.6,.05,.35,1) infinite}
.m23-b2{stroke:oklch(0.72 0.16 70 / .6);stroke-width:2;stroke-dasharray:4 3;fill:oklch(0.72 0.16 70 / .35);animation:m23-ab 2.4s cubic-bezier(.6,.05,.35,1) infinite}
@keyframes m23-at{0%,15%{transform:translate(0,-26px) scale(.85);opacity:.7}50%{transform:translate(-12px,16px);opacity:1}80%,100%{transform:translate(0,0);opacity:1}}
@keyframes m23-ab{0%,40%{fill:oklch(0.72 0.16 70 / .35);stroke-dasharray:4 3}55%,100%{fill:oklch(0.72 0.16 70);stroke:oklch(0.72 0.16 70);stroke-dasharray:0}}

/* ── m24 · heartbeat ── */
.m24-b1{transform-origin:35px 21px;transform-box:fill-box;animation:m24-h 3s ease-in-out infinite}
.m24-b2{transform-origin:29px 43px;transform-box:fill-box;animation:m24-h 3s ease-in-out infinite .15s}
@keyframes m24-h{0%,40%,80%,100%{transform:scaleX(1)}55%,65%{transform:scaleX(1.08)}}

/* ── Pause motion inside hidden htmx indicators ──
 * Browsers keep CSS animations ticking on opacity:0 elements (only
 * display:none halts them). Default-pause animations inside any
 * .htmx-indicator so idle spinners don't burn CPU/battery; htmx adds
 * .htmx-request to the parent during a request, which un-pauses. */
.htmx-indicator * { animation-play-state: paused; }
.htmx-request .htmx-indicator * { animation-play-state: running; }