/* The site assistant: the helper in the corner of every page (prefix: .ka-).
   The same tokens as the University pages and the appeal form: the brand
   blue (#0096db) and the Roboto Slab font come from base.html; the header's
   gradient is the page hero's (page-hero.css). */

.ka {
    --ka-primary: #0096db;
    --ka-primary-dark: #0987c2;
    --ka-primary-deep: #075e87;
    --ka-ink: #1e293b;
    --ka-muted: #64748b;
    --ka-line: #e2e8f0;
    --ka-bg-soft: #f4f8fb;
    --ka-tint: rgba(0, 150, 219, .12);
    --ka-accent: #ffd166;
    --ka-radius: 16px;
    --ka-shadow: 0 10px 30px -12px rgba(2, 74, 110, .25);
    --ka-shadow-panel: 0 24px 60px -18px rgba(2, 74, 110, .45);
    --ka-gradient:
        radial-gradient(120% 120% at 85% 0%, rgba(255, 255, 255, .16), transparent 55%),
        linear-gradient(135deg, var(--ka-primary) 0%, var(--ka-primary-dark) 45%, var(--ka-primary-deep) 100%);
    position: fixed;
    right: 14px;
    bottom: max(8px, env(safe-area-inset-bottom));
    /* The corner the robot stands in stays usable: only the robot itself, its
       hint and the panel take clicks, not the empty box around them, so a
       slider arrow or a footer link behind that box still works. */
    pointer-events: none;
    /* assistant.js lifts it (the translate property) while a button is under
       the robot. At rest it has none: any translate would make it the box the
       phone's full-screen panel is fixed to, instead of the screen. */
    transition: translate .35s cubic-bezier(.2, .9, .3, 1.2);
    /* the header's level (.header-top); later in the page, so above it.
       The preloader (10000000) still covers it. */
    z-index: 9999999;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ka-ink);
    -webkit-font-smoothing: antialiased;
}

.ka[hidden],
.ka [hidden] {
    display: none !important;
}

.ka *,
.ka *::before,
.ka *::after {
    box-sizing: border-box;
}

.ka button {
    font: inherit;
}

.ka :focus-visible {
    outline: 3px solid var(--ka-primary);
    outline-offset: 3px;
}

/* ---------- The launcher: the robot standing at the foot of the page ---------- */
.ka-launcher {
    position: relative;
    display: block;
    width: 90px;
    height: 116px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: var(--ka-radius);
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Out with a jump: the curve overshoots and settles. */
    transition: translate .45s cubic-bezier(.2, 1.6, .4, 1);
    animation: ka-arrive .6s cubic-bezier(.2, .9, .3, 1.3) both;
}

/* Waiting below the edge of the screen until it is called (assistant.js). */
.ka.is-tucked .ka-launcher {
    translate: 0 calc(100% + 24px);
    transition: translate .28s ease-in;
}

/* Lifting its head over the edge to look around: the cap and the eyes show. */
.ka.is-tucked.is-peeking .ka-launcher {
    translate: 0 calc(100% - 50px);
    visibility: visible;
    transition: translate .5s cubic-bezier(.2, 1.2, .4, 1);
}

/* Touch screens: no cursor to call it with, so an arrow at the screen's bottom
   edge does. A tab on the edge, not a round button: an arrow up in a circle in
   this corner reads as "back to the top". */
.ka-handle {
    display: none;
}

.ka--touch.is-tucked .ka-handle {
    position: absolute;
    right: calc((100% - 60px) / 2);
    bottom: calc(-1 * max(8px, env(safe-area-inset-bottom)));
    display: grid;
    place-items: center;
    width: 60px;
    height: calc(40px + env(safe-area-inset-bottom));
    padding: 0 0 env(safe-area-inset-bottom);
    border: 0;
    border-radius: 14px 14px 0 0;
    background: var(--ka-gradient);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 -6px 18px -8px rgba(2, 74, 110, .55);
    -webkit-tap-highlight-color: transparent;
    z-index: 1; /* the robot peeks from behind it */
}

/* A little more to press than to see. */
.ka--touch.is-tucked .ka-handle::before {
    content: "";
    position: absolute;
    inset: -10px -10px 0;
}

