/* Keyframe performances used by Voi's application states.

   Many keyframes use asymmetrical percentages to create natural-feeling motion:
   most of the cycle is held still with a brief burst of movement (e.g. blink is
   at 44 % but not 0-42 % or 46-100 %). This gives the impression of a character
   thinking or breathing rather than a mechanical loop. */

@keyframes mascot-idle-body {
    0%, 100% { transform: translateY(0) rotate(-0.5deg) scaleY(1); }
    45% { transform: translateY(-3px) rotate(0.7deg) scaleX(0.99) scaleY(1.025); }
    52% { transform: translateY(-3px) rotate(0.3deg) scaleX(0.99) scaleY(1.025); }
}

@keyframes mascot-blink {
    0%, 42%, 46%, 100% { transform: scaleY(1); }
    44% { transform: scaleY(0.06); }
}

@keyframes mascot-idle-look {
    0%, 22%, 62%, 100% { transform: translate(0); }
    28%, 44% { transform: translate(1.5px, -0.5px); }
    48%, 56% { transform: translate(-1px, 0.5px); }
}

@keyframes mascot-idle-right-wave {
    0%, 58%, 100% { transform: rotate(2deg); }
    66% { transform: rotate(-14deg); }
    74% { transform: rotate(-5deg); }
    82% { transform: rotate(-16deg); }
    90% { transform: rotate(1deg); }
}

@keyframes mascot-hover-body {
    0%, 100% { transform: translateY(0) rotate(0) scale(1); }
    32% { transform: translateY(-2px) rotate(1.5deg) scaleX(0.99) scaleY(1.02); }
    68% { transform: translateY(-1px) rotate(0.5deg) scale(1); }
}

@keyframes mascot-hover-head {
    0%, 100% { transform: rotate(0) translateY(0); }
    38%, 72% { transform: rotate(4deg) translateY(-1px); }
}

@keyframes mascot-hover-right-wave {
    0%, 100% { transform: rotate(2deg); }
    24% { transform: rotate(-23deg); }
    46% { transform: rotate(-7deg); }
    66% { transform: rotate(-20deg); }
    84% { transform: rotate(-2deg); }
}

@keyframes mascot-hover-left-nudge {
    0%, 100% { transform: rotate(0); }
    38%, 68% { transform: rotate(2deg) translateY(-1px); }
}

@keyframes mascot-hover-shadow {
    0%, 100% { transform: scaleX(1); opacity: 0.72; }
    42% { transform: scaleX(0.94); opacity: 0.62; }
}

@keyframes mascot-interaction-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    20% { transform: translateY(3px) scaleX(1.04) scaleY(0.96); }
    48% { transform: translateY(-8px) scaleX(0.98) scaleY(1.03); }
    76% { transform: translateY(1px) scaleX(1.02) scaleY(0.98); }
}

@keyframes mascot-interaction-shadow {
    0%, 100% { transform: scaleX(1); opacity: 0.72; }
    20% { transform: scaleX(1.06); opacity: 0.78; }
    48% { transform: scaleX(0.78); opacity: 0.42; }
}

@keyframes mascot-shake {
    0% { transform: translateX(0) rotate(0) scale(1); }
    12% { transform: translateY(-3px) rotate(0) scaleX(0.97) scaleY(1.04); }
    28% { transform: translateX(-6px) rotate(-3deg); }
    43% { transform: translateX(5px) rotate(2.5deg); }
    57% { transform: translateX(-4px) rotate(-2deg); }
    72% { transform: translateX(2px) rotate(1deg); }
    100% { transform: translateX(0) translateY(2px) rotate(-1deg) scaleX(1.02) scaleY(0.98); }
}

@keyframes mascot-head-droop {
    0% { transform: translateY(0) rotate(0); }
    18% { transform: translateY(-2px) rotate(3deg); }
    100% { transform: translateY(4px) rotate(-7deg); }
}

@keyframes mascot-wing-slump-right {
    from { transform: rotate(0); }
    to { transform: rotate(11deg); }
}

@keyframes mascot-error-squash {
    from { transform: scaleY(1); }
    to { transform: scaleY(0.96) translateY(2px); }
}

