/* Put the separate ball near Xingchen's line of sight in both narrow and wide scenes. */
html:not([data-ball-position="before"]) .room-scene.scene-action-ball .ball-toy {
  bottom: 76%;
  animation-name: xc-ball-eye-line-v1;
}

@keyframes xc-ball-eye-line-v1 {
  0% {
    opacity: 0;
    transform: translate(-70px, 45px) rotate(0);
  }
  15% {
    opacity: 1;
    transform: translate(0, 30px) rotate(60deg);
  }
  48% {
    opacity: 1;
    transform: translate(calc(35vw - min(24vw, 130px)), -38px) rotate(200deg);
  }
  72% {
    opacity: 1;
    transform: translate(calc(40vw - min(24vw, 130px)), 25px) rotate(320deg);
  }
  to {
    opacity: 0;
    transform: translate(calc(43vw - min(24vw, 130px)), 60px) rotate(430deg);
  }
}