/* Visual behavior assigned to each Voi application state. */

@keyframes mascot-message-arrive {
    from {
        opacity: 0;
        transform: translateY(0.25rem) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes mascot-message-dismiss {
    to {
        opacity: 0;
        transform: translateY(-0.2rem) scale(0.98);
    }
}

.mascot--idle .mascot__character {
    animation: mascot-idle-body 3.6s ease-in-out infinite;
}

.mascot--idle :is(.mascot__eye, .mascot__pupil, .mascot__eye-shine) {
    animation: mascot-blink 5.2s ease-in-out infinite;
}

.mascot--idle .mascot__pupil {
    animation: mascot-idle-look 5.2s ease-in-out infinite;
}

.mascot--idle .mascot__wing--right {
    animation: mascot-idle-right-wave 4.8s ease-in-out infinite;
}

.mascot--idle.mascot--tracking .mascot__pupil {
    animation: none;
    transform: translate(var(--mascot-look-x, 0), var(--mascot-look-y, 0));
    transition: transform 90ms ease-out;
}

.mascot--idle.mascot--hovered .mascot__character {
    animation: mascot-hover-body 760ms ease-out both;
}

.mascot--idle.mascot--hovered .mascot__head-part {
    animation: mascot-hover-head 760ms ease-out both;
}

.mascot--idle.mascot--hovered .mascot__wing--right {
    animation: mascot-hover-right-wave 760ms ease-out both;
}

.mascot--idle.mascot--hovered .mascot__wing--left {
    animation: mascot-hover-left-nudge 760ms ease-out both;
}

.mascot--idle.mascot--hovered .mascot__shadow {
    animation: mascot-hover-shadow 760ms ease-out both;
}

.mascot--idle.mascot--activated .mascot__character {
    animation: mascot-interaction-bounce 500ms cubic-bezier(0.2, 0.85, 0.25, 1.08) both;
}

.mascot--idle.mascot--activated .mascot__shadow {
    animation: mascot-interaction-shadow 500ms ease-out both;
}

.mascot--error .mascot__character {
    animation: mascot-shake 420ms ease-out both;
}

.mascot--error .mascot__wing--right {
    animation: mascot-wing-slump-right 520ms ease-out both;
}

.mascot--error .mascot__body {
    animation: mascot-error-squash 680ms ease-out both;
}

.mascot--error .mascot__pupil {
    animation: mascot-error-look 680ms ease-out both;
}

.mascot--error .mascot__brow--left {
    animation: mascot-worried-brow-left 680ms ease-out both;
}

.mascot--error .mascot__brow--right {
    animation: mascot-worried-brow-right 680ms ease-out both;
}

.mascot--error .mascot__beak--lower {
    animation: mascot-gasp 680ms ease-out both;
}

.mascot--reading .mascot__reading-character {
    animation: mascot-reading-breathe 2.4s ease-in-out infinite;
}

.mascot--reading .mascot__reading-head {
    animation: mascot-reading-nod 2.4s ease-in-out infinite;
}

.mascot--reading .mascot__reading-pupil {
    animation: mascot-reading-scan 2.4s ease-in-out infinite;
}

.mascot--reading .mascot__reading-document {
    animation: mascot-reading-document 2.4s ease-in-out infinite;
}

.mascot--reading .mascot__reading-wing--right {
    animation: mascot-reading-grip 2.4s ease-in-out infinite;
}

.mascot--reading .mascot__reading-shadow {
    animation: mascot-reading-shadow 2.4s ease-in-out infinite;
}

.mascot--submitting .mascot__character {
    animation: mascot-working-body 540ms ease-in-out infinite;
}

.mascot--submitting .mascot__pupil {
    animation: mascot-scan 700ms ease-in-out infinite alternate;
}

.mascot--submitting .mascot__wing--right {
    animation: mascot-pump-right 540ms ease-in-out infinite;
}

.mascot--submitting :is(.mascot__leg--left, .mascot__foot--left) {
    animation: mascot-step-left 540ms ease-in-out infinite;
}

.mascot--submitting :is(.mascot__leg--right, .mascot__foot--right) {
    animation: mascot-step-right 540ms ease-in-out infinite;
}

.mascot--submitting .mascot__shadow {
    animation: mascot-shadow-working 540ms ease-in-out infinite;
}

.mascot--submitting :is(.mascot__brow--left, .mascot__brow--right) {
    animation: mascot-focused-brow 540ms ease-in-out infinite;
}

.mascot--submitting .mascot__belly {
    animation: mascot-running-belly 540ms ease-in-out infinite;
}

.mascot--success .mascot__character {
    animation: mascot-jump 1250ms cubic-bezier(0.2, 0.85, 0.25, 1.08) both;
}

.mascot--success .mascot__wing--right {
    animation: mascot-flap-right 1250ms ease-out both;
}

.mascot--success :is(.mascot__leg--left, .mascot__foot--left) {
    animation: mascot-kick-left 1250ms ease-out both;
}

.mascot--success :is(.mascot__leg--right, .mascot__foot--right) {
    animation: mascot-kick-right 1250ms ease-out both;
}

.mascot--success .mascot__shadow {
    animation: mascot-shadow-jump 1250ms ease-out both;
}

.mascot--success :is(.mascot__eye, .mascot__pupil, .mascot__eye-shine) {
    animation: mascot-happy-eyes 1250ms ease-out both;
}

.mascot--success .mascot__brow--left {
    animation: mascot-happy-brow-left 1250ms ease-out both;
}

.mascot--success .mascot__brow--right {
    animation: mascot-happy-brow-right 1250ms ease-out both;
}

.mascot--success .mascot__beak--lower {
    animation: mascot-cheer-mouth 1250ms ease-out both;
}

.mascot--success .mascot__belly {
    animation: mascot-happy-belly 1250ms ease-out both;
}

.mascot--page-error .mascot__character {
    animation: mascot-curious-character 2.8s ease-in-out infinite;
}

.mascot--page-error .mascot__wing--right {
    animation: mascot-curious-wing 2.8s ease-in-out infinite;
}

.mascot--page-error .mascot__pupil {
    animation: mascot-searching-eyes 2.8s ease-in-out infinite;
}

.mascot--page-error .mascot__brow--left {
    animation: mascot-curious-brow-left 2.8s ease-in-out infinite;
}

.mascot--page-error .mascot__brow--right {
    animation: mascot-curious-brow-right 2.8s ease-in-out infinite;
}

.mascot--page-error .mascot__beak--lower {
    animation: mascot-curious-mouth 2.8s ease-in-out infinite;
}

.success-card > .mascot,
.error-card > .mascot {
    width: 8.5rem;
    margin: 0 auto 1.4rem;
}

.success-card > .mascot {
    --mascot-art-height: 8.01rem;
    position: relative;
    width: min(100%, 16rem);
    height: 13.875rem;
    justify-content: flex-end;
}

.success-card > .mascot .mascot__art {
    width: 8.5rem;
}

.success-card > .mascot .mascot__message,
.error-card > .mascot .mascot__message {
    width: max-content;
    max-width: calc(100vw - 4rem);
    color: var(--color-ink);
}

.success-card > .mascot .mascot__message {
    position: absolute;
    right: 0;
    bottom: calc(var(--mascot-art-height) + 0.75rem);
    left: 0;
    margin-inline: auto;
}