/* ==========================================================================
   AVATAR

   Duas camadas empilhadas no mesmo círculo: o rosto desenhado embaixo, o
   retrato ilustrado por cima. O de baixo aparece na hora; o de cima entra
   quando termina de carregar, e some de cena se nunca carregar.

   O retrato começa transparente por um motivo prático: até a imagem chegar,
   o navegador ocuparia o círculo com o quadro vazio dela, escondendo o
   desenho justamente durante a espera que o desenho existe para cobrir.
   ========================================================================== */

.avatar-pilha {
  position: relative;
  display: block;
  width: var(--avatar-px, 40px);
  height: var(--avatar-px, 40px);
  border-radius: 50%;
  overflow: hidden;
  /* Dentro de linha de comentário, o avatar não encolhe. */
  flex: none;
}

.avatar-pilha > .avatar-svg,
.avatar-pilha > .avatar-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.avatar-pilha > .avatar-foto {
  object-fit: cover;
  /* O retrato é 4:5 com a cabeça no alto. Recortar pelo centro cortaria a
     testa e deixaria ombro sobrando. */
  object-position: 50% 20%;
  opacity: 0;
  transition: opacity 160ms ease-out;
}

.avatar-com-foto > .avatar-foto { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .avatar-pilha > .avatar-foto { transition: none; }
}