/* Lifted off a button, it is no longer on the edge. */
.ka.is-lifted .ka-handle {
    border-radius: 14px;
}

.ka-handle i {
    animation: ka-handle-bob 1.8s ease-in-out infinite;
}

/* Out of reach, out of the tab order too (with a mouse, Tab may still call it). */
.ka--touch.is-tucked .ka-launcher {
    visibility: hidden;
    transition: translate .28s ease-in, visibility 0s linear .28s;
}

/* Over the arrow: the eyes clear its top edge, the rest stays behind it. */
.ka--touch.is-tucked.is-peeking .ka-launcher {
    translate: 0 calc(100% - 82px);
}

.ka-launcher__bot {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 10px 14px rgba(2, 74, 110, .22));
    transition: transform .2s ease;
}

.ka-launcher:hover .ka-launcher__bot {
    transform: translateY(-3px) scale(1.03);
}

.ka-launcher:active .ka-launcher__bot {
    transform: scale(.97);
}

/* While the panel is open: a small close badge on the robot's shoulder. */
/* What takes clicks inside the corner (see .ka): the robot's drawn shapes,
   the close badge, the hint and the panel. */
.ka-bot--full .ka-bot__all,
.ka-handle,
.ka-launcher__close,
.ka-bubble,
.ka-panel {
    pointer-events: auto;
}

.ka-launcher__close {
    position: absolute;
    top: 4px;
    left: 2px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ka-primary);
    color: #fff;
    font-size: 14px;
    box-shadow: 0 6px 14px -6px rgba(0, 150, 219, .9);
    opacity: 0;
    transform: scale(.5);
    transition: opacity .2s ease, transform .2s ease;
}

.ka.is-open .ka-launcher__close {
    opacity: 1;
    transform: none;
}

