/* Expressive, finite gestures. Idle is still; playback is always explicit. */
.kite-character {
    display: block;
    max-width: 100%;
    height: auto;
    overflow: visible;
    flex: none;
}

.kite-character__body,
.kite-character__wing,
.kite-character__eye,
.kite-character__badge {
    transform-box: view-box;
}

.kite-character__body { transform-origin: 50% 53%; }
.kite-character__wing--back { transform-origin: 50% 42%; }
.kite-character__wing--front { transform-origin: 57.5% 47%; }
.kite-character__eye { transform-origin: 70% 28%; }
.kite-character__badge { transform-origin: 76.25% 70.625%; }

.is-playing.kite-character[data-state="greeting"] .kite-character__body,
.is-playing .kite-character[data-state="greeting"] .kite-character__body {
    animation: kite-greeting 920ms cubic-bezier(.2, 0, 0, 1) 1;
}

.is-playing.kite-character[data-state="greeting"] .kite-character__wing--front,
.is-playing .kite-character[data-state="greeting"] .kite-character__wing--front {
    animation: kite-unfurl 920ms cubic-bezier(.2, 0, 0, 1) 1;
}

.is-playing.kite-character[data-state="greeting"] .kite-character__wing--back,
.is-playing .kite-character[data-state="greeting"] .kite-character__wing--back {
    animation: kite-back-unfurl 920ms cubic-bezier(.2, 0, 0, 1) 1;
}

.is-playing.kite-character[data-state="working"] .kite-character__body,
.is-playing .kite-character[data-state="working"] .kite-character__body {
    animation: kite-focus 2200ms cubic-bezier(.2, 0, 0, 1) 1;
}

.is-playing.kite-character[data-state="working"] .kite-character__wing--front,
.is-playing .kite-character[data-state="working"] .kite-character__wing--front {
    animation: kite-fold 2200ms cubic-bezier(.2, 0, 0, 1) 1;
}

.is-playing.kite-character[data-state="complete"] .kite-character__body,
.is-playing .kite-character[data-state="complete"] .kite-character__body {
    animation: kite-acknowledge 550ms cubic-bezier(.2, 0, 0, 1) 1;
}

.is-playing.kite-character[data-state="complete"] .kite-character__badge,
.is-playing .kite-character[data-state="complete"] .kite-character__badge {
    animation: kite-confirm 550ms cubic-bezier(.2, 0, 0, 1) 1;
}

.is-playing.kite-character[data-state="attention"] .kite-character__body,
.is-playing .kite-character[data-state="attention"] .kite-character__body {
    animation: kite-orient 450ms cubic-bezier(.2, 0, 0, 1) 1;
}

@keyframes kite-greeting {
    0%, 100% { transform: translateY(0) rotate(0); }
    12% { transform: translateY(1px) rotate(1deg); }
    36% { transform: translateY(-5px) rotate(-6deg); }
    70% { transform: translateY(.7px) rotate(1deg); }
}

@keyframes kite-unfurl {
    0%, 100% { transform: rotate(0); }
    12% { transform: rotate(-3deg); }
    36% { transform: rotate(20deg); }
    70% { transform: rotate(-2.5deg); }
}

@keyframes kite-back-unfurl {
    0%, 100% { transform: rotate(0); }
    12% { transform: rotate(-1.5deg); }
    36% { transform: rotate(9deg); }
    70% { transform: rotate(-1deg); }
}

@keyframes kite-focus {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    22%, 55% { transform: translate(4px, 3px) rotate(5deg); }
    83% { transform: translate(-.5px, -.5px) rotate(-.7deg); }
}

@keyframes kite-fold {
    0%, 100% { transform: rotate(0); }
    22%, 55% { transform: rotate(-11deg); }
    83% { transform: rotate(1.2deg); }
}

@keyframes kite-acknowledge {
    0%, 100% { transform: translateY(0) rotate(0); }
    38% { transform: translateY(4.5px) rotate(5.5deg); }
    72% { transform: translateY(-.8px) rotate(-1deg); }
}

@keyframes kite-confirm {
    0%, 100% { transform: scale(1); }
    38% { transform: scale(.94); }
}

@keyframes kite-orient {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    40% { transform: translate(1px, -1.5px) rotate(-7deg); }
    74% { transform: translate(0, .3px) rotate(.8deg); }
}

html[data-motion="reduced"] .kite-character,
html[data-motion="reduced"] .kite-character *,
html[data-input="keyboard"] .kite-character,
html[data-input="keyboard"] .kite-character * {
    animation: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .kite-character,
    .kite-character * {
        animation: none !important;
        transition: none !important;
    }
}