/* Griffin, the desktop pal (js/buddy.js). Sits above windows, below the taskbar. */
.buddy {
    position: absolute; left: 0; top: 0; z-index: 4000;
    width: 76px; height: 128px;
}
.buddy .buddy-figure,
.buddy .buddy-figure:not(:disabled):active {
    display: block; width: 100%; height: 100%;
    margin: 0; padding: 0; min-width: 0; min-height: 0;
    border: 0; background: none; box-shadow: none;
    cursor: grab; touch-action: none;
    user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.buddy.is-held .buddy-figure { cursor: grabbing; }
.buddy .buddy-figure:focus { outline: none; }
.buddy .buddy-figure:focus-visible { outline: 1px dotted #000; outline-offset: -2px; }

.buddy-sprite { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.buddy.is-left .buddy-sprite { transform: scaleX(-1); }
.buddy-sprite * { transform-box: view-box; }

/* Moving parts (origins are in the sprite's 100x168 viewBox units). */
.bd-shadow { fill: rgba(0, 0, 0, .28); transition: opacity .3s; }
.bd-fade { transition: opacity .8s ease; }
.bd-all { transform-origin: 50px 160px; }
.bd-head { transform-origin: 50px 44px; animation: bd-float 3.4s ease-in-out infinite; }
.bd-tail { transform-origin: 61px 39px; animation: bd-flutter 2.6s ease-in-out infinite; }
.bd-glint { animation: bd-glint 7s steps(1, end) infinite; }
.bd-goggles { transition: transform .35s ease; }
.bd-mouth { transform-origin: 50px 34px; }
.bd-arm-l { transform-origin: 38px 54px; transition: transform .35s ease; }
.bd-arm-r { transform-origin: 62px 54px; transition: transform .35s ease; }
.bd-leg-l { transform-origin: 45px 110px; }
.bd-leg-r { transform-origin: 55px 110px; }
.bd-torso { transform-origin: 50px 85px; }
.bd-food { opacity: 0; }
.bd-morsel { opacity: 0; }
.bd-morsel.is-dropping { animation: bd-drop 7s ease-in forwards; }

/* States */
.buddy.is-vanished .bd-fade { opacity: 0; }

.buddy.is-walking .bd-all { animation: bd-bob .28s ease-in-out infinite alternate; }
.buddy.is-walking .bd-leg-l { animation: bd-step .56s ease-in-out infinite; }
.buddy.is-walking .bd-leg-r { animation: bd-step .56s ease-in-out -.28s infinite; }
.buddy.is-walking .bd-arm-l { animation: bd-swing .56s ease-in-out -.28s infinite; }
.buddy.is-walking .bd-arm-r { animation: bd-swing .56s ease-in-out infinite; }

.buddy.is-held .bd-all { transform: rotate(-7deg) translateY(-4px); transform-origin: 50px 20px; }
.buddy.is-held .bd-shadow { opacity: 0; }
.buddy.is-held .bd-leg-l { animation: bd-kick .4s ease-in-out infinite alternate; }
.buddy.is-held .bd-leg-r { animation: bd-kick .4s ease-in-out -.2s infinite alternate; }
.buddy.is-held .bd-arm-l { transform: rotate(55deg); }
.buddy.is-held .bd-arm-r { transform: rotate(-55deg); }
.buddy.is-landing .bd-all { animation: bd-land .35s ease-out; }

.buddy.is-talking .bd-mouth,
.buddy.is-chomping .bd-mouth { animation: bd-talk .17s ease-in-out infinite alternate; }
.buddy.is-eating .bd-arm-r { transform: rotate(152deg) scale(.4); }
.buddy.is-eating .bd-food { opacity: 1; }
.buddy.is-eating .bd-food.is-gone { opacity: 0; }
.buddy.is-waving .bd-arm-r { animation: bd-wave .35s ease-in-out infinite alternate; }
.buddy.is-peek .bd-goggles { transform: translateY(-12px); }
.buddy.is-spin .buddy-sprite { animation: bd-spin .9s ease-in-out; }
.buddy.is-sneeze .bd-head { animation: bd-sneeze .7s ease-out; }
.buddy.is-grumpy .bd-head { animation: bd-shake .3s ease-in-out 3; }
.buddy.is-happy .bd-all { animation: bd-hop .45s ease-out 2; }
.buddy.is-rumble .bd-torso { animation: bd-rumble .1s linear 8; }

@keyframes bd-float { 50% { transform: translateY(-1.6px); } }
@keyframes bd-flutter { 50% { transform: rotate(12deg); } }
@keyframes bd-glint { 0% { opacity: .85; } 94% { opacity: 0; } 97% { opacity: .85; } }
@keyframes bd-bob { to { transform: translateY(-1.5px); } }
@keyframes bd-step { 0%, 100% { transform: rotate(15deg); } 50% { transform: rotate(-15deg); } }
@keyframes bd-swing { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes bd-kick { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } }
@keyframes bd-land { from { transform: scale(1.06, .9); } to { transform: none; } }
@keyframes bd-talk { to { transform: scaleY(3.6); } }
@keyframes bd-wave { from { transform: rotate(-138deg); } to { transform: rotate(-168deg); } }
@keyframes bd-spin { to { transform: rotateY(360deg); } }
@keyframes bd-sneeze {
    35% { transform: translateY(-3px) rotate(-9deg); }
    55% { transform: translateY(3px) rotate(8deg); }
}
@keyframes bd-shake { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes bd-hop { 40% { transform: translateY(-9px); } 70% { transform: scale(1.04, .95); } }
@keyframes bd-rumble { 25% { transform: translateX(-1px); } 75% { transform: translateX(1px); } }
@keyframes bd-drop {
    0% { opacity: 1; transform: translateY(0); }
    25% { opacity: 1; transform: translateY(19px); }
    75% { opacity: .9; transform: translateY(21px); }
    100% { opacity: 0; transform: translateY(22px); }
}

/* Speech balloon, Win95 tooltip yellow */
.buddy-balloon {
    position: absolute; z-index: 1; width: 196px;
    padding: 8px 10px 9px;
    background: #ffffe1; color: #000;
    border: 1px solid #000; border-radius: 9px;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
    font-family: var(--font); font-size: 11px; line-height: 1.35;
    cursor: default;
}
.buddy-balloon::before,
.buddy-balloon::after {
    content: ""; position: absolute; width: 0; height: 0; border-style: solid;
}
.buddy-balloon::before {
    left: calc(var(--tail, 50%) - 8px); top: 100%;
    border-width: 9px 8px 0; border-color: #000 transparent transparent;
}
.buddy-balloon::after {
    left: calc(var(--tail, 50%) - 7px); top: 100%;
    border-width: 7px 7px 0; border-color: #ffffe1 transparent transparent;
}
.buddy-balloon.is-below::before {
    top: auto; bottom: 100%;
    border-width: 0 8px 9px; border-color: transparent transparent #000;
}
.buddy-balloon.is-below::after {
    top: auto; bottom: 100%;
    border-width: 0 7px 7px; border-color: transparent transparent #ffffe1;
}
.buddy-say { margin: 0; }
.buddy-tummy { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.buddy-meter { flex: 1; height: 11px; padding: 2px; background: #fff; box-shadow: var(--bevel-in); }
.buddy-meter span { display: block; width: 0; height: 100%; background: var(--navy); transition: width .4s; }
.buddy-meter.is-low span { background: #c00000; }
.buddy-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.buddy-actions button { flex: 1 0 auto; min-width: 0; min-height: 21px; padding: 0 7px; }

.buddy-heart {
    position: absolute; top: 2px; z-index: 2;
    color: var(--accent); font-size: 15px; line-height: 1;
    text-shadow: 1px 1px 0 #b8467c; pointer-events: none;
    animation: bd-heart 1.5s ease-out forwards;
}
@keyframes bd-heart {
    from { transform: translateY(0) scale(.6); opacity: 1; }
    to { transform: translateY(-36px) scale(1.2); opacity: 0; }
}

/* Tray icon next to the clock: summons him or sends him away. */
.tray .buddy-tray,
.tray .buddy-tray:not(:disabled):active {
    display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; min-width: 0; min-height: 0;
    margin: 0 8px 0 -4px; padding: 0;
    border: 0; background: none; box-shadow: none;
}
.tray .buddy-tray:focus { outline: none; }
.tray .buddy-tray:focus-visible { outline: 1px dotted #000; }
.buddy-tray[aria-pressed="false"] img { opacity: .5; }

@media (max-width: 640px), (max-height: 480px) {
    .buddy { width: 60px; height: 101px; }
    .buddy-balloon { width: 176px; }
}

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