/* Whole-image motion only. Tunable values stay together. */
:root{--character-ease:cubic-bezier(.16,1,.3,1);--character-duration:800ms;--character-rise:6px;--character-lean:2deg}
.ky-character{display:block;transform-origin:50% 90%}
.ky-character.is-moving{animation:ky-greet var(--character-duration) var(--character-ease) both}
.ky-character[data-motion="idea"].is-moving{animation-name:ky-idea}
.ky-character[data-motion="listen"].is-moving{animation-name:ky-listen}
.ky-character[data-motion="complete"].is-moving{animation-name:ky-complete;animation-duration:650ms}
.ky-character[data-motion="together"].is-moving{animation-name:ky-together}
.ky-character[data-motion="log"].is-moving{animation-name:ky-log}
@keyframes ky-greet{0%,100%{transform:none}40%{transform:rotate(calc(-1 * var(--character-lean)))}70%{transform:rotate(1deg)}}
@keyframes ky-idea{0%,100%{transform:none}45%{transform:translateY(-4px) rotate(-1deg)}}
@keyframes ky-listen{0%,100%{transform:none}45%{transform:rotate(1.5deg)}}
@keyframes ky-complete{0%,100%{transform:none}45%{transform:translateY(calc(-1 * var(--character-rise)))}70%{transform:translateY(1px)}}
@keyframes ky-together{0%,100%{transform:none}55%{transform:scale(1.025)}}
@keyframes ky-log{0%,100%{transform:none}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.ky-character.is-moving{animation:none!important;transform:none!important}}