#chara {
    position: fixed;
    width: var(--mascot-rendered-width, var(--mascot-width));
    z-index: 30;
}

#chara[data-position="bottom-right"],
#chara[data-position="top-right"] {
    right: var(--mascot-horizontal-gap);
}

#chara[data-position="bottom-left"],
#chara[data-position="top-left"] {
    left: var(--mascot-horizontal-gap);
}

#chara[data-position="top-right"],
#chara[data-position="top-left"] {
    top: var(--mascot-top-gap);
}

#chara[data-position="bottom-right"],
#chara[data-position="bottom-left"] {
    bottom: var(--mascot-bottom-gap);
}

#chara[data-position="center"] {
    left: var(--mascot-x);
    top: var(--mascot-y);
}

#chara[data-position="center"] > .anchor {
    transform: translate(-50%, -50%);
}

#chara,
#chara * {
    pointer-events: none;
}

#chara .sway,
#chara .breath,
#chara .react {
    transform-origin: center bottom;
}

#chara .facing {
    transform: scaleX(var(--mascot-facing));
}

#chara-img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
}

#chara[hidden] {
    display: none;
}

#chara[data-ready="false"] {
    visibility: hidden;
}

#chara[hidden] * {
    animation: none !important;
}

#chara .sway {
    animation: mascot-sway var(--mascot-sway-duration) ease-in-out infinite;
}

#chara .breath {
    animation: mascot-breath var(--mascot-breath-duration) ease-in-out infinite;
}

#chara .react {
    position: relative;
    animation-duration: var(--mascot-reaction-duration);
    animation-timing-function: ease-in-out;
}

#chara[data-state="jump"] .react {
    animation-name: mascot-jump;
}

#chara[data-state="surprise"] .react {
    animation-name: mascot-surprise;
}

#chara[data-state="wake"] .react {
    animation-name: mascot-wake;
}

#chara[data-state="doze"] .react {
    animation: mascot-doze var(--mascot-doze-duration) ease-in-out infinite;
}

#chara .mascot-sleep {
    position: absolute;
    top: 0;
    right: calc(100% * var(--mascot-sleep-right));
    color: #fff;
    font: bold clamp(16px, 2vw, 36px) sans-serif;
    text-shadow: 0 1px 4px #222;
    opacity: 0;
}

#chara[data-state="doze"] .mascot-sleep {
    animation: mascot-sleep var(--mascot-sleep-duration) ease-in-out infinite;
}

@keyframes mascot-sway {
    0%, 100% { transform: rotate(calc(-1 * var(--mascot-sway-angle))); }
    50% { transform: rotate(var(--mascot-sway-angle)); }
}

@keyframes mascot-breath {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(var(--mascot-breath-scale)); }
}

@keyframes mascot-jump {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(calc(-100% * var(--mascot-jump-height))); }
}

@keyframes mascot-surprise {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(var(--mascot-surprise-scale)); }
}

@keyframes mascot-wake {
    0%, 100% { transform: translateY(0) rotate(0); }
    30% { transform: translateY(calc(-100% * var(--mascot-wake-height))) rotate(calc(-1 * var(--mascot-facing) * var(--mascot-wake-angle))); }
}

@keyframes mascot-doze {
    0%, 100% { transform: rotate(calc(var(--mascot-facing) * var(--mascot-doze-min-angle))); }
    50% { transform: rotate(calc(var(--mascot-facing) * var(--mascot-doze-max-angle))); }
}

@keyframes mascot-sleep {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    60% { opacity: 1; transform: translateY(calc(-100% * var(--mascot-sleep-rise))); }
}