/* ---------- The mascot ---------- */
.ka-bot {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Always: it floats a little, blinks, its tassel sways, its light breathes. */
.ka-bot__body {
    animation: ka-float 3.4s ease-in-out infinite;
}

.ka-bot__all,
.ka-bot__head,
.ka-bot__arm,
.ka-bot__shadow,
.ka-bot__tassel,
.ka-bot__gaze {
    transform-box: fill-box;
}

.ka-bot__all {
    transform-origin: 50% 100%;
}

.ka-bot__head {
    transform-origin: 50% 90%;
}

.ka-bot__shadow {
    fill: rgba(2, 74, 110, .2);
    transform-origin: center;
    animation: ka-shadow 3.4s ease-in-out infinite;
}

/* The arms turn at the shoulder; at rest they hang a little apart. */
.ka-bot__arm {
    transform-origin: 50% 8%;
}

.ka-bot__arm--left {
    transform: rotate(10deg);
}

.ka-bot__arm--right {
    transform: rotate(-10deg);
}

.ka-bot__light {
    fill: #6fe0ff;
    animation: ka-glow 2.4s ease-in-out infinite;
}

.ka-bot__ear {
    fill: var(--ka-accent);
}

.ka-bot__eyes {
    transition: transform .25s ease-out;
}

.ka-bot__eye {
    fill: #6fe0ff;
    transform-box: fill-box;
    transform-origin: center;
    animation: ka-blink 5.2s infinite;
}

.ka-bot__mouth {
    fill: none;
    stroke: #6fe0ff;
    stroke-width: 3.2;
    stroke-linecap: round;
    transition: d .25s ease;
}

.ka-bot__cheek {
    fill: #ff8fb1;
    opacity: .55;
    transition: opacity .25s ease;
}

.ka-bot__tassel {
    transform-origin: 0 0;
    animation: ka-tassel 3.4s ease-in-out infinite;
}

.ka-bot__spark {
    fill: var(--ka-accent);
    transform-box: fill-box;
    transform-origin: center;
    animation: ka-twinkle 2.6s ease-in-out infinite;
}

/* A wide smile when pointed at, when waving, and in the panel's header. */
.ka-launcher:hover .ka-bot__mouth,
.ka-move-wave .ka-bot__mouth,
.ka-move-dance .ka-bot__mouth,
.ka-move-hop .ka-bot__mouth,
.ka-head__avatar .ka-bot__mouth {
    d: path("M50 80 Q60 91 70 80");
}

.ka-launcher:hover .ka-bot__cheek {
    opacity: .9;
}

/* ---------- Its moves: assistant.js plays one every few seconds ---------- */
.ka-move-wave .ka-bot__arm--right {
    animation: ka-wave 1.9s ease-in-out both;
}

.ka-move-wave .ka-bot__head {
    animation: ka-head-tilt 1.9s ease-in-out both;
}

.ka-move-hop .ka-bot__all {
    animation: ka-hop 1.1s ease-in-out both;
}

.ka-move-hop .ka-bot__shadow {
    animation: ka-hop-shadow 1.1s ease-in-out both;
}

.ka-move-hop .ka-bot__arm--left {
    animation: ka-arms-up-left 1.1s ease-in-out both;
}

.ka-move-hop .ka-bot__arm--right {
    animation: ka-arms-up-right 1.1s ease-in-out both;
}

.ka-move-look .ka-bot__gaze {
    animation: ka-look 2.4s ease-in-out both;
}

.ka-move-look .ka-bot__head {
    animation: ka-look-head 2.4s ease-in-out both;
}

.ka-move-dance .ka-bot__all {
    animation: ka-dance 2.2s ease-in-out both;
}

.ka-move-dance .ka-bot__arm--left {
    animation: ka-dance-left 2.2s ease-in-out both;
}

.ka-move-dance .ka-bot__arm--right {
    animation: ka-dance-right 2.2s ease-in-out both;
}

.ka-move-nod .ka-bot__head {
    animation: ka-nod 1.2s ease-in-out both;
}

.ka-move-cap .ka-bot__tassel {
    animation: ka-tassel-spin 1.5s ease-in-out both;
}

.ka-move-cap .ka-bot__spark {
    animation: ka-spark-burst 1.5s ease-in-out both;
}

.ka-move-cap .ka-bot__head {
    animation: ka-nod 1.5s ease-in-out both;
}

/* Searching: a hand to its chin, eyes up, the light quick. */
.ka.is-busy .ka-launcher .ka-bot__arm--right {
    transform: rotate(-38deg);
}

.ka.is-busy .ka-bot__gaze {
    transform: translate(2px, -3px);
}

.ka.is-busy .ka-bot__light {
    animation-duration: .5s;
}

.ka.is-busy .ka-head__avatar .ka-bot__cheek {
    opacity: .9;
}

/* ---------- The hint bubble ---------- */
.ka-bubble {
    position: absolute;
    right: 90px;
    bottom: 56px;
    width: max-content;
    max-width: 250px;
    padding: 14px 40px 14px 16px;
    background: #fff;
    border-radius: var(--ka-radius);
    box-shadow: var(--ka-shadow-panel);
    animation: ka-pop .35s cubic-bezier(.2, .9, .3, 1.2) both;
}

/* The tail points right, at the robot. */
.ka-bubble::after {
    content: "";
    position: absolute;
    right: -6px;
    bottom: 22px;
    width: 14px;
    height: 14px;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 0 4px 0 0;
}

.ka-bubble__text {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ka-ink);
}

.ka-bubble__close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ka-muted);
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.ka-bubble__close:hover {
    background: var(--ka-bg-soft);
    color: var(--ka-ink);
}

/* ---------- The panel ---------- */
/* Beside the robot, so it stands next to the chat it speaks in. */
.ka-panel {
    position: absolute;
    right: 98px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 392px;
    height: min(640px, calc(100vh - 40px));
    /* not the site's padding for every <section> (styles.css) */
    padding: 0;
    background: #fff;
    border-radius: var(--ka-radius);
    box-shadow: var(--ka-shadow-panel);
    overflow: hidden;
    transform-origin: bottom right;
    animation: ka-open .22s ease-out both;
}

.ka-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px 14px 16px;
    background: var(--ka-gradient);
    color: #fff;
}

.ka-head__avatar {
    flex: none;
    width: 48px;
    height: 48px;
    padding: 2px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

.ka-head__text {
    flex: 1;
    min-width: 0;
}

.ka-head__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.ka-head__subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, .85);
}

