/* Quokka holding animation for "Case studies, coming soon" (LMAI-2155), with the
   cartoon quokka (Lisa, 2026-11-12; drawn by scripts/gen-quokka-art.js). Motion is
   CSS transform and opacity only, one 6 s story loop: typing, a blink, looking up,
   a big smile. Reduced motion shows a single still pose (the big smile). The open
   pose layers are cross-faded or grown, never morphed. */

:root{
  --sign: var(--ht-sign, #9e3f44);
}
/* The map pins take the page's signature colour (red in light mode, pink in dark).
   Set on the scene itself, where the page's --ht-sign is inherited per theme. */
.halftone-app #quokka{--sign: var(--ht-sign, #9e3f44)}

.qk-stage{margin:0 0 4px}
.qk-stage:empty{display:none}
.qk-stage svg{display:block;width:100%;height:auto}

/* The base styles ARE the still pose (looking up, big smile). Transforms only. */
#quokka *{transform-box:view-box}
#head{transform-origin:120px 112px;transform:translate(0px,-1px) rotate(3deg) scale(1,1)}
#gaze{transform-origin:120px 82px;transform:translate(0px,-1.2px) rotate(0deg) scale(1,1)}
#eyes{transform-origin:120px 82px;transform:translate(0px,0px) rotate(0deg) scale(1,1)}
#cheekL{transform-origin:100px 101px;transform:translate(0px,-3px) rotate(0deg) scale(1.2,1.18)}
#cheekR{transform-origin:140px 101px;transform:translate(0px,-3px) rotate(0deg) scale(1.2,1.18)}
#muzzle{transform-origin:120px 102px;transform:translate(0px,0px) rotate(0deg) scale(1.07,1.03)}
#earL{transform-origin:89px 60px;transform:translate(0px,0px) rotate(0deg) scale(1,1)}
#earR{transform-origin:151px 60px;transform:translate(0px,0px) rotate(0deg) scale(1,1)}
/* the stubby arms hinge at their own shoulders, under the chin */
#armL{transform-origin:87px 141px}
#armR{transform-origin:153px 141px}
/* the open mouth grows from where it hangs under the fixed smile line */
#quokka .qk-mouth.qk-o{transform-origin:120px 100.6px}
/* pins pop up from their tips; sparkles turn on their centres; steam rises */
#quokka .qk-pin, #quokka .qk-spark, #quokka .qk-steam{transform-box:fill-box}
#quokka .qk-pin{transform-origin:50% 100%}
#quokka .qk-spark{transform-origin:50% 50%}
#quokka .qk-steam{transform-origin:50% 100%;opacity:.7}

@keyframes head{0%{transform:translate(0px,2.5px) rotate(2.2deg) scale(1,1)}25%{transform:translate(0px,3px) rotate(-1.4deg) scale(1,1)}50%{transform:translate(0px,2.5px) rotate(2.2deg) scale(1,1)}55.5%{transform:translate(0px,0.5px) rotate(0deg) scale(1.01,0.97)}60%{transform:translate(0px,-2px) rotate(1.5deg) scale(0.99,1.03)}65%,88%{transform:translate(0px,-1px) rotate(3deg) scale(1,1)}94%,100%{transform:translate(0px,2.5px) rotate(2.2deg) scale(1,1)}}
@keyframes gaze{0%,50%{transform:translate(0px,2px) rotate(0deg) scale(1,1)}58%,88%{transform:translate(0px,-1.2px) rotate(0deg) scale(1,1)}94%,100%{transform:translate(0px,2px) rotate(0deg) scale(1,1)}}
@keyframes eyes{0%,30%{transform:translate(0px,0px) rotate(0deg) scale(1,1)}32%{transform:translate(0px,0px) rotate(0deg) scale(1,0.08)}34%,100%{transform:translate(0px,0px) rotate(0deg) scale(1,1)}}
@keyframes cheekL{0%,52%{transform:translate(0px,0px) rotate(0deg) scale(1,1)}58.5%{transform:translate(0px,-3.4px) rotate(0deg) scale(1.28,1.24)}62%,86%{transform:translate(0px,-3px) rotate(0deg) scale(1.2,1.18)}92%,100%{transform:translate(0px,0px) rotate(0deg) scale(1,1)}}
@keyframes cheekR{0%,52%{transform:translate(0px,0px) rotate(0deg) scale(1,1)}58.5%{transform:translate(0px,-3.4px) rotate(0deg) scale(1.28,1.24)}62%,86%{transform:translate(0px,-3px) rotate(0deg) scale(1.2,1.18)}92%,100%{transform:translate(0px,0px) rotate(0deg) scale(1,1)}}
@keyframes muzzle{0%,52%{transform:translate(0px,0px) rotate(0deg) scale(1,1)}59%{transform:translate(0px,0px) rotate(0deg) scale(1.1,1.04)}62%,86%{transform:translate(0px,0px) rotate(0deg) scale(1.07,1.03)}92%,100%{transform:translate(0px,0px) rotate(0deg) scale(1,1)}}
@keyframes earL{0%,66%{transform:translate(0px,0px) rotate(0deg) scale(1,1)}69%{transform:translate(0px,0px) rotate(-10deg) scale(1,1)}72%{transform:translate(0px,0px) rotate(4deg) scale(1,1)}75%{transform:translate(0px,0px) rotate(-2deg) scale(1,1)}78%,100%{transform:translate(0px,0px) rotate(0deg) scale(1,1)}}
@keyframes earR{0%,67%{transform:translate(0px,0px) rotate(0deg) scale(1,1)}70%{transform:translate(0px,0px) rotate(8deg) scale(1,1)}73%{transform:translate(0px,0px) rotate(-3deg) scale(1,1)}76%,100%{transform:translate(0px,0px) rotate(0deg) scale(1,1)}}

/* typing: the paws tap; during the smile the arms rest */
@keyframes armL{
  0%, 6%, 10%, 16%, 20%, 26%, 30%, 36%, 40%, 46%, 100% { transform: rotate(0deg); }
  3%, 13%, 23%, 33%, 43% { transform: rotate(4deg); }
}
@keyframes armR{
  0%, 5%, 11%, 15%, 21%, 25%, 31%, 35%, 41%, 45%, 51%, 100% { transform: rotate(0deg); }
  8%, 18%, 28%, 38%, 48% { transform: rotate(-4deg); }
}
/* the open mouth grows out from under the smile line and tucks back under it
   (the same beats as the closed layer: opens at 56%, open 60-86%, gone by 90%) */
@keyframes grin{
  0%, 55.9% { opacity: 0; transform: scale(1, 0); }
  56% { opacity: 1; transform: scale(1, 0); }
  61%, 85% { opacity: 1; transform: scale(1, 1); }
  89.9% { opacity: 1; transform: scale(1, 0); }
  90%, 100% { opacity: 0; transform: scale(1, 0); }
}
/* a pin drops in with a small bounce, stays a while, then fades */
@keyframes pin-pop{
  0%, 8% { opacity: 0; transform: translateY(-6px) scale(.4); }
  16% { opacity: 1; transform: translateY(0) scale(1.12); }
  22% { opacity: 1; transform: translateY(0) scale(.96); }
  28%, 70% { opacity: 1; transform: translateY(0) scale(1); }
  82%, 100% { opacity: 0; transform: translateY(0) scale(.9); }
}
/* a sparkle grows, turns a little, shrinks away */
@keyframes twinkle{
  0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  30% { opacity: 1; transform: scale(1) rotate(20deg); }
  60% { opacity: 0; transform: scale(.3) rotate(45deg); }
}
/* steam rises from the mug and fades */
@keyframes steam{
  0% { opacity: 0; transform: translateY(2px); }
  30% { opacity: .75; transform: translateY(-1px); }
  100% { opacity: 0; transform: translateY(-7px); }
}

/* Still pose: the open (big smile) layers show; closed and mid layers rest hidden. */
.qk-c,.qk-m{opacity:0}
.qk-o{opacity:1}

@media (prefers-reduced-motion: no-preference){
  #head{animation:head 6s cubic-bezier(.45,0,.3,1) infinite}
  #gaze{animation:gaze 6s cubic-bezier(.45,0,.3,1) infinite}
  #eyes{animation:eyes 6s cubic-bezier(.45,0,.3,1) infinite}
  #cheekL{animation:cheekL 6s cubic-bezier(.45,0,.3,1) infinite}
  #cheekR{animation:cheekR 6s cubic-bezier(.45,0,.3,1) infinite}
  #muzzle{animation:muzzle 6s cubic-bezier(.45,0,.3,1) infinite}
  #earL{animation:earL 6s cubic-bezier(.45,0,.3,1) infinite}
  #earR{animation:earR 6s cubic-bezier(.45,0,.3,1) infinite}
  #armL{animation:armL 6s cubic-bezier(.45,0,.3,1) infinite}
  #armR{animation:armR 6s cubic-bezier(.45,0,.3,1) infinite}
  .qk-lid.qk-c{animation:lid-c 6s linear infinite}
  .qk-lid.qk-m{animation:lid-m 6s linear infinite}
  .qk-lid.qk-o{animation:lid-o 6s linear infinite}
  .qk-mouth.qk-c{animation:mouth-c 6s linear infinite}
  .qk-mouth.qk-o{animation:grin 6s cubic-bezier(.45,0,.3,1) infinite}
  .qk-pin{animation:pin-pop 6s ease-out infinite;animation-delay:var(--d)}
  .qk-spark{animation:twinkle 3s ease-in-out infinite;animation-delay:var(--d)}
  .qk-steam{animation:steam 3s ease-out infinite;animation-delay:var(--d)}
}

@keyframes lid-c{0%,58%{opacity:1}58.01%,88.99%{opacity:0}89%,100%{opacity:1}}
@keyframes lid-m{0%,54%{opacity:0}58%,62%{opacity:1}62.01%,85.99%{opacity:0}86%,89%{opacity:1}92%,100%{opacity:0}}
@keyframes lid-o{0%,58%{opacity:0}62%,86%{opacity:1}89%,100%{opacity:0}}
@keyframes mouth-c{0%,56%{opacity:1}56.01%,89.99%{opacity:0}90%,100%{opacity:1}}

/* Tab hidden: quokka.js adds this class on visibilitychange. */
.qk-paused #quokka *{animation-play-state:paused}

@media (prefers-reduced-motion: reduce){
  #quokka *{animation:none}
  /* still picture: the pins stay, the twinkle and steam would only clutter it */
  #quokka .qk-spark,#quokka .qk-steam{opacity:0}
}