/* Avatar — microescena de Contacto ("al teléfono").
   Quinta aparición del avatar. Ver docs/AVATAR-SOBRE-MI.md → "Contacto".
   Lámina: sprites/fermin-contacto-telefono-v1.webp, 288 x 96 px, 3 celdas de 96 x 96 px
   (docs/_build_avatar_contacto_telefono.py): 0 móvil en la mano | -96px lo levanta | -192px en la oreja.
   Las ondas de llamada son CSS. Secuencia completa: 2560 ms (fermin-avatar-contacto.js). */

.contact-h2.has-fermin-llamada {
  position: relative;
}

/* Lleva el atributo hidden en el HTML (oculta aunque falle este CSS).
   A la derecha de "¿Hablamos?", con los pies sobre la línea base del titular. */
.fermin-llamada {
  display: none;
  position: absolute;
  left: calc(100% - 12px);     /* el personaje empieza en x 42 de la celda: queda a unos 30 px del "?" */
  bottom: 11px;               /* línea base medida: 11 px sobre el borde inferior del titular (68 px, line-height 1) */
  width: 110px;
  height: 89px;
  visibility: hidden;
  pointer-events: none;
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .fermin-llamada {
    display: block;
  }
}

.fermin-llamada.is-on {
  visibility: visible;
}

.fermin-llamada-sprite {
  position: absolute;
  left: 0;
  top: 0;
  width: 96px;
  height: 96px;
  opacity: 0;
  background: url('/avatar/sprites/fermin-contacto-telefono-v1.webp') 0 0 / 288px 96px no-repeat;
  image-rendering: pixelated;
}

/* Ondas de llamada junto al móvil de la mano que cuelga (x 67-69, filas 63-68). */
.fermin-llamada-ondas {
  position: absolute;
  left: 71px;
  top: 58px;
  width: 16px;
  height: 16px;
  opacity: 0;
}

.fermin-llamada-ondas::before,
.fermin-llamada-ondas::after {
  content: "";
  position: absolute;
  top: 50%;
  border: 2px solid transparent;
  border-right-color: var(--live);
  border-radius: 50%;
  transform: translateY(-50%);
}

.fermin-llamada-ondas::before {
  left: -4px;
  width: 8px;
  height: 8px;
}

.fermin-llamada-ondas::after {
  left: -4px;
  width: 16px;
  height: 16px;
}

.fermin-llamada.is-on .fermin-llamada-sprite {
  animation:
    fermin-llamada-fade 2560ms linear 1 both,
    fermin-llamada-frames 2560ms steps(1, end) 1 both;
}

.fermin-llamada.is-on .fermin-llamada-ondas {
  animation: fermin-llamada-ondas 2560ms steps(1, end) 1 both;
}

/* Tiempos (ms): 0-160 aparece · 200-780 suena (tres toques) · 820 levanta el móvil ·
   920 al oído · en llamada hasta 2240 · 2240 lo baja · 2340 reposo · 2400-2560 desaparece. */
@keyframes fermin-llamada-fade {
  0%     { opacity: 0; }
  6.25%  { opacity: 1; }
  93.75% { opacity: 1; }
  100%   { opacity: 0; }
}

@keyframes fermin-llamada-frames {
  0%     { background-position: 0 0; }
  32.03% { background-position: -96px 0; }
  35.94% { background-position: -192px 0; }
  87.5%  { background-position: -96px 0; }
  91.41% { background-position: 0 0; }
  100%   { background-position: 0 0; }
}

@keyframes fermin-llamada-ondas {
  0%     { opacity: 0; }
  7.81%  { opacity: 1; }
  13.28% { opacity: 0; }
  16.41% { opacity: 1; }
  21.88% { opacity: 0; }
  25%    { opacity: 1; }
  30.47% { opacity: 0; }
  100%   { opacity: 0; }
}