.ka-icon-btn {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s ease;
}

.ka-icon-btn:hover {
    background: rgba(255, 255, 255, .26);
}

.ka-head :focus-visible {
    outline-color: #fff;
}

/* ---------- The conversation ---------- */
.ka-log {
    position: relative; /* the answers' offsetTop counts from here */
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ka-bg-soft);
    scroll-behavior: smooth;
}

.ka-log:focus {
    outline: none;
}

.ka-msg {
    max-width: 92%;
    animation: ka-rise .25s ease-out both;
}

.ka-msg--user {
    align-self: flex-end;
    padding: 10px 14px;
    border-radius: var(--ka-radius) var(--ka-radius) 6px var(--ka-radius);
    background: var(--ka-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 20px -12px rgba(0, 150, 219, .9);
    overflow-wrap: anywhere;
}

.ka-msg--bot {
    align-self: flex-start;
    width: 100%;
    max-width: 100%;
}

.ka-say {
    display: inline-block;
    max-width: 92%;
    padding: 12px 14px;
    border: 1px solid var(--ka-line);
    border-radius: 6px var(--ka-radius) var(--ka-radius) var(--ka-radius);
    background: #fff;
    box-shadow: var(--ka-shadow);
}

/* Several in one answer stack: ready answers, then what was found. */
.ka-say + .ka-say {
    display: block;
    width: fit-content;
    margin-top: 10px;
}

.ka-say p {
    margin: 0;
}

.ka-say p + p {
    margin-top: 6px;
}

.ka-say--answer {
    border-color: rgba(0, 150, 219, .35);
    box-shadow: 0 0 0 3px var(--ka-tint), var(--ka-shadow);
}

.ka-say__question {
    font-size: 13px;
    font-weight: 700;
    color: var(--ka-primary-deep);
}

.ka-say__answer {
    white-space: pre-line;
}

.ka-msg__error {
    color: var(--bs-danger);
}

.ka-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.ka-chip {
    padding: 7px 14px;
    border: 1px solid rgba(0, 150, 219, .3);
    border-radius: 999px;
    background: #fff;
    color: var(--ka-primary-deep);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.ka-chip:hover {
    background: var(--ka-primary);
    border-color: var(--ka-primary);
    color: #fff;
    transform: translateY(-1px);
}

.ka-suggest {
    margin-top: 10px;
    font-size: 13px;
    color: var(--ka-muted);
}

.ka-suggest .ka-chip {
    margin-left: 4px;
}

/* ---------- Result groups and cards ---------- */
.ka-group {
    margin-top: 14px;
}

.ka-group__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ka-muted);
}

.ka-group__count {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ka-tint);
    color: var(--ka-primary-deep);
    letter-spacing: 0;
}

.ka-cards {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ka-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--ka-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 16px -14px rgba(2, 74, 110, .5);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ka-card:hover {
    border-color: rgba(0, 150, 219, .35);
    box-shadow: var(--ka-shadow);
}

.ka-card__avatar,
.ka-card__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ka-tint);
    color: var(--ka-primary-deep);
    font-size: 15px;
    font-weight: 700;
    overflow: hidden;
}

.ka-card__icon {
    border-radius: 12px;
    font-size: 18px;
}

.ka-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ka-card__body {
    flex: 1;
    min-width: 0;
}

.ka-card__label {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ka-primary);
}

.ka-card__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ka-ink);
    overflow-wrap: anywhere;
}

a.ka-card__title {
    text-decoration: none;
}

a.ka-card__title:hover {
    color: var(--ka-primary);
    text-decoration: underline;
}

.ka-card__meta {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ka-muted);
    overflow-wrap: anywhere;
}

.ka-card__meta a {
    color: var(--ka-primary-deep);
}

.ka-card__snippet {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ka-ink);
}

.ka-card__snippet mark {
    padding: 0 2px;
    border-radius: 4px;
    background: rgba(255, 209, 102, .55);
    color: inherit;
}

.ka-people {
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-top: 1px dashed var(--ka-line);
    list-style: none;
}

