/* Static prototype adaptation of apps/desktop/src/MiloGraphiteAvatar.css. */
.milo {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 18px;
  background: radial-gradient(
    ellipse at 50% 42%,
    #d7e4e2,
    #c5d4d2 62%,
    transparent 70%
  );
  filter: drop-shadow(0 2px 0 #1c1a1733);
  overflow: visible;
}
.milo-graphite-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.milo-head {
  transform-origin: 60px 65px;
  animation: milo-breathe 5.4s ease-in-out infinite;
}
.milo-eyes {
  transform-origin: 60px 57px;
  animation: milo-blink 3.8s infinite;
}
.milo-mouth {
  transform-origin: 60px 74px;
}
.milo-halo {
  opacity: 0;
  transform-origin: 60px 60px;
}
.milo-meter {
  transform-origin: center 86px;
}
.milo[data-state="idle"][data-spin="on"] {
  animation: milo-hop 8.5s ease-in-out infinite;
}
.milo[data-state="idle"][data-spin="on"] .milo-graphite-svg {
  transform-origin: 60px 60px;
  animation: milo-twirl 16s ease-in-out infinite;
}
.milo[data-state="listening"] .milo-halo {
  opacity: 0.6;
  animation: milo-halo 2s ease-in-out infinite;
}
.milo[data-state="listening"] .milo-head {
  transform: rotate(-7deg);
  animation: none;
}
.milo[data-state="thinking"] .milo-halo {
  opacity: 0.8;
  stroke-dasharray: 8 10;
  animation: milo-spin 8s linear infinite;
}
.milo[data-state="thinking"] .milo-eyes {
  transform: translateX(3px);
  animation: none;
}
.milo[data-state="speaking"] .milo-mouth {
  animation: milo-talk 0.32s ease-in-out infinite alternate;
}
.milo[data-state="speaking"] .milo-meter {
  animation: milo-meter 0.5s ease-in-out infinite alternate;
}
.milo[data-state="speaking"] .milo-head {
  animation: milo-nod 1.6s ease-in-out infinite;
}
.milo[data-spin="off"] .milo-head,
.milo[data-spin="off"] .milo-halo {
  animation: none;
}
@keyframes milo-breathe {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}
@keyframes milo-blink {
  0%,
  18%,
  26%,
  100% {
    transform: scaleY(1);
  }
  20%,
  24% {
    transform: scaleY(0.08);
  }
  22% {
    transform: scaleY(1);
  }
}
@keyframes milo-hop {
  0%,
  72%,
  100% {
    transform: translateY(0);
  }
  76% {
    transform: translateY(-11px) scaleY(0.94);
  }
  80% {
    transform: translateY(0) scaleY(1.06);
  }
  84% {
    transform: translateY(-6px);
  }
  88% {
    transform: translateY(0);
  }
}
@keyframes milo-twirl {
  0%,
  86%,
  100% {
    transform: rotate(0deg);
  }
  93% {
    transform: rotate(360deg);
  }
}
@keyframes milo-halo {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.65;
  }
}
@keyframes milo-nod {
  0%,
  100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(3deg);
  }
}
@keyframes milo-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes milo-talk {
  from {
    transform: scaleY(0.45);
  }
  to {
    transform: scaleY(1.45);
  }
}
@keyframes milo-meter {
  from {
    transform: scaleY(0.4);
  }
  to {
    transform: scaleY(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .milo,
  .milo * {
    animation: none !important;
  }
}