/* =========================================================
   CHIBI AVATAR — styles  (pairs with assets/js/avatar.js)
   Size the character with --chibi-h on the .chibi element.
   ========================================================= */
.chibi {
  --chibi-h: 420px;
  position: relative;
  width: calc(var(--chibi-h) * 0.72);
  height: var(--chibi-h);
  margin-inline: auto;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.chibi:focus-visible { box-shadow: var(--focus); }

.chibi__body {
  --lean: 0deg;
  position: absolute; inset: 0;
  transform-origin: 50% 100%;
  transform: rotate(var(--lean));
  animation: chibi-breathe 3.2s var(--ease-in-out) infinite;
}
.chibi__img {
  position: absolute; bottom: 0;
  height: calc(var(--chibi-h) * var(--ph, 1));
  width: auto;
  left: calc(50% - var(--chibi-h) * var(--pw, .4) * var(--pcx, .5));
  max-width: none;
  opacity: 0;
  transition: opacity 140ms linear;
  pointer-events: none;
}
.chibi__img.is-on { opacity: 1; }

/* Little squash-and-stretch whenever the pose changes */
.chibi__body.is-pop .chibi__img.is-on { animation: chibi-pop 420ms var(--ease-spring); transform-origin: 50% 100%; }

.chibi__ground {
  position: absolute; left: 50%; bottom: -6px;
  width: 58%; height: 14px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(17,17,17,.16), transparent);
}

.chibi:hover .chibi__body { animation-duration: 1.6s; }

/* ---------- Speech bubble ---------- */
.chibi__bubble {
  position: absolute; left: 50%; bottom: calc(100% + 6px);
  width: max-content; max-width: min(19rem, 80vw);
  padding: .7rem .95rem;
  background: var(--text); color: var(--bg);
  font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.45; font-weight: 500;
  transform: translate(-50%, 8px) scale(.96);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
  z-index: 2;
}
.chibi__bubble::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 8px solid transparent; border-top-color: var(--text); border-bottom: 0;
}
.chibi__bubble.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.chibi__text:empty::before { content: "\200b"; }

/* ---------- Dock (face badge when he's scrolled away) ---------- */
.chibi-dock {
  position: fixed; right: clamp(12px, 3vw, 28px); bottom: clamp(12px, 3vw, 28px);
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--surface-raised); border: 1px solid var(--rule-strong);
  padding: 0; z-index: 60;
  transform: translateY(140%) scale(.6); opacity: 0;
  transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur) var(--ease-out);
}
.chibi-dock.is-on { transform: none; opacity: 1; }
.chibi-dock__face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.chibi-dock img {
  position: absolute; left: 50%; top: 6px; width: 104%; max-width: none; height: auto;
  transform: translateX(-50%);
  transition: transform var(--dur) var(--ease-spring);
}
.chibi-dock:hover img { transform: translateX(-50%) translateY(-2px) rotate(-4deg); }
.chibi-dock__bubble {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  width: max-content; max-width: min(17rem, 70vw); text-align: left;
  padding: .6rem .85rem; background: var(--text); color: var(--bg);
  font-size: var(--fs-sm); line-height: 1.4; font-weight: 500;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.chibi-dock__bubble::after {
  content: ""; position: absolute; right: 28px; top: 100%;
  border: 7px solid transparent; border-top-color: var(--text); border-bottom: 0;
}
.chibi-dock__bubble.is-on-dock { opacity: 1; transform: none; }

/* ---------- Motion ---------- */
@keyframes chibi-breathe { 0%,100% { scale: 1 1; } 50% { scale: 1.006 1.014; } }
@keyframes chibi-pop {
  0% { transform: scale(.94, 1.04); }
  45% { transform: scale(1.03, .97); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chibi__body, .chibi__body.is-pop .chibi__img.is-on { animation: none; }
  .chibi__body { transform: none; }
}