/* CognaOne motion library (design/MOTION.md). Opt-in: a page links this file and /assets/js/motion.js, then marks elements with
   data-mo="<effect>". Hidden start states only apply once motion.js adds .mo-pre, so without script everything shows at rest.
   Colours come from the site tokens (--ink, --soft, --bg, --orange). */
:root{--mo-ex:cubic-bezier(.16,1,.3,1);--mo-sp:cubic-bezier(.34,1.35,.5,1)}
.mo-reset,.mo-reset *{transition:none!important;animation:none!important}

/* lines: masked line reveal (each .mo-ln rises out of its own mask, staggered) */
.mo-ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.mo-ln>span{display:block;transition:transform 1.2s var(--mo-ex) calc(var(--mo-i,0) * .09s)}
.mo-pre .mo-ln>span{transform:translateY(110%)}
[data-mo="lines"] .mo-up{transition:opacity .9s var(--mo-ex) calc(var(--mo-i,0) * .09s + .15s),transform 1.1s var(--mo-ex) calc(var(--mo-i,0) * .09s + .15s)}
.mo-pre .mo-up{opacity:0;transform:translateY(28px)}

/* bracket: corner brackets fly out from the centre, title lines rise, rule draws, copy fades */
[data-mo="bracket"]{position:relative}
.mo-c{position:absolute;width:22px;height:22px;border:1.5px solid var(--ink);transition:transform 1s var(--mo-ex);pointer-events:none}
.mo-c.tl{left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:10px}
.mo-c.tr{right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:10px}
.mo-c.bl{left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:10px}
.mo-c.br{right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:10px}
.mo-pre .mo-c.tl{transform:translate(var(--mo-cx,120px),var(--mo-cy,60px))}
.mo-pre .mo-c.tr{transform:translate(calc(var(--mo-cx,120px) * -1),var(--mo-cy,60px))}
.mo-pre .mo-c.bl{transform:translate(var(--mo-cx,120px),calc(var(--mo-cy,60px) * -1))}
.mo-pre .mo-c.br{transform:translate(calc(var(--mo-cx,120px) * -1),calc(var(--mo-cy,60px) * -1))}
[data-mo="bracket"] .mo-ln>span{transition-delay:calc(.45s + var(--mo-i,0) * .09s)}
.mo-rule{display:block;border:0;border-top:2px solid var(--ink);margin:2px 0;transform-origin:left;transition:transform .9s var(--mo-ex) .6s}
.mo-pre .mo-rule{transform:scaleX(0)}
.mo-fade{transition:opacity .8s ease .8s}.mo-pre .mo-fade{opacity:0}

/* dots: angled dot-matrix plate that fills in as a diagonal wave, then leader lines draw out to labelled tags */
[data-mo="dots"]{position:relative}
.mo-plate{position:absolute;left:50%;top:50%;width:var(--mo-pw,220px);aspect-ratio:1;translate:-50% -50%;transform:rotateX(58deg) rotateZ(-45deg);display:grid;gap:6px}
.mo-plate i{border-radius:50%;background:var(--ink);opacity:.85;transition:transform .7s var(--mo-sp) calc(var(--d) * 1ms),opacity .4s ease calc(var(--d) * 1ms)}
.mo-plate i.o{background:var(--orange);opacity:1}
.mo-pre .mo-plate i{transform:scale(0);opacity:0}
[data-mo="dots"]>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
[data-mo="dots"] path{fill:none;stroke:var(--soft);stroke-width:1.2;stroke-dasharray:var(--l);stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--mo-ex) calc(var(--d) * 1ms)}
.mo-pre[data-mo="dots"] path{stroke-dashoffset:var(--l)}
.mo-tag{position:absolute;display:flex;align-items:center;gap:8px;white-space:nowrap;font:500 10.5px 'DM Mono',ui-monospace,monospace;letter-spacing:.07em;text-transform:uppercase;transition:opacity .6s ease calc(var(--d) * 1ms),transform .8s var(--mo-ex) calc(var(--d) * 1ms)}
.mo-tag::before{content:"";width:14px;height:14px;border:1.5px solid var(--orange);border-radius:3px;transform:rotate(45deg);flex:none}
.mo-tag.r{flex-direction:row-reverse}
.mo-pre .mo-tag{opacity:0;transform:translateY(8px)}

/* scramble: tabular digits so the width never jumps */
[data-mo="scramble"] [data-to],[data-mo="scramble"][data-to]{font-variant-numeric:tabular-nums}

/* stepper: numbered circles swap the card beside them (old card lifts out, new one rises in) */
.mo-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mo-steps button{all:unset;cursor:pointer;width:46px;height:46px;border-radius:50%;border:1.5px dashed var(--soft);display:grid;place-items:center;font:500 12px 'DM Mono',ui-monospace,monospace;color:var(--soft);transition:all .5s var(--mo-ex)}
.mo-steps button.on{border-style:solid;border-color:var(--ink);color:var(--ink);background:var(--bg);transform:scale(1.12)}
.mo-steps button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.mo-cards{position:relative;overflow:hidden}
.mo-cards>*{position:absolute;inset:0;transition:transform .9s var(--mo-ex),opacity .6s ease}
.mo-cards>*:not(.on){opacity:0;transform:translateY(26px);pointer-events:none}
.mo-cards>.out{opacity:0;transform:translateY(-26px)}

/* stack: sticky panels that slide up over each other (needs a scrolling parent; --mo-off steps each panel down) */
.mo-stack>*{position:sticky;top:calc(var(--mo-top,0px) + var(--mo-i,0) * var(--mo-off,14px));border-radius:24px}

/* loops: use one per section at most */
.mo-float{animation:mo-bob 6s ease-in-out infinite}
@keyframes mo-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.mo-marquee{overflow:hidden}
.mo-marquee>.mo-rail{display:flex;gap:34px;width:max-content;animation:mo-slide var(--mo-dur,26s) linear infinite}
@keyframes mo-slide{to{transform:translateX(-50%)}}
.mo-drift{mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.mo-drift>*{animation:mo-drift var(--mo-dur,22s) linear infinite}
.mo-drift>*:nth-child(even){animation-direction:reverse;animation-duration:calc(var(--mo-dur,22s) * 1.27)}
@keyframes mo-drift{to{transform:translateY(-50%)}}

@media (prefers-reduced-motion:reduce){[data-mo] *,.mo-float,.mo-rail,.mo-drift>*{transition:none!important;animation:none!important}}