/* Avatar de "Sobre mí": una sola aparición decorativa (sólo escritorio).
   Estado: candidata a producción (2026-09-23). Ver docs/AVATAR-SOBRE-MI.md.
   Lámina: fermin-wave-v3.webp, 384 x 96 px, cuatro celdas de 96 x 96 px
   generadas por docs/_build_avatar_arm_variants.py (variante C):
   0 reposo | -96px codo flexionado | -192px brazo en alto | -288px vaivén 3 px. */
#sobre-mi {
  position: relative;
}

#sobre-mi .fermin-avatar {
  position: absolute;
  top: 210px;
  left: calc(16.6667% - 83px);
  display: block;
  width: 96px;
  height: 96px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: url('/avatar/sprites/fermin-wave-v3.webp') 0 0 / 384px 96px no-repeat;
  image-rendering: pixelated;
}

#sobre-mi .fermin-avatar.is-visible {
  visibility: visible;
  opacity: 1;
}

#sobre-mi .fermin-avatar.is-waving {
  animation:
    fermin-avatar-enter 520ms cubic-bezier(0.2, 0.7, 0.25, 1) 1 both,
    fermin-avatar-greeting 1180ms steps(1, end) 520ms 1 both;
}

@keyframes fermin-avatar-enter {
  from { opacity: 0; transform: translateX(-36px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fermin-avatar-greeting {
  /* 120 reposo · 90 abre · 170 alto · 170 vaivén · 170 alto · 170 vaivén
     · 200 alto · 90 baja → reposo (ms) */
  0%     { background-position: 0 0; }
  10.17% { background-position: -96px 0; }
  17.8%  { background-position: -192px 0; }
  32.2%  { background-position: -288px 0; }
  46.61% { background-position: -192px 0; }
  61.02% { background-position: -288px 0; }
  75.42% { background-position: -192px 0; }
  92.37% { background-position: -96px 0; }
  100%   { background-position: 0 0; }
}

@media (max-width: 1100px), (prefers-reduced-motion: reduce) {
  #sobre-mi .fermin-avatar {
    display: none;
    animation: none;
  }
}