@charset "UTF-8";

/* A button-edge character, not a floating sticker. Its own clip follows the lip. */
.contact-panda {
    --contact-panda-duration: 6.8s;
    --contact-panda-ink: #304b3b;
    --contact-panda-paper: #fffdf6;
    position: absolute;
    right: 18px;
    bottom: calc(100% - 8px);
    display: block;
    width: 126px;
    height: 102px;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.contact-panda__ink { fill: var(--contact-panda-ink); }
.contact-panda__paper { fill: var(--contact-panda-paper); }
.contact-panda__face {
    fill: var(--contact-panda-paper);
    stroke: #abb9a7;
    stroke-width: 1.1;
}
.contact-panda__muzzle { fill: #f8f5e9; }
.contact-panda__pad { fill: #b5c5a5; }
.contact-panda__cheek { fill: #dec2aa; opacity: .5; }
.contact-panda__smile {
    fill: none;
    stroke: var(--contact-panda-ink);
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.contact-panda__grip-line {
    fill: none;
    stroke: #788c73;
    stroke-width: 1.2;
    stroke-linecap: round;
}
.contact-panda__rise { transform: translateY(110px); }
.contact-panda__grip { transform: translateY(20px); opacity: 0; }
.contact-panda__wave {
    transform-box: view-box;
    transform-origin: 91px 94px;
    transform: rotate(17deg);
}
.contact-panda__eyes { transform-box: view-box; transform-origin: 68px 57px; }
.contact-panda.is-playing .contact-panda__rise {
    animation: contact-panda-rise var(--contact-panda-duration) cubic-bezier(.34, 0, .24, 1) both;
}
.contact-panda.is-playing .contact-panda__grip {
    animation: contact-panda-grip var(--contact-panda-duration) cubic-bezier(.34, 0, .24, 1) both;
}
.contact-panda.is-playing .contact-panda__wave {
    animation: contact-panda-wave var(--contact-panda-duration) ease-in-out both;
}
.contact-panda.is-playing .contact-panda__eyes {
    animation: contact-panda-blink var(--contact-panda-duration) linear both;
}
@keyframes contact-panda-rise {
    0%, 8% { transform: translateY(110px); }
    20%, 25% { transform: translateY(62px); }
    38% { transform: translateY(0); }
    42%, 72% { transform: translateY(1px); }
    91%, 100% { transform: translateY(110px); }
}
@keyframes contact-panda-grip {
    0% { transform: translateY(20px); opacity: 0; }
    3% { opacity: 1; }
    12%, 82% { transform: translateY(0); opacity: 1; }
    94%, 100% { transform: translateY(20px); opacity: 0; }
}
@keyframes contact-panda-wave {
    0%, 36% { transform: rotate(17deg); }
    43% { transform: rotate(-8deg); }
    49% { transform: rotate(11deg); }
    55% { transform: rotate(-8deg); }
    61% { transform: rotate(11deg); }
    68%, 100% { transform: rotate(17deg); }
}
@keyframes contact-panda-blink {
    0%, 39%, 42%, 65%, 68%, 100% { transform: scaleY(1); }
    40%, 41%, 66%, 67% { transform: scaleY(.12); }
}
.contact-panda.is-static .contact-panda__rise { animation: none; transform: translateY(73px); }
.contact-panda.is-static .contact-panda__grip { animation: none; transform: translateY(0); opacity: 1; }
.contact-panda.is-static .contact-panda__wave,
.contact-panda.is-static .contact-panda__eyes { animation: none; }
.contact-panda.is-resting .contact-panda__rise { animation: none; transform: translateY(110px); }
.contact-panda.is-resting .contact-panda__grip { animation: none; opacity: 0; transform: translateY(20px); }
@media (max-width: 767px) {
    .contact-panda {
        right: 14px;
        bottom: calc(100% - 6px);
        width: 104px;
        height: 84px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .contact-panda .contact-panda__rise,
    .contact-panda.is-playing .contact-panda__rise { animation: none; transform: translateY(73px); }
    .contact-panda .contact-panda__grip,
    .contact-panda.is-playing .contact-panda__grip { animation: none; transform: translateY(0); opacity: 1; }
    .contact-panda .contact-panda__wave,
    .contact-panda .contact-panda__eyes,
    .contact-panda.is-playing .contact-panda__wave,
    .contact-panda.is-playing .contact-panda__eyes { animation: none; }
}