/* ActuallySpeak Kids — talking Kiki (see js/kids-kiki.js). */
.kiki-anim{position:relative;display:inline-block;line-height:0;max-width:100%;vertical-align:bottom}
.kiki-anim-host{display:inline-block}
.kiki-anim__orig{display:block;width:100%;height:auto}
.kiki-anim__bob{position:absolute;inset:0;display:block;transform-origin:50% 100%;animation:kikiBreathe 3.2s ease-in-out infinite}
.kiki-anim__sprite{
  position:absolute;inset:0;display:block;
  background-image:url("../art/kiki/kiki-talk-sheet.webp");
  background-size:600% 500%;background-repeat:no-repeat;background-position:0 0;
}
/* once the sheet is in, the painted original only holds the layout */
html.kiki-ready .kiki-anim__orig{visibility:hidden}
.kiki-anim.is-abs{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}
.kiki-anim.is-abs .kiki-anim__bob{position:relative;inset:auto;height:100%;aspect-ratio:256/320;max-width:100%}
.kiki-anim.is-abs .kiki-anim__sprite{filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.kiki-anim.is-talking .kiki-anim__bob{animation:kikiTalkBob .5s ease-in-out infinite}
@keyframes kikiBreathe{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-2px) scale(1.012,.992)}}
@keyframes kikiTalkBob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-3px) rotate(-1.2deg)}70%{transform:translateY(-1px) rotate(1deg)}}
@media (prefers-reduced-motion:reduce){ .kiki-anim__bob,.kiki-anim.is-talking .kiki-anim__bob{animation:none} }
html.ask-reduced .kiki-anim__bob{animation:none}