/* PLABS CSS Robot coach — speaking/listening mouth filters */
.pl-css-robot-stage {
  position: relative;
  width: min(240px, 72vw);
  height: min(280px, 42vh);
  max-height: 320px;
  flex: 0 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.12), transparent 55%),
    linear-gradient(165deg, #3a3a3a 0%, #222 45%, #141414 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  user-select: none;
}
.pl-css-robot-stage:focus-visible {
  outline: 2px solid #c084fc;
  outline-offset: 2px;
}
.pl-css-robot-stage__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  text-align: center;
  font: 800 10px/1 Nunito, system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  z-index: 2;
}

.pl-css-robot {
  box-sizing: border-box;
  position: absolute;
  width: 160px;
  height: 180px;
  bottom: 28px;
  left: calc(50% - 80px);
  transform-origin: center bottom;
  transform: scale(1.05);
}
.pl-css-robot *,
.pl-css-robot *:before,
.pl-css-robot *:after {
  box-sizing: border-box;
}

.pl-css-robot .head {
  position: absolute;
  width: 160px;
  height: 100px;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
  transform-origin: 50% 100%;
  animation: plCssBob 8000ms ease-in-out alternate infinite -1000ms;
}

.pl-css-robot .eyes {
  position: absolute;
  top: calc(25% - 10px);
  right: 30px;
  left: 30px;
  height: 20px;
  animation: plCssBlink 10000ms linear forwards infinite;
}

.pl-css-robot .eyeball {
  position: absolute;
  width: 12px;
  height: 20px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background-color: #000;
}
.pl-css-robot .eyeball_left { left: 0; transition: transform 100ms ease-in-out; }
.pl-css-robot .eyeball_right { right: 0; transition: transform 100ms ease-in-out; }

.pl-css-robot .mouth {
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: 150px;
  height: 20px;
  background-color: #000;
  overflow: hidden;
  border-radius: 5px;
  transition: height 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.pl-css-robot .mouth-container {
  position: absolute;
  inset: 0;
}
.pl-css-robot .mouth-container-line {
  position: absolute;
  top: 50%;
  height: 2px;
  background-color: limegreen;
  width: 100%;
  margin-top: -1px;
}

.pl-css-robot.is-speaking .mouth { height: 40px; }
.pl-css-robot.is-speaking .mouth-container {
  animation: plCssSpeakingAnim 0.3s infinite;
}

.pl-css-robot .torso {
  position: absolute;
  bottom: 0;
  left: calc(50% - 40px);
  width: 80px;
  height: 60px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
}

.pl-css-robot .neck {
  position: absolute;
  bottom: 45px;
  left: calc(50% - 15px);
  width: 30px;
  height: 50px;
  border-radius: 15px;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 7%, rgb(100, 100, 100) 10%),
    linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
}

.pl-css-robot .arms {
  position: absolute;
  bottom: 0;
  left: 30px;
  right: 30px;
  height: 50px;
}
.pl-css-robot .arm {
  position: absolute;
  top: 0;
  width: 20px;
  height: 50px;
  border-radius: 10px 10px 0 0;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 7%, rgb(100, 100, 100) 10%),
    linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
}
.pl-css-robot .arm_left { left: 0; }
.pl-css-robot .arm_right { right: 0; }

@keyframes plCssBob {
  0% { transform: rotate(-3deg); }
  40% {
    transform: rotate(-3deg);
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
  }
  60% { transform: rotate(3deg); }
  100% { transform: rotate(3deg); }
}
@keyframes plCssBlink {
  50% { transform: scale(1, 1); }
  51% { transform: scale(1, 0.1); }
  52% { transform: scale(1, 1); }
}
@keyframes plCssSpeakingAnim {
  0% { filter: url("#pl-robot-speaking-0"); }
  25% { filter: url("#pl-robot-speaking-1"); }
  50% { filter: url("#pl-robot-speaking-2"); }
  75% { filter: url("#pl-robot-speaking-3"); }
  100% { filter: url("#pl-robot-speaking-4"); }
}

@media (min-width: 860px) {
  body.pl-kids[data-world="robot"] #lessonModal.lesson--story .pl-css-robot-stage {
    width: min(300px, 34vw);
    height: min(340px, 52vh);
    max-height: 360px;
  }
  body.pl-kids[data-world="robot"] #lessonModal.lesson--story .pl-css-robot {
    transform: scale(1.2);
    bottom: 36px;
  }
}