/* Reachy, the guide avatar (markup from assets/js/avatar.js). Motion is decorative and switches off
   under prefers-reduced-motion. */
.avatar { display: block; width: 100%; height: auto; overflow: visible }
.avatar__body { transform-origin: 60px 100px; animation: avatar-float 4s var(--ease) infinite }
.avatar__eyes { transform-origin: 60px 56px; animation: avatar-blink 5s infinite }
.avatar__hand { transform-origin: 96px 96px }
.avatar--wave .avatar__hand { animation: avatar-wave 2.4s ease-in-out infinite }
.avatar--cheer .avatar__hand { animation: avatar-cheer 1.6s ease-in-out infinite }
.avatar__wave-ring { stroke-dasharray: 130; animation: avatar-ring 3s ease-in-out infinite }

@keyframes avatar-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
@keyframes avatar-blink { 0%, 92%, 100% { transform: scaleY(1) } 95% { transform: scaleY(.1) } }
@keyframes avatar-wave { 0%, 60%, 100% { transform: rotate(0) } 15%, 45% { transform: rotate(-22deg) } 30% { transform: rotate(10deg) } }
@keyframes avatar-cheer { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes avatar-ring { 0%, 100% { stroke-dashoffset: 0; opacity: 1 } 50% { stroke-dashoffset: 40; opacity: .5 } }

@media (prefers-reduced-motion: reduce) {
  .avatar__body, .avatar__eyes, .avatar__hand, .avatar__wave-ring { animation: none !important }
}