/* Purrminal page buddy (js/buddy.js): today's pet walking along the bottom of the window. */
.buddy{--bw:112px;position:fixed;left:0;right:0;bottom:calc(6px + env(safe-area-inset-bottom));height:0;z-index:40;pointer-events:none;
  transition:opacity .25s ease}
.buddy[hidden]{display:none}
.buddy.away{opacity:0}
.buddy.away *{pointer-events:none!important}
.bd-walker{position:absolute;left:0;bottom:0;width:var(--bw);aspect-ratio:4/3;will-change:transform}
.bd-walker.glide{transition:transform 1.2s linear}
.bd-pet{position:absolute;inset:0;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.bd-pet:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:16px}
.bd-art{position:absolute;inset:0;display:block;filter:drop-shadow(0 4px 6px rgba(42,33,64,.18))}
.bd-art.left{transform:scaleX(-1)}
.bd-art img{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.bd-art img.on{opacity:1}

.bd-x{position:absolute;top:-6px;right:-6px;width:24px;height:24px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;
  background:var(--panel);color:var(--muted);box-shadow:0 1px 4px rgba(0,0,0,.18),inset 0 0 0 1px var(--line);cursor:pointer;pointer-events:auto;
  opacity:0;transform:scale(.7);transition:opacity .15s ease,transform .15s ease}
.bd-x::before{content:"";position:absolute;inset:-10px}
.bd-x svg{width:12px;height:12px}
.bd-walker:hover .bd-x,.bd-walker:focus-within .bd-x{opacity:1;transform:none}
.bd-x:hover{color:var(--ink)}
@media (hover:none){.bd-x{opacity:1;transform:none}}

.bd-bub{position:absolute;left:0;bottom:calc(var(--bw) * .75 + 12px);--tail:50%;max-width:min(260px,calc(100vw - 16px));width:max-content;
  padding:8px 14px;border-radius:16px;background:rgba(255,255,255,.97);color:#3a2f55;box-shadow:0 2px 12px rgba(0,0,0,.22);
  font:600 .86rem/1.3 var(--font);text-align:center;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s}
.bd-bub::after{content:"";position:absolute;left:var(--tail);bottom:-5px;width:10px;height:10px;margin-left:-5px;transform:rotate(45deg);
  background:inherit;border-radius:0 0 3px 0}
.bd-bub.on{opacity:1;visibility:visible;transition:opacity .2s ease;animation:bd-pop .25s cubic-bezier(.34,1.56,.64,1)}
@keyframes bd-pop{from{margin-bottom:-6px}}

.bd-fx{position:absolute;inset:0;pointer-events:none}
.bd-heart{position:absolute;top:10%;width:20%;animation:bd-rise 1.3s ease-out forwards}
.bd-heart svg{display:block;width:100%;height:auto}
@keyframes bd-rise{0%{opacity:0;transform:translate(-50%,0) scale(.5)}20%{opacity:1;transform:translate(-50%,-30%) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-260%) scale(.9)}}

.bd-back{position:fixed;left:calc(10px + env(safe-area-inset-left));bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;width:44px;height:44px;
  display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--panel);color:var(--blush-ink);cursor:pointer;
  box-shadow:0 2px 10px rgba(42,33,64,.18),inset 0 0 0 1.5px var(--line);opacity:.75;transition:opacity .15s ease,transform .15s ease}
.bd-back:hover,.bd-back:focus-visible{opacity:1;transform:translateY(-2px)}
.bd-back[hidden]{display:none}
.bd-back svg{width:20px;height:20px}

@media (max-width:560px){.buddy{--bw:86px}}
@media (prefers-reduced-motion:reduce){.bd-walker.glide,.bd-x,.bd-bub,.bd-back{transition:none}.bd-bub.on{animation:none}}
@media print{.buddy,.bd-back{display:none!important}}