.ka-people li + li {
    margin-top: 8px;
}

.ka-people__name {
    display: block;
    font-size: 13px;
    font-weight: 700;
}

.ka-people__position {
    display: block;
    font-size: 12px;
    color: var(--ka-muted);
}

.ka-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.ka-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--ka-bg-soft);
    border: 1px solid var(--ka-line);
    color: var(--ka-primary-deep);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.ka-action:hover {
    background: var(--ka-primary);
    border-color: var(--ka-primary);
    color: #fff;
    text-decoration: none;
}

.ka-action i {
    font-size: 12px;
}

.ka-action small {
    font-weight: 500;
    opacity: .8;
}

.ka-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ka-primary-deep);
    text-decoration: none;
}

.ka-more:hover {
    color: var(--ka-primary);
    text-decoration: underline;
}

/* ---------- Searching ---------- */
.ka-typing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 14px 16px;
    border: 1px solid var(--ka-line);
    border-radius: 6px var(--ka-radius) var(--ka-radius) var(--ka-radius);
    background: #fff;
}

.ka-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ka-primary);
    animation: ka-dot 1s ease-in-out infinite;
}

.ka-typing span:nth-child(2) {
    animation-delay: .15s;
}

.ka-typing span:nth-child(3) {
    animation-delay: .3s;
}

/* ---------- Asking ---------- */
.ka-form {
    display: flex;
    gap: 8px;
    padding: 12px 12px 6px;
    border-top: 1px solid var(--ka-line);
    background: #fff;
}

.ka-input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--ka-line);
    border-radius: 999px;
    background: var(--ka-bg-soft);
    color: var(--ka-ink);
    font: inherit;
    font-size: 15px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.ka-input::placeholder {
    color: var(--ka-muted);
}

.ka-input:focus {
    outline: none;
    border-color: var(--ka-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 150, 219, .18);
}

.ka-send {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ka-primary);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(0, 150, 219, .8);
    transition: transform .15s ease, background .15s ease, opacity .15s ease;
}

.ka-send:hover:not(:disabled) {
    background: var(--ka-primary-dark);
    transform: translateY(-2px);
}

.ka-send:disabled {
    opacity: .4;
    cursor: default;
    box-shadow: none;
}

.ka-note {
    margin: 0;
    padding: 0 16px 10px;
    background: #fff;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    color: var(--ka-muted);
}

/* ---------- Phones: the panel takes the screen ---------- */
@media (max-width: 575.98px) {
    .ka {
        right: 8px;
    }

    .ka-launcher {
        width: 82px;
        height: 106px;
    }

    .ka-bubble {
        right: 82px;
        bottom: 54px;
        max-width: min(240px, calc(100vw - 104px));
    }

    .ka-panel {
        position: fixed;
        inset: 0;
        width: auto;
        height: auto;
        border-radius: 0;
        transform-origin: bottom center;
    }

    .ka.is-open .ka-launcher {
        display: none;
    }

    .ka-form {
        padding-bottom: max(6px, env(safe-area-inset-bottom));
    }

    /* 16px keeps iOS from zooming into the field. */
    .ka-input {
        font-size: 16px;
    }
}

html.ka-locked,
html.ka-locked body {
    overflow: hidden;
}

@media print {
    .ka {
        display: none !important;
    }
}

/* ---------- Motion ---------- */
@keyframes ka-arrive {
    from { opacity: 0; transform: translateY(20px) scale(.7); }
    to { opacity: 1; transform: none; }
}


@keyframes ka-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes ka-shadow {
    0%, 100% { transform: scaleX(1); opacity: 1; }
    50% { transform: scaleX(.88); opacity: .75; }
}

@keyframes ka-handle-bob {
    0%, 100% { transform: translateY(2px); }
    50% { transform: translateY(-2px); }
}

