/* Shared Klapi rules, moved here from site.css so the website and Studio load the same file: login layout, poses and tap animation. Every part moves on its own with spring easing; only transform and opacity animate. Shoulders sit at 68,166 / 192,166 and the stick hinge at 66,91 in the 260x300 viewBox. */
.kl-wrap{display:grid;justify-items:center;gap:4px;width:min(100%,320px)}
.kl{--px:0;--py:0;--spring:cubic-bezier(.34,1.45,.64,1);width:min(100%,210px);aspect-ratio:260/300;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.kl svg{display:block;width:100%;height:100%;overflow:visible}
.kl-say{position:relative;margin:0;padding:10px 16px;border:1px solid #ffffff2b;border-radius:16px;background:#062a1c;color:#f2fbf6;font:600 14.5px/1.4 Jakarta,sans-serif;text-align:center;min-height:42px;max-width:100%;box-shadow:0 14px 30px -18px #000}
.kl-say::before{content:"";position:absolute;left:50%;top:-7px;width:12px;height:12px;margin-left:-6px;background:#062a1c;border-left:1px solid #ffffff2b;border-top:1px solid #ffffff2b;transform:rotate(45deg)}
.kl-say:empty{visibility:hidden}
.kl-say.is-new{animation:kl-say .4s cubic-bezier(.2,.8,.2,1)}
@keyframes kl-say{from{opacity:0;transform:translateY(5px)}}

.kl-lean{transform-origin:130px 270px;transform:rotate(calc(var(--px)*3deg));transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.kl-sq,.kl-jump{transform-origin:130px 270px}
.kl-up{animation:kl-breathe 3.4s ease-in-out infinite}
@keyframes kl-breathe{50%{transform:translateY(-4px)}}
.kl-shadow{transform-origin:130px 282px;animation:kl-shadow 3.4s ease-in-out infinite;transition:opacity .4s}
@keyframes kl-shadow{50%{transform:scaleX(.93)}}
.kl-clap{transform-origin:66px 91px;transform:rotate(-14deg);transition:transform .6s var(--spring)}
.kl-clap-in{transform-origin:66px 91px;animation:kl-tilt 3.4s ease-in-out infinite}
@keyframes kl-tilt{50%{transform:rotate(-5deg)}}
.kl-arm{transform:rotate(30deg);transition:transform .65s var(--spring)}
.kl-sway{animation:kl-sway 3.4s ease-in-out infinite}
.kl-arm-r .kl-sway{animation-delay:-1.7s}
@keyframes kl-sway{50%{transform:rotate(-7deg)}}
.kl-pupil{transform:translate(calc(var(--px)*5px),calc(var(--py)*4px));transition:transform .2s ease-out}
.kl-eye{transform-box:fill-box;transform-origin:50% 55%;transition:transform .09s ease-in}
.kl.is-blink .kl-eye{transform:scaleY(.08)}
.kl-brow{transform-box:fill-box;transform-origin:50% 50%;transition:transform .4s var(--spring)}
.kl-eyewrap,.kl-closed,.kl-happy,.kl-m,.kl-blush,.kl-sparks,.kl-trail{transition:opacity .22s ease}
.kl-closed,.kl-happy,.kl-m-open,.kl-m-o,.kl-m-sad,.kl-sparks,.kl-hit{opacity:0}
.kl-blush{opacity:.5}

/* tap or idle "ceklek": wind up, slam shut, bounce, reopen */
.kl.is-clap .kl-clap-in{animation:kl-snap .72s both}
@keyframes kl-snap{0%{transform:rotate(0)}24%{transform:rotate(-9deg);animation-timing-function:cubic-bezier(.55,0,.95,.35)}40%{transform:rotate(14deg);animation-timing-function:ease-out}48%{transform:rotate(10.5deg);animation-timing-function:ease-in}56%{transform:rotate(14deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}100%{transform:rotate(0)}}
.kl.is-clap .kl-hit{animation:kl-hit .72s both}
@keyframes kl-hit{0%,38%{opacity:0;transform:translateX(-6px)}44%{opacity:1;transform:none}80%,100%{opacity:0;transform:translateX(6px)}}
.kl.is-clap .kl-sq{animation:kl-thud .72s both}
@keyframes kl-thud{0%,38%{transform:none}46%{transform:scale(1.035,.965)}60%{transform:scale(.992,1.01)}74%,100%{transform:none}}
.kl.is-clap .kl-eye{transform:scaleY(.55);transition-delay:.27s}

/* look: curious, one hand at the chin */
.kl[data-state=look] .kl-brow{transform:translateY(-3px)}
.kl[data-state=look] .kl-arm-r{transform:rotate(-48deg)}
.kl[data-state=look] .kl-m-smile{opacity:0}.kl[data-state=look] .kl-m-o{opacity:1}

/* shy: both hands over the eyes, stick drops shut */
.kl:is([data-state=shy],[data-state=peek],[data-state=busy],[data-state=error],[data-state=launch]) .kl-sway,
.kl:is([data-state=shy],[data-state=peek],[data-state=error],[data-state=launch]) .kl-clap-in{animation:none}
.kl[data-state=shy] .kl-arm,.kl[data-state=peek] .kl-arm-l{transform:rotate(-114deg)}
.kl[data-state=shy] .kl-eyewrap,.kl[data-state=peek] .kl-eyewrap-l{opacity:0}
.kl[data-state=shy] .kl-closed,.kl[data-state=peek] .kl-closed-l{opacity:1}
.kl:is([data-state=shy],[data-state=peek]) .kl-blush{opacity:.8}
.kl[data-state=shy] .kl-brow{transform:translateY(3px)}
.kl[data-state=shy] .kl-clap{transform:rotate(-1deg)}

/* peek: one hand slides down, the other eye peeks */
.kl[data-state=peek] .kl-arm-r{transform:rotate(-58deg)}
.kl[data-state=peek] .kl-brow-r{transform:translateY(-5px) rotate(8deg)}
.kl[data-state=peek] .kl-pupil{transform:translate(-3px,-2px)}
.kl[data-state=peek] .kl-m-smile{opacity:0}.kl[data-state=peek] .kl-m-o{opacity:1}
.kl[data-state=peek] .kl-clap{transform:rotate(-8deg)}

/* busy: "Action!" arms up, the stick claps in rhythm */
.kl[data-state=busy] .kl-arm{transform:rotate(150deg)}
.kl[data-state=busy] .kl-clap{transform:rotate(-24deg)}
.kl[data-state=busy] .kl-clap-in{animation:kl-clack .9s infinite}
@keyframes kl-clack{0%{transform:rotate(0);animation-timing-function:ease-in-out}38%{transform:rotate(-4deg);animation-timing-function:cubic-bezier(.55,0,.95,.35)}50%{transform:rotate(24deg);animation-timing-function:ease-out}57%{transform:rotate(20deg);animation-timing-function:ease-in}64%{transform:rotate(24deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}100%{transform:rotate(0)}}
.kl[data-state=busy] .kl-hit{animation:kl-hitloop .9s infinite}
@keyframes kl-hitloop{0%,48%{opacity:0;transform:translateX(-6px)}53%{opacity:1;transform:none}80%,100%{opacity:0;transform:translateX(6px)}}
.kl[data-state=busy] .kl-sq{animation:kl-thudloop .9s infinite}
@keyframes kl-thudloop{0%,48%{transform:none}55%{transform:scale(1.03,.97)}68%,100%{transform:none}}
.kl[data-state=busy] .kl-pupil{transform:translate(4px,-5px)}
.kl[data-state=busy] .kl-brow{transform:translateY(-4px)}
.kl[data-state=busy] .kl-m-smile{opacity:0}.kl[data-state=busy] .kl-m-open{opacity:1}

/* error: worried brows, small shake, arms drop */
.kl[data-state=error] .kl-sq{animation:kl-shake .6s cubic-bezier(.36,.07,.19,.97) both}
@keyframes kl-shake{18%{transform:translateX(-7px) rotate(-3deg)}38%{transform:translateX(6px) rotate(2.5deg)}58%{transform:translateX(-4px) rotate(-1.5deg)}78%{transform:translateX(2px)}100%{transform:none}}
.kl[data-state=error] .kl-brow-l{transform:translateY(-2px) rotate(-16deg)}.kl[data-state=error] .kl-brow-r{transform:translateY(-2px) rotate(16deg)}
.kl[data-state=error] .kl-pupil{transform:translate(0,4px)}
.kl[data-state=error] .kl-m-smile{opacity:0}.kl[data-state=error] .kl-m-sad{opacity:1}
.kl[data-state=error] .kl-arm{transform:rotate(6deg)}
.kl[data-state=error] .kl-clap{transform:rotate(-2deg)}

/* launch: happy, stick wide open, crouch and jump out of the panel */
.kl[data-state=launch] .kl-eyewrap{opacity:0}.kl[data-state=launch] .kl-happy{opacity:1}
.kl[data-state=launch] .kl-m-smile{opacity:0}.kl[data-state=launch] .kl-m-open{opacity:1}
.kl[data-state=launch] .kl-arm{transform:rotate(162deg)}
.kl[data-state=launch] .kl-clap{transform:rotate(-38deg)}
.kl[data-state=launch] .kl-sparks{opacity:1;animation:kl-spark .8s var(--spring) both}
@keyframes kl-spark{from{transform:translateY(10px)}}
.kl[data-state=launch] .kl-up{animation:none}
.kl[data-state=launch] .kl-jump{animation:kl-jump .85s cubic-bezier(.3,0,.65,1) .12s both}
@keyframes kl-jump{0%{transform:none}22%{transform:translateY(7px) scale(1.07,.9)}38%{transform:translateY(-30px) scale(.94,1.07)}100%{transform:translateY(-380px) scale(.92);opacity:0}}
.kl[data-state=launch] .kl-trail{opacity:.9;transition-delay:.3s}
.kl[data-state=launch] .kl-shadow{opacity:0;transition-delay:.3s}

@media (max-width:900px){.kl-wrap{grid-template-columns:118px minmax(0,1fr);align-items:center;justify-items:start;gap:14px;width:min(100%,440px);margin-top:0}.kl{width:118px}.kl-say{text-align:left}.kl-say::before{left:-7px;top:50%;margin:-6px 0 0;transform:rotate(-45deg);border-top:0;border-bottom:1px solid #ffffff2b}}
@media (max-width:520px){.kl-wrap{grid-template-columns:100px minmax(0,1fr);gap:10px}.kl{width:100px}.kl-say{font-size:13.5px;padding:9px 12px}}
@media (prefers-reduced-motion:reduce){.kl:not(.kl-mini) *{animation:none!important}.kl-arm,.kl-clap,.kl-brow{transition-duration:.01s}}

/* Klapi in small sizes: project covers, result posters and every loading, empty and error state (markup in klapi.js; the login page
   keeps its own full-size rules in site.css). Only transform and opacity animate; reduced motion freezes every pose. */
.kl-mini{--kl:64px;display:inline-block;width:var(--kl);aspect-ratio:260/300;vertical-align:middle;pointer-events:none;cursor:default}
.kl-mini svg{display:block;width:100%;height:100%;overflow:visible}
.kl-mini .kl-up,.kl-mini .kl-sway,.kl-mini .kl-shadow{animation:none}
.kl-note,.kl-z{opacity:0}

/* happy: finished work. Eyes closed in a smile, arms up, sparkles; static so a long list stays calm */
.kl[data-state=happy] .kl-eyewrap{opacity:0}.kl[data-state=happy] .kl-happy{opacity:1}
.kl[data-state=happy] .kl-m-smile{opacity:0}.kl[data-state=happy] .kl-m-open{opacity:1}
.kl[data-state=happy] .kl-arm{transform:rotate(150deg)}.kl[data-state=happy] .kl-clap{transform:rotate(-30deg)}
.kl[data-state=happy] .kl-sparks{opacity:1}
.kl:is([data-state=happy],[data-state=wave],[data-state=run],[data-state=sing],[data-state=sleep]) .kl-clap-in{animation:none}

/* wave: hello, the right hand waves */
.kl[data-state=wave] .kl-arm-r{transform:rotate(148deg)}
.kl[data-state=wave] .kl-arm-r .kl-sway{animation:kl-wave .8s ease-in-out infinite}
@keyframes kl-wave{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-18deg)}}
.kl[data-state=wave] .kl-brow{transform:translateY(-2px)}
.kl[data-state=wave] .kl-clap{transform:rotate(-12deg)}

/* run: a render in progress. Legs alternate, the body bobs and leans, speed lines trail behind */
.kl[data-state=run] .kl-lean{transform:rotate(6deg)}
.kl[data-state=run] .kl-up{animation:kl-bob .44s ease-in-out infinite}
@keyframes kl-bob{50%{transform:translateY(-6px)}}
.kl[data-state=run] .kl-leg{transform-origin:130px 224px;animation:kl-step .44s ease-in-out infinite}
.kl[data-state=run] .kl-leg-r{animation-delay:-.22s}
@keyframes kl-step{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(22deg)}}
.kl[data-state=run] .kl-arm{transform:rotate(40deg)}
.kl[data-state=run] .kl-sway{animation:kl-swing .44s ease-in-out infinite}
.kl[data-state=run] .kl-arm-r .kl-sway{animation-delay:-.22s}
@keyframes kl-swing{0%,100%{transform:rotate(-28deg)}50%{transform:rotate(28deg)}}
.kl[data-state=run] .kl-trail{opacity:.9;animation:kl-trail .44s linear infinite}
@keyframes kl-trail{0%{transform:translateX(10px);opacity:0}40%{opacity:.9}100%{transform:translateX(-10px);opacity:0}}
.kl[data-state=run] .kl-pupil{transform:translate(4px,-1px)}
.kl[data-state=run] .kl-m-smile{opacity:0}.kl[data-state=run] .kl-m-open{opacity:1}
.kl[data-state=run] .kl-shadow{animation:none}

/* sing: preparing the voice. Happy eyes, mouth opening and closing, notes floating up, gentle sway */
.kl[data-state=sing] .kl-eyewrap{opacity:0}.kl[data-state=sing] .kl-happy{opacity:1}
.kl[data-state=sing] .kl-m-smile{opacity:0}.kl[data-state=sing] .kl-m-open{opacity:1}
.kl[data-state=sing] .kl-m-open{transform-box:fill-box;transform-origin:50% 0;animation:kl-mouth .6s ease-in-out infinite}
@keyframes kl-mouth{50%{transform:scaleY(.5)}}
.kl[data-state=sing] .kl-lean{animation:kl-lilt 1.8s ease-in-out infinite}
@keyframes kl-lilt{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.kl[data-state=sing] .kl-brow{transform:translateY(-4px)}
.kl[data-state=sing] .kl-arm{transform:rotate(60deg)}
.kl[data-state=sing] .kl-note{animation:kl-noteup 2.2s ease-out infinite}
.kl[data-state=sing] .kl-n2{animation-delay:1.1s}
@keyframes kl-noteup{0%{opacity:0;transform:translateY(12px)}25%{opacity:1}100%{opacity:0;transform:translateY(-18px)}}

/* sleep: nothing here yet. Eyes closed, slow breathing, z floating up */
.kl[data-state=sleep] .kl-eyewrap{opacity:0}.kl[data-state=sleep] .kl-closed{opacity:1}
.kl[data-state=sleep] .kl-m-smile{opacity:0}.kl[data-state=sleep] .kl-m-o{opacity:.9}
.kl[data-state=sleep] .kl-brow{transform:translateY(3px)}
.kl[data-state=sleep] .kl-arm{transform:rotate(4deg)}
.kl[data-state=sleep] .kl-clap{transform:rotate(-1deg)}
.kl[data-state=sleep] .kl-lean{transform:rotate(-4deg)}
.kl[data-state=sleep] .kl-up{animation:kl-breathe 3.6s ease-in-out infinite}
.kl[data-state=sleep] .kl-z{animation:kl-zup 3s ease-out infinite}
.kl[data-state=sleep] .kl-z2{animation-delay:1s}.kl[data-state=sleep] .kl-z3{animation-delay:2s}
@keyframes kl-zup{0%{opacity:0;transform:translate(-6px,10px)}25%{opacity:1}100%{opacity:0;transform:translate(8px,-14px)}}

/* sizes where the old loader drawings used to sit */
.tl-art.kl-mini{height:124px;width:auto;--kl:auto}
.tl-boot .tl-art.kl-mini{height:168px}
.tl-chip .tl-art.kl-mini{height:38px}
.tl-spot .tl-art.kl-mini{height:116px}
.gl-state .tl-art.kl-mini{height:92px}
.tl-chip .kl-trail,.tl-chip .kl-notes,.tl-chip .kl-zs{display:none}

/* project covers and result posters */
.px-cover .px-kl{--kl:auto;position:relative;z-index:1;height:86%;width:auto}
.px-cover.is-mini .px-kl{height:92%}
.px-cover.is-poster .px-kl{height:80%}
.px-cover .px-ticks{top:9px;bottom:auto}

@media (prefers-reduced-motion:reduce){
 .px-kl *{animation:none!important}
 .kl-mini[data-state=sleep] .kl-z{opacity:.7}.kl-mini[data-state=sing] .kl-note{opacity:.9}
}