/* The circle stays still; the character's hand and face change within it. */
.po-mascot { pointer-events: auto; }
.po-mascot-trigger {
    position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%;
    margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent;
    color: inherit; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
.po-mascot .po-mascot-trigger:focus-visible { outline: 3px solid #292929; outline-offset: -4px; }
.po-mascot-sprite {
    position: absolute; z-index: 2; border-radius: 50%; overflow: hidden;
    background-size: 300% 100%; background-position: 0% 50%; background-repeat: no-repeat;
    opacity: 0; pointer-events: none; display: none;
}
.po-mascot.is-mascot-active.is-sprite-ready .po-mascot-sprite {
    display: block; opacity: 1; animation: po-character-wave 880ms step-end infinite;
}
.po-mascot.is-mascot-active.is-sprite-ready .po-mascot-original { opacity: 0; }
/* Only aligned tile positions are used; no interpolated mixed-frame strips. */
@keyframes po-character-wave {
    0%, 100% { background-position: 0% 50%; }
    25%, 75% { background-position: 50% 50%; }
    50% { background-position: 100% 50%; }
}
.po-mascot-greeting {
    position: fixed; z-index: 1001; max-width: calc(100vw - 16px); padding: 7px 14px 8px;
    border: 1px solid rgba(41,41,41,.08); border-radius: 15px; background: #fff; color: #292929;
    box-shadow: 0 3px 12px rgba(0,0,0,.15); font: 400 20px/1.2 'patrick hand',cursive;
    white-space: nowrap; pointer-events: none;
}
.po-mascot-greeting[hidden] { display: none; }
.po-mascot-greeting::after {
    content: ''; position: absolute; bottom: -5px; left: calc(var(--po-greeting-arrow-x,50%) - 5px);
    width: 9px; height: 9px; background: #fff; transform: rotate(45deg);
}
.po-mascot-greeting.is-below::after { top: -5px; bottom: auto; }
@media (prefers-reduced-motion: reduce) {
    .po-mascot.is-mascot-active.is-sprite-ready .po-mascot-sprite { display: none; animation: none; }
    .po-mascot.is-mascot-active.is-sprite-ready .po-mascot-original { opacity: 1; }
}