.avatar {
  width: 32px;
  height: 32px;
}

.astro {
  opacity: 0;
  margin: 16px;
  border-radius: 50%;
  position: absolute;
  z-index: 3;
  transition: opacity 80ms linear;
  transform: translate3d(0, 0, 0);

  clip-path: inset(23px 23px 23px 23px); /* cut off the edges to stop hijacking mouse events. maybe we need to reduce canvas size itself instead of this. */

  @starting-style {
    opacity: 0;
  }
}

.leadDot {
  opacity: 0;
  margin: 16px;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  transition: opacity 150ms ease-in-out;

  @starting-style {
    opacity: 0;
  }
}

.trailDot {
  opacity: 0;
  margin: 16px;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  transition: opacity 150ms ease-in-out;

  @starting-style {
    opacity: 0;
  }
}