/* Idle life for custom avatars (`Custom.tsx`): blink, glance, mouth, head turn.
   Different cycle lengths so the loop rarely repeats; `--av-d` offsets each avatar. */
.av-live {
  --d: calc(var(--av-d, 0) * -1s);
}

.av-head,
.av-face {
  transform-box: view-box;
  transform-origin: 50px 66px;
  animation: av-head 13s ease-in-out var(--d) infinite;
}
/* the features turn a little further than the skull, so it reads as depth */
.av-face {
  animation-name: av-face;
}

.av-eye {
  transform-box: view-box;
  transform-origin: 50px 40.5px;
  animation: av-blink 4.3s ease-in-out var(--d) infinite;
}

.av-iris {
  animation: av-gaze 9s ease-in-out var(--d) infinite;
}


@keyframes av-head {
  0%,
  12% {
    transform: translateX(0) rotate(0);
  }
  22%,
  38% {
    transform: translateX(-1.2px) rotate(-2deg);
  }
  50%,
  56% {
    transform: translateX(0) rotate(0);
  }
  66%,
  82% {
    transform: translateX(1.2px) rotate(2deg);
  }
  94%,
  100% {
    transform: translateX(0) rotate(0);
  }
}
@keyframes av-face {
  0%,
  12% {
    transform: translateX(0);
  }
  22%,
  38% {
    transform: translateX(-1.6px);
  }
  50%,
  56% {
    transform: translateX(0);
  }
  66%,
  82% {
    transform: translateX(1.6px);
  }
  94%,
  100% {
    transform: translateX(0);
  }
}

@keyframes av-blink {
  0%,
  90%,
  100% {
    transform: scaleY(1);
  }
  94% {
    transform: scaleY(0.08);
  }
}

/* quick glances (short gaps), slow drifts (long gaps); `--gx`/`--gy` keep a tilted eye's glance the way of the other eye (`gaze`) */
@keyframes av-gaze {
  0%,
  10% {
    transform: translateX(0);
  }
  13%,
  38% {
    transform: translate(calc(-0.9px * var(--gx, 1)), calc(-0.9px * var(--gy, 0)));
  }
  58%,
  72% {
    transform: translate(calc(0.9px * var(--gx, 1)), calc(0.9px * var(--gy, 0)));
  }
  75%,
  90% {
    transform: translateX(0);
  }
  92%,
  100% {
    transform: translate(calc(-0.6px * var(--gx, 1)), calc(-0.6px * var(--gy, 0)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .av-head,
  .av-face,
  .av-eye,
  .av-iris {
    animation: none;
  }
  .av-m-anim {
    display: none;
  }
  .av-m-static {
    display: inline;
  }
}

.av-m-static {
  display: none;
}

/* Option previews: `face` moves only eyes and mouth, `none` nothing */
.av-mode-face .av-head,
.av-mode-none .av-head,
.av-mode-none .av-face,
.av-mode-none .av-eye,
.av-mode-none .av-iris {
  animation: none;
}