@keyframes ka-glow {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

@keyframes ka-wave {
    0% { transform: rotate(-10deg); }
    16% { transform: rotate(-142deg); }
    30% { transform: rotate(-112deg); }
    44% { transform: rotate(-146deg); }
    58% { transform: rotate(-112deg); }
    72% { transform: rotate(-142deg); }
    100% { transform: rotate(-10deg); }
}

@keyframes ka-head-tilt {
    0%, 100% { transform: rotate(0); }
    20%, 75% { transform: rotate(6deg); }
}

@keyframes ka-hop {
    0%, 100% { transform: none; }
    14% { transform: scale(1.06, .92); }
    34% { transform: translateY(-20px) scale(.97, 1.04); }
    54% { transform: none; }
    64% { transform: scale(1.04, .95); }
    80% { transform: translateY(-8px); }
}

@keyframes ka-hop-shadow {
    0%, 54%, 100% { transform: scale(1); opacity: 1; }
    34% { transform: scale(.6); opacity: .45; }
    80% { transform: scale(.82); opacity: .7; }
}

@keyframes ka-arms-up-left {
    0%, 100% { transform: rotate(10deg); }
    34%, 80% { transform: rotate(55deg); }
}

@keyframes ka-arms-up-right {
    0%, 100% { transform: rotate(-10deg); }
    34%, 80% { transform: rotate(-55deg); }
}

@keyframes ka-look {
    0%, 100% { transform: translate(0, 0); }
    20%, 40% { transform: translate(-5px, 0); }
    60%, 80% { transform: translate(5px, -1px); }
}

@keyframes ka-look-head {
    0%, 100% { transform: rotate(0); }
    20%, 40% { transform: rotate(-7deg); }
    60%, 80% { transform: rotate(7deg); }
}

@keyframes ka-dance {
    0%, 100% { transform: none; }
    12.5% { transform: rotate(-7deg) translateY(-4px); }
    25% { transform: rotate(0) translateY(0); }
    37.5% { transform: rotate(7deg) translateY(-4px); }
    50% { transform: none; }
    62.5% { transform: rotate(-7deg) translateY(-4px); }
    75% { transform: none; }
    87.5% { transform: rotate(7deg) translateY(-4px); }
}

@keyframes ka-dance-left {
    0%, 100% { transform: rotate(10deg); }
    12.5%, 62.5% { transform: rotate(120deg); }
    37.5%, 87.5% { transform: rotate(30deg); }
}

@keyframes ka-dance-right {
    0%, 100% { transform: rotate(-10deg); }
    12.5%, 62.5% { transform: rotate(-30deg); }
    37.5%, 87.5% { transform: rotate(-120deg); }
}

@keyframes ka-nod {
    0%, 100% { transform: none; }
    20%, 60% { transform: translateY(3px) rotate(3deg); }
    40%, 80% { transform: translateY(-1px); }
}

@keyframes ka-tassel-spin {
    0%, 100% { transform: rotate(0); }
    30% { transform: rotate(-38deg); }
    55% { transform: rotate(18deg); }
    75% { transform: rotate(-12deg); }
}

@keyframes ka-spark-burst {
    0%, 100% { transform: scale(.6) rotate(0); opacity: .35; }
    40% { transform: scale(1.8) rotate(90deg); opacity: 1; }
    70% { transform: scale(1.2) rotate(160deg); opacity: .9; }
}

@keyframes ka-blink {
    0%, 90%, 100% { transform: scaleY(1); }
    93% { transform: scaleY(.1); }
    96% { transform: scaleY(1); }
}

@keyframes ka-tassel {
    0%, 100% { transform: rotate(0); }
    50% { transform: rotate(-7deg); }
}

@keyframes ka-twinkle {
    0%, 100% { transform: scale(.6) rotate(0); opacity: .35; }
    50% { transform: scale(1.1) rotate(45deg); opacity: 1; }
}

@keyframes ka-pop {
    from { opacity: 0; transform: translateY(8px) scale(.92); }
    to { opacity: 1; transform: none; }
}

@keyframes ka-open {
    from { opacity: 0; transform: translateY(12px) scale(.96); }
    to { opacity: 1; transform: none; }
}

@keyframes ka-rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes ka-dot {
    0%, 100% { transform: translateY(0); opacity: .45; }
    50% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ka,
    .ka *,
    .ka *::before,
    .ka *::after,
    .ka-launcher {
        animation: none !important;
        transition: none !important;
    }

    .ka-log {
        scroll-behavior: auto;
    }
}