@keyframes mascot-error-look { to { transform: translate(-1px, 3px) scale(1.08); } }
@keyframes mascot-worried-brow-left { to { transform: translateY(2px) rotate(13deg); } }
@keyframes mascot-worried-brow-right { to { transform: translateY(2px) rotate(-13deg); } }
@keyframes mascot-gasp { 0% { transform: scaleY(1); } 25% { transform: translateY(3px) scaleY(1.65); } 100% { transform: translateY(1px) scaleY(1.2); } }

@keyframes mascot-reading-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    48%, 58% { transform: translateY(-1.5px) scaleX(0.995) scaleY(1.008); }
}

@keyframes mascot-reading-nod {
    0%, 18%, 100% { transform: translateY(0) rotate(0); }
    42%, 62% { transform: translateY(1px) rotate(1.4deg); }
    78% { transform: translateY(-0.5px) rotate(-0.6deg); }
}

@keyframes mascot-reading-scan {
    0%, 16%, 100% { transform: translate(-1.2px, 1px); }
    34%, 54% { transform: translate(1.4px, 1.2px); }
    70%, 84% { transform: translate(0.2px, 2px); }
}

@keyframes mascot-reading-document {
    0%, 100% { transform: translateY(0) rotate(0); }
    48%, 58% { transform: translateY(0.8px) rotate(0.35deg); }
}

@keyframes mascot-reading-grip {
    0%, 100% { transform: rotate(0); }
    48%, 58% { transform: rotate(-1.2deg); }
}

@keyframes mascot-reading-shadow {
    0%, 100% { transform: scaleX(1); opacity: 0.72; }
    48%, 58% { transform: scaleX(0.96); opacity: 0.62; }
}

@keyframes mascot-working-body {
    0%, 100% { transform: translate(-1px, 1px) rotate(-4deg) scaleX(1.02) scaleY(0.98); }
    25% { transform: translate(1px, -5px) rotate(-2deg) scaleX(0.98) scaleY(1.03); }
    50% { transform: translate(2px, 0) rotate(-4deg) scaleX(1.02) scaleY(0.98); }
    75% { transform: translate(0, -5px) rotate(-2deg) scaleX(0.98) scaleY(1.03); }
}

@keyframes mascot-scan {
    from { transform: translateX(-2px); }
    to { transform: translateX(2px); }
}

@keyframes mascot-pump-right {
    0%, 100% { transform: rotate(18deg); }
    50% { transform: rotate(-20deg); }
}

@keyframes mascot-step-left {
    0%, 100% { transform: translate(2px, -6px) rotate(-20deg); }
    45%, 55% { transform: translate(-1px, 2px) rotate(8deg); }
}

@keyframes mascot-step-right {
    0%, 100% { transform: translate(-1px, 2px) rotate(-8deg); }
    45%, 55% { transform: translate(2px, -6px) rotate(20deg); }
}

@keyframes mascot-shadow-working {
    0%, 100% { transform: scaleX(1); opacity: 0.72; }
    50% { transform: scaleX(0.84); opacity: 0.5; }
}

@keyframes mascot-focused-brow { 0%, 100% { transform: translateY(1px) rotate(3deg); } 50% { transform: translateY(2px) rotate(-3deg); } }
@keyframes mascot-running-belly { 0%, 100% { transform: scaleX(1.03) scaleY(0.97); } 50% { transform: scaleX(0.97) scaleY(1.03); } }

