/* [project]/src/components/RobotFace/robot-face.css [app-client] (css) */
.robot-face {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  flex: none;
  position: relative;
}

.robot-face * {
  pointer-events: none;
  -webkit-user-drag: none;
}

.robot-face-breathe {
  transform-origin: 50% 88%;
  animation: rf-breathe calc(3.6s / var(--rf-speed, 1)) ease-in-out infinite;
  position: absolute;
  inset: 0;
}

@keyframes rf-breathe {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.008, 1.018);
  }
}

.robot-face-stack {
  opacity: 0;
  transition: opacity .18s;
  position: absolute;
  inset: 0;
}

.robot-face[data-expr="smile"] .robot-face-stack[data-expr="smile"], .robot-face[data-expr="joyful"] .robot-face-stack[data-expr="joyful"], .robot-face[data-expr="surprised"] .robot-face-stack[data-expr="surprised"], .robot-face[data-expr="thinking"] .robot-face-stack[data-expr="thinking"], .robot-face[data-expr="sparkle"] .robot-face-stack[data-expr="sparkle"], .robot-face[data-expr="sleeping"] .robot-face-stack[data-expr="sleeping"] {
  opacity: 1;
}

.robot-face-img {
  display: block;
  position: absolute;
}

.robot-face-base {
  width: 100%;
  top: 0;
  left: 0;
}

.robot-face-layer {
  transform-origin: var(--rf-origin, 50% 50%);
}

.robot-face-eyes {
  transition: transform 90ms ease-out;
}

.robot-face[data-blink] .robot-face-eyes {
  transform: scaleY(.12);
}

.robot-face[data-expr="thinking"] .robot-face-accent-0, .robot-face[data-expr="thinking"] .robot-face-accent-1, .robot-face[data-expr="thinking"] .robot-face-accent-2 {
  animation: rf-dot-bounce calc(1.4s / var(--rf-speed, 1)) ease-in-out infinite;
}

.robot-face[data-expr="thinking"] .robot-face-accent-0 {
  animation-delay: calc(-360ms / var(--rf-speed, 1));
}

.robot-face[data-expr="thinking"] .robot-face-accent-1 {
  animation-delay: calc(-180ms / var(--rf-speed, 1));
}

.robot-face[data-expr="thinking"] .robot-face-accent-2 {
  animation-delay: 0s;
}

@keyframes rf-dot-bounce {
  0%, 55%, 100% {
    opacity: .55;
    transform: translateY(0) scale(1);
  }

  15% {
    opacity: 1;
    transform: translateY(-62%) scale(1.28);
  }

  32% {
    opacity: .8;
    transform: translateY(4%) scale(.92);
  }
}

.robot-face[data-expr="sleeping"] .robot-face-accent {
  animation: rf-zz calc(3s / var(--rf-speed, 1)) ease-in-out infinite;
}

@keyframes rf-zz {
  0%, 100% {
    opacity: .75;
    transform: translate(0) rotate(-3deg);
  }

  50% {
    opacity: 1;
    transform: translate(6%, -10%) rotate(4deg);
  }
}

.robot-face[data-expr="joyful"] .robot-face-breathe {
  animation-name: rf-excited-jump;
  animation-duration: calc(2.2s / var(--rf-speed, 1));
  animation-timing-function: cubic-bezier(.22, .9, .3, 1);
  animation-iteration-count: infinite;
}

@keyframes rf-excited-jump {
  0% {
    transform: translateY(0) scale(1);
  }

  6% {
    transform: translateY(2.5%) scale(1.06, .9);
  }

  15% {
    transform: translateY(-13%) scale(.95, 1.07);
  }

  24% {
    transform: translateY(.8%) scale(1.07, .91);
  }

  33% {
    transform: translateY(-9%) scale(.96, 1.05);
  }

  41% {
    transform: translateY(.6%) scale(1.05, .93);
  }

  49% {
    transform: translateY(-4.5%) scale(.98, 1.03);
  }

  57% {
    transform: translateY(0) scale(1.03, .97);
  }

  64% {
    transform: translateY(0) scale(1.005, .995);
  }

  72%, 100% {
    transform: translateY(0) scale(1);
  }
}

.robot-face[data-expr="surprised"] .robot-face-mouth {
  animation: rf-gasp calc(1.5s / var(--rf-speed, 1)) ease-in-out infinite;
}

@keyframes rf-gasp {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.18, 1.24);
  }
}

.robot-face[data-expr="sparkle"] .robot-face-eye-0, .robot-face[data-expr="sparkle"] .robot-face-eye-1 {
  animation: rf-twinkle calc(1.3s / var(--rf-speed, 1)) ease-in-out infinite;
}

.robot-face[data-expr="sparkle"] .robot-face-eye-1 {
  animation-delay: calc(-650ms / var(--rf-speed, 1));
}

@keyframes rf-twinkle {
  0%, 100% {
    transform: scale(.92) rotate(-4deg);
  }

  50% {
    transform: scale(1.12) rotate(4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .robot-face-breathe, .robot-face-stack, .robot-face .robot-face-layer {
    transition: none !important;
    animation: none !important;
  }
}

.robot-face-reduced .robot-face-breathe, .robot-face-reduced .robot-face-stack, .robot-face-reduced .robot-face-layer {
  transition: none !important;
  animation: none !important;
}

/*# sourceMappingURL=src_components_RobotFace_robot-face_0x4g11riblr9-.css.map*/