.figure-eyes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .figure-eyes-gaze, .figure-eyes-pupil {
    animation: kumiki-eye-position 14s cubic-bezier(.32, 0, .18, 1) infinite;
  }
  .figure-eyes-pupil { animation-name: kumiki-pupil-position; }
  .figure-eyes-lid, .figure-eyes-pupil-blink {
    animation: kumiki-blink 5.8s ease-in-out infinite;
  }
  .figure-eyes-pupil-blink { animation-name: kumiki-blink-pupil; }
  .figure-eyes:is(:not(.figure-eyes-playing), :not([opacity="1"])) :is(.figure-eyes-gaze, .figure-eyes-pupil, .figure-eyes-lid, .figure-eyes-pupil-blink) {
    animation-play-state: paused;
  }
}
@media (prefers-reduced-motion: reduce) {
  .figure-eyes { display: none; }
}

/* Brief saccades separated by still fixations. Distances are in local LCD
   coordinates; the pupils travel further than the outside of the eyes. */
@keyframes kumiki-eye-position {
  0%, 5%, 96%, 100% { transform: translate(0, 0); }
  7.5%, 26% { transform: translate(-1.65px, .35px); }
  28.5%, 48% { transform: translate(1.2px, -.65px); }
  51%, 66% { transform: translate(-.3px, -1.1px); }
  68.5%, 82% { transform: translate(-1px, .65px); }
  85%, 93% { transform: translate(.5px, .1px); }
}
@keyframes kumiki-pupil-position {
  0%, 5%, 96%, 100% { transform: translate(0, 0); }
  7.5%, 26% { transform: translate(-9.9px, 1.15px); }
  28.5%, 48% { transform: translate(1px, -.6px); }
  51%, 66% { transform: translate(-3.7px, -1.95px); }
  68.5%, 82% { transform: translate(-7.4px, 2.3px); }
  85%, 93% { transform: translate(-.6px, .35px); }
}
@keyframes kumiki-blink {
  0%, 49%, 53.2%, 100% { transform: scaleY(1); }
  50.8%, 51.1% { transform: scaleY(.07); }
}
@keyframes kumiki-blink-pupil {
  0%, 49%, 53.2%, 100% { opacity: 1; }
  50.8%, 51.1% { opacity: 0; }
}