@keyframes mascot-jump {
    0% { transform: translateY(0) rotate(0) scale(1); }
    14% { transform: translateY(6px) rotate(-3deg) scaleX(1.1) scaleY(0.9); }
    22% { transform: translateY(2px) rotate(2deg) scaleX(0.96) scaleY(1.06); }
    48% { transform: translateY(-22px) rotate(5deg) scaleX(0.95) scaleY(1.07); }
    66% { transform: translateY(-13px) rotate(-3deg) scale(1); }
    80% { transform: translateY(4px) rotate(0) scaleX(1.09) scaleY(0.92); }
    90% { transform: translateY(-2px) scaleX(0.98) scaleY(1.03); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes mascot-flap-right {
    0%, 10%, 100% { transform: rotate(4deg); }
    22% { transform: rotate(20deg); }
    43% { transform: rotate(-48deg); }
    58% { transform: rotate(-22deg); }
    72% { transform: rotate(-44deg); }
    86% { transform: rotate(8deg); }
}

@keyframes mascot-happy-nod {
    0%, 14%, 100% { transform: rotate(0) translateY(0); }
    24% { transform: rotate(-7deg) translateY(2px); }
    48% { transform: rotate(9deg) translateY(-2px); }
    67% { transform: rotate(-5deg) translateY(-1px); }
    82% { transform: rotate(3deg) translateY(2px); }
}

@keyframes mascot-kick-left {
    0%, 14%, 100% { transform: rotate(0) translateY(0); }
    32% { transform: rotate(18deg) translate(3px, -4px); }
    52% { transform: rotate(-28deg) translate(-3px, -8px); }
    80% { transform: rotate(8deg) translateY(2px); }
}

@keyframes mascot-kick-right {
    0%, 14%, 100% { transform: rotate(0) translateY(0); }
    32% { transform: rotate(-18deg) translate(-3px, -4px); }
    52% { transform: rotate(28deg) translate(3px, -8px); }
    80% { transform: rotate(-8deg) translateY(2px); }
}

@keyframes mascot-shadow-jump {
    0%, 14%, 100% { transform: scaleX(1); opacity: 0.72; }
    48% { transform: scaleX(0.48); opacity: 0.25; }
    80% { transform: scaleX(1.16); opacity: 0.8; }
}

@keyframes mascot-happy-eyes { 0%, 35%, 66%, 100% { transform: scaleY(1); } 48%, 58% { transform: scaleY(0.18); } 80% { transform: scaleY(0.82); } }
@keyframes mascot-happy-brow-left { 0%, 100% { transform: translateY(0) rotate(0); } 38%, 62% { transform: translate(-1px, -3px) rotate(-10deg); } }
@keyframes mascot-happy-brow-right { 0%, 100% { transform: translateY(0) rotate(0); } 38%, 62% { transform: translate(1px, -3px) rotate(10deg); } }
@keyframes mascot-cheer-mouth { 0%, 20%, 100% { transform: scaleY(1); } 42%, 68% { transform: translateY(4px) scaleX(1.08) scaleY(1.65); } 82% { transform: translateY(1px) scaleY(1.15); } }
@keyframes mascot-happy-belly { 0%, 14%, 100% { transform: scale(1); } 48% { transform: scaleX(0.96) scaleY(1.06); } 80% { transform: scaleX(1.08) scaleY(0.93); } }

@keyframes mascot-curious-head {
    0%, 100% { transform: rotate(-4deg) translateY(1px); }
    50% { transform: rotate(5deg) translateY(-1px); }
}

@keyframes mascot-curious-character {
    0%, 100% { transform: translateY(1px) rotate(-2deg); }
    50% { transform: translateY(-1px) rotate(2deg); }
}

@keyframes mascot-curious-wing {
    0%, 18%, 100% { transform: rotate(0); }
    38% { transform: rotate(-24deg); }
    52% { transform: rotate(-12deg); }
    64% { transform: rotate(-27deg); }
    78% { transform: rotate(-4deg); }
}

@keyframes mascot-searching-eyes { 0%, 15%, 100% { transform: translateX(-2px); } 42%, 62% { transform: translateX(3px); } 78% { transform: translate(0, 2px); } }
@keyframes mascot-curious-brow-left { 0%, 100% { transform: translateY(1px) rotate(8deg); } 50% { transform: translateY(-2px) rotate(-6deg); } }
@keyframes mascot-curious-brow-right { 0%, 100% { transform: translateY(-2px) rotate(8deg); } 50% { transform: translateY(1px) rotate(-6deg); } }
@keyframes mascot-curious-mouth { 0%, 28%, 100% { transform: scaleY(1); } 45%, 62% { transform: translateY(2px) scaleY(1.35); } }