.avatar {
  width: 52px;
  height: 64px;
  flex: none;
}

.avatar.sm { width: 44px; height: 54px; }
.avatar.lg { width: 68px; height: 82px; }
.avatar.xl { width: 112px; height: 134px; }

.avatar-svg { width: 100%; height: 100%; display: block; overflow: visible; }

.avatar-svg .sway {
  transform-box: view-box;
  transform-origin: 40px 92px;
  animation: sway 7.4s ease-in-out var(--phase) infinite;
}

.avatar-svg .breathe {
  transform-box: view-box;
  transform-origin: 40px 72px;
  animation: breathe var(--breath) ease-in-out var(--phase) infinite;
}

.avatar-svg .blink {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink var(--blink) linear var(--phase) infinite;
}

@keyframes sway {
  0%, 100% { transform: rotate(-0.4deg); }
  50% { transform: rotate(0.4deg); }
}

@keyframes breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.012, 0.994); }
}

@keyframes blink {
  0%, 46%, 52%, 100% { transform: scaleY(1); }
  49% { transform: scaleY(0.12); }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-svg .sway,
  .avatar-svg .breathe,
  .avatar-svg .blink { animation: none; }
}