/* Shared character motion. Layout/size is set by each page. */
[data-avatar] svg { display: block; width: 100%; height: 100%; }

.a-body { animation: breathe 5.5s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }

.a-headScale { transform: translateY(26px) scale(.9); transform-origin: 160px 262px; }
.a-head { animation: tilt 7s ease-in-out infinite; transform-origin: 160px 260px; }
@keyframes tilt { 0%,100% { transform: rotate(-1.2deg) } 50% { transform: rotate(1.2deg) } }

.a-eye { animation: blink 5.4s infinite; transform-origin: center; transform-box: fill-box; }
.a-eye--right { animation-delay: .04s; }
@keyframes blink { 0%,93%,100% { transform: scaleY(1) } 96% { transform: scaleY(.06) } }

.is-speaking .a-mouth { animation: speak .28s ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box; }
@keyframes speak { from { transform: scaleY(.45) } to { transform: scaleY(1.6) } }

.a-shadow { animation: shrink 5.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; opacity: .16; }
@keyframes shrink { 0%,100% { transform: scaleX(1); opacity: .16 } 50% { transform: scaleX(.9); opacity: .1 } }

.a-pupil { transition: transform .18s cubic-bezier(.16,.84,.24,1); }

/* thinking dots + typing caret, shared by every variant */
.dots { display: inline-flex; gap: 4px; padding-block: 3px; }
.dots i {
  width: 6px; height: 6px; border-radius: 999px;
  background: currentColor; opacity: .35;
  animation: dotPulse 1.1s ease-in-out infinite;
}
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dotPulse { 0%,100% { opacity: .3; transform: translateY(0) } 50% { opacity: 1; transform: translateY(-3px) } }

.caret {
  display: inline-block; width: 2px; height: 1em;
  background: currentColor; vertical-align: -2px; margin-left: 1px;
  animation: caretBlink .9s steps(1) infinite;
}
@keyframes caretBlink { 0%,50% { opacity: 1 } 50.01%,100% { opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  .a-body, .a-head, .a-eye, .a-shadow, .is-speaking .a-mouth,
  .dots i, .caret { animation: none !important; }
  .a-pupil { transition: none; }
}