/* ---- the loops: every one is a transform/opacity on a layer, so SwiftUI can match it ---- */
.astk{overflow:visible}
.astk g.a-body,.astk g.a-fx{transform-box:fill-box}
/* Sobbing: shake, jets pulse from the eyes, drops fall */
.k-sob .sob-body{transform-origin:50% 100%;animation:shake .32s steps(2,end) infinite}
.k-sob .sob-jets{transform-origin:50% 0%;animation:jet .7s ease-in-out infinite}
.k-sob .sob-drops circle{animation:drop 1.1s ease-in infinite}
.k-sob .sob-drops .d2{animation-delay:.3s}.k-sob .sob-drops .d3{animation-delay:.55s}.k-sob .sob-drops .d4{animation-delay:.8s}
@keyframes shake{0%{transform:translateX(-2.5px) rotate(-1deg)}100%{transform:translateX(2.5px) rotate(1deg)}}
@keyframes jet{0%,100%{transform:scaleY(.82)}50%{transform:scaleY(1.12)}}
@keyframes drop{0%{transform:translateY(-10px);opacity:0}20%{opacity:1}100%{transform:translateY(34px);opacity:0}}
/* Melting: slump into the puddle and pop back; hearts float */
.k-melt .melt-body{transform-origin:50% 100%;animation:slump 3.2s ease-in-out infinite}
.k-melt .melt-puddle{transform-origin:50% 50%;animation:puddle 3.2s ease-in-out infinite}
.k-melt .melt-hearts g{transform-box:fill-box;transform-origin:50% 50%;animation:floaty 2.4s ease-in-out infinite}
.k-melt .melt-hearts .h2{animation-delay:1.1s}
@keyframes slump{0%,15%{transform:scale(1,1)}55%,70%{transform:scale(1.14,.74)}85%{transform:scale(.94,1.08)}100%{transform:scale(1,1)}}
@keyframes puddle{0%,15%{transform:scaleX(1)}55%,70%{transform:scaleX(1.3)}100%{transform:scaleX(1)}}
@keyframes floaty{0%{transform:translateY(6px) scale(.7);opacity:0}30%{opacity:1}100%{transform:translateY(-26px) scale(1.1);opacity:0}}
/* Side-eye: slow look, hold, back; the lines flick */
.k-sideeye .side-body{transform-origin:50% 100%;animation:look 3s ease-in-out infinite}
.k-sideeye .side-lines{animation:flick 3s ease-in-out infinite}
@keyframes look{0%,10%{transform:rotate(0) translateX(0)}30%,70%{transform:rotate(7deg) translateX(6px)}90%,100%{transform:rotate(0) translateX(0)}}
@keyframes flick{0%,25%{opacity:0}35%,65%{opacity:1}75%,100%{opacity:0}}
/* Flop: flat, a sigh (breathes up), "ugh." rises */
.k-flop .flop-body{transform-origin:50% 100%;animation:sigh 2.8s ease-in-out infinite}
.k-flop .flop-ugh{animation:ugh 2.8s ease-in-out infinite}
.k-flop .flop-env{transform-origin:50% 50%;animation:nudge 2.8s ease-in-out infinite}
@keyframes sigh{0%,40%{transform:scale(1,1)}55%{transform:scale(.97,1.12)}75%,100%{transform:scale(1.03,.95)}}
@keyframes ugh{0%,45%{opacity:0;transform:translateY(8px)}60%,85%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-6px)}}
@keyframes nudge{0%,55%,100%{transform:rotate(0)}62%{transform:rotate(-8deg)}70%{transform:rotate(6deg)}}
/* Big hug: squeeze, the heart beats */
.k-hug .hug-body{transform-origin:50% 100%;animation:squeeze 1.4s ease-in-out infinite}
.k-hug .hug-heart{transform-origin:50% 50%;animation:beat2 1.4s ease-in-out infinite}
.k-hug .hug-hearts g{transform-box:fill-box;transform-origin:50% 50%;animation:floaty 2.2s ease-in-out infinite}
.k-hug .hug-hearts .h2{animation-delay:1s}
@keyframes squeeze{0%,100%{transform:scale(1,1)}40%{transform:scale(.93,1.05)}}
@keyframes beat2{0%,100%{transform:scale(1)}20%{transform:scale(1.18)}40%{transform:scale(.96)}60%{transform:scale(1.1)}}
/* Sign: waves the board */
.k-sign .sign-board,.k-signown .sign-board{transform-origin:50% 100%;animation:wave 1.6s ease-in-out infinite}
.k-sign .sign-body,.k-signown .sign-body{transform-origin:50% 100%;animation:bounce 1.6s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* Judging: slow tilt and squint, "hmm." types in */
.k-judging .judge-body{transform-origin:50% 100%;animation:tilt 3.4s ease-in-out infinite}
.k-judging .judge-hmm{animation:typein 3.4s steps(4,end) infinite}
@keyframes tilt{0%,20%{transform:rotate(0)}45%,75%{transform:rotate(-7deg) scaleY(.97)}100%{transform:rotate(0)}}
@keyframes typein{0%,30%{clip-path:inset(0 100% 0 0)}60%,90%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
/* Unhinged: vibrate, feathers burst out */
.k-unhinged .un-body{transform-origin:50% 60%;animation:vibe .12s steps(2,end) infinite}
.k-unhinged .un-feathers{transform-origin:50% 50%;animation:burst 1.3s ease-out infinite}
@keyframes vibe{0%{transform:translate(-2px,1px) rotate(-2deg)}100%{transform:translate(2px,-1px) rotate(2deg)}}
@keyframes burst{0%{transform:scale(.6);opacity:0}25%{opacity:1}100%{transform:scale(1.35);opacity:0}}
/* Full bag: staggers, an envelope drops out */
.k-satchel .bag-body{transform-origin:50% 100%;animation:stagger 1.8s ease-in-out infinite}
.k-satchel .bag-fall{animation:fall 1.8s ease-in infinite}
@keyframes stagger{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
@keyframes fall{0%,30%{transform:translateY(0) rotate(0);opacity:0}40%{opacity:1}100%{transform:translate(14px,56px) rotate(40deg);opacity:0}}
/* Crash landing: thud, stars circle */
.k-crash .crash-body{transform-origin:50% 100%;animation:thud 2s cubic-bezier(.3,1.6,.5,1) infinite}
.k-crash .crash-stars{transform-origin:50% 50%;animation:orbit 2s linear infinite}
.k-crash .crash-dust{transform-origin:50% 100%;animation:dust 2s ease-out infinite}
@keyframes thud{0%{transform:translateY(-40px)}25%{transform:translateY(0) scale(1.06,.9)}35%,100%{transform:translateY(0) scale(1,1)}}
@keyframes orbit{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes dust{0%,20%{transform:scale(.6);opacity:0}30%{opacity:1}70%,100%{transform:scale(1.15);opacity:0}}
/* Taking notes: scribble, look up, scribble faster */
.k-notes .notes-pencil{animation:scribble 2.4s linear infinite}
.k-notes .notes-body{transform-origin:50% 100%;animation:lookup 2.4s ease-in-out infinite}
.k-notes .notes-q{animation:pop 2.4s ease-in-out infinite;transform-origin:50% 50%}
@keyframes scribble{0%,5%,15%,25%,70%,78%,86%,94%{transform:translate(0,0)}10%,20%,74%,82%,90%,98%{transform:translate(-8px,6px)}40%,60%{transform:translate(0,-4px)}}
@keyframes lookup{0%,30%{transform:rotate(0)}40%,58%{transform:rotate(-5deg) translateY(-3px)}68%,100%{transform:rotate(0)}}
@keyframes pop{0%,35%{transform:scale(0);opacity:0}45%,58%{transform:scale(1.2);opacity:1}65%,100%{transform:scale(0);opacity:0}}
/* land: every sticker slaps on first */
.slapin{animation:slapin .45s cubic-bezier(.3,1.7,.5,1) both}
@keyframes slapin{0%{transform:scale(1.9) rotate(-18deg);opacity:0}100%{transform:scale(1) rotate(var(--r,0deg));opacity:1}}
@media (prefers-reduced-motion:reduce){.astk *{animation:none!important}.slapin{animation:none}}
.paused .astk *{animation-play-state:paused}