/* EYEOVERTHINK Robot Lab (Hand-Drawn 3D CSS Kit) by Vaughn Scott, EyeOverThink®. 100% CSS robot: expressions (.expr-happy/.expr-angry/.expr-sleepy/.expr-dizzy), actions (.is-walking/.is-jumping/.glow-off), colors (.body-green/.body-purple/.body-blue). Extracted by claude-code 2026-09-30. */
.robot-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 4.2rem 1rem 2.4rem;
  min-height: 460px;
  background:
    radial-gradient(rgba(106, 92, 255, 0.14) 1.5px, transparent 1.6px),
    linear-gradient(180deg, #efeaff 0%, #fefefe 70%);
  background-size: 26px 26px, 100% 100%;
  overflow: hidden;
}

/* ---------- the star robot ---------- */
.robot {
  --bounce: 1.6s;
  --body: #7ed957;
  position: relative;
  width: 230px;
  animation: robot-bounce var(--bounce) ease-in-out infinite;
}

.robot.is-walking { animation: robot-walk-cycle calc(var(--bounce) * 0.55) ease-in-out infinite; }

.robot.expr-angry { animation: robot-bounce var(--bounce) ease-in-out infinite, robot-shake 0.26s linear infinite; }

.robot.expr-angry.is-walking { animation: robot-walk-cycle calc(var(--bounce) * 0.55) ease-in-out infinite, robot-shake 0.26s linear infinite; }

.robot.is-jumping { animation: robot-jump 0.62s cubic-bezier(0.28, 0.84, 0.42, 1); }

@keyframes robot-bounce {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-16px) rotate(1.2deg); }
}

@keyframes robot-walk-cycle {
  0%, 100% { transform: translateY(0) rotate(-2.6deg); }
  50%      { transform: translateY(-10px) rotate(2.6deg); }
}

@keyframes robot-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-7px) rotate(-1.6deg); }
  75%      { transform: translateX(7px) rotate(1.6deg); }
}

@keyframes robot-jump {
  0%   { transform: translateY(0) scale(1, 1); }
  30%  { transform: translateY(8px) scale(1.18, 0.78); }
  55%  { transform: translateY(-74px) scale(0.92, 1.12); }
  75%  { transform: translateY(0) scale(1.1, 0.85); }
  100% { transform: translateY(0) scale(1, 1); }
}

.robot-head-wrap { position: relative; width: 200px; margin: 0 auto; padding-top: 58px; }

.robot-antenna {
  position: absolute;
  top: 6px;
  width: 7px;
  height: 52px;
  background: #111;
  border-radius: 4px;
  z-index: 0;
}

.robot-antenna.a-left { left: 46px; transform: rotate(-13deg); transform-origin: bottom center; }

.robot-antenna.a-right { right: 46px; transform: rotate(13deg); transform-origin: bottom center; }

.robot-antenna-tip {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  background: #ff4d4d;
  border: 3px solid #111;
  border-radius: 50%;
  box-sizing: border-box;
  animation: antenna-pulse 1.4s ease-in-out infinite;
}

@keyframes antenna-pulse {
  0%, 100% { box-shadow: 2px 2px 0 #111, 0 0 0 0 rgba(255, 60, 60, 0); }
  50%      { box-shadow: 2px 2px 0 #111, 0 0 18px 5px rgba(255, 60, 60, 0.85); }
}

.robot.glow-off .robot-antenna-tip { animation: none; background: #a85151; box-shadow: 2px 2px 0 #111; }

.robot.expr-angry .robot-antenna-tip { background: #ff2222; animation-duration: 0.45s; }

.robot-head {
  position: relative;
  z-index: 1;
  background: #c9ced6;
  border: 3px solid #111;
  border-radius: 20px 26px 18px 28px / 28px 20px 28px 20px;
  box-shadow: 5px 5px 0 #111;
  padding: 14px 16px 18px;
}

.robot-brows { display: flex; justify-content: space-between; padding: 0 6px; height: 14px; margin-bottom: 4px; }

.robot-brows i {
  width: 46px;
  height: 9px;
  background: #111;
  border-radius: 5px;
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  display: block;
}

.robot.expr-happy .robot-brows i { opacity: 1; }

.robot.expr-happy .robot-brows i:first-child { transform: rotate(-9deg) translateY(-4px); }

.robot.expr-happy .robot-brows i:last-child { transform: rotate(9deg) translateY(-4px); }

.robot.expr-angry .robot-brows i { opacity: 1; }

.robot.expr-angry .robot-brows i:first-child { transform: rotate(22deg) translateY(5px); }

.robot.expr-angry .robot-brows i:last-child { transform: rotate(-22deg) translateY(5px); }

.robot.expr-sleepy .robot-brows i { opacity: 0.5; transform: translateY(3px); }

.robot.expr-dizzy .robot-brows i { opacity: 0.8; transform: rotate(4deg); }

.robot-eyes { display: flex; justify-content: space-around; padding: 4px 4px 0; min-height: 52px; }

.robot-eye {
  position: relative;
  width: 36px;
  height: 48px;
  background: #fff;
  border: 3px solid #111;
  border-radius: 46% 46% 48% 48%;
  box-shadow: 3px 3px 0 #111;
  transform-origin: center 60%;
}

.robot-eye::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 14px;
  width: 13px;
  height: 17px;
  background: #111;
  border-radius: 50%;
}

.robot.expr-happy .robot-eye,
.robot.expr-angry .robot-eye { animation: robot-blink 4.4s ease-in-out infinite; }

@keyframes robot-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95.5%         { transform: scaleY(0.06); }
}

.robot.expr-happy .robot-eye {
  background: transparent;
  border: none;
  box-shadow: none;
  border-top: 7px solid #111;
  border-radius: 50%;
  height: 24px;
  width: 42px;
  margin-top: 10px;
}

.robot.expr-happy .robot-eye::after { display: none; }

.robot.expr-angry .robot-eye { height: 44px; }

.robot.expr-angry .robot-eyes .robot-eye:first-child::after { left: 13px; }

.robot.expr-angry .robot-eyes .robot-eye:last-child::after { left: 5px; }

.robot.expr-sleepy .robot-eye {
  height: 8px;
  width: 42px;
  background: #111;
  border: none;
  box-shadow: none;
  border-radius: 4px;
  margin-top: 20px;
  animation: none;
}

.robot.expr-sleepy .robot-eye::after { display: none; }

.robot.expr-dizzy .robot-eye {
  background: transparent;
  border: none;
  box-shadow: none;
  width: 38px;
  height: 38px;
  margin-top: 6px;
  animation: none;
}

.robot.expr-dizzy .robot-eye::before,
.robot.expr-dizzy .robot-eye::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 16px;
  width: 36px;
  height: 6px;
  background: #111;
  border-radius: 3px;
}

.robot.expr-dizzy .robot-eye::before { transform: rotate(45deg); }

.robot.expr-dizzy .robot-eye::after { transform: rotate(-45deg); }

.robot-mouth { width: 66px; height: 26px; margin: 8px auto 0; border-bottom: 5px solid #111; border-radius: 50%; }

.robot.expr-happy .robot-mouth { width: 78px; height: 32px; border-bottom-width: 7px; }

.robot.expr-angry .robot-mouth { border-bottom: none; border-top: 6px solid #111; height: 22px; width: 58px; }

.robot.expr-sleepy .robot-mouth { width: 16px; height: 20px; border: 4px solid #111; border-radius: 50%; }

.robot-mouth-wavy { display: none; margin: 14px auto 0; }

.robot.expr-dizzy .robot-mouth { display: none; }

.robot.expr-dizzy .robot-mouth-wavy { display: block; }

.robot-zzz {
  position: absolute;
  top: 2px;
  right: 10px;
  font-weight: 700;
  font-size: 1.7rem;
  opacity: 0;
}

.robot.expr-sleepy .robot-zzz { animation: z-float 2.6s ease-in infinite; }

.robot.expr-sleepy .robot-zzz.z2 { right: 30px; animation-delay: 0.85s; }

.robot.expr-sleepy .robot-zzz.z3 { right: 50px; animation-delay: 1.7s; }

@keyframes z-float {
  0%   { transform: translateY(8px) scale(0.7); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(-48px) scale(1.3) rotate(12deg); opacity: 0; }
}

.robot-body {
  position: relative;
  width: 202px;
  height: 148px;
  margin: 14px auto 0;
  background: var(--body);
  border: 3px solid #111;
  border-radius: 44% 56% 48% 52% / 34% 36% 64% 62%;
  box-shadow: 5px 5px 0 #111;
  transform: rotate(-1deg);
}

.robot-body::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 108px;
  height: 78px;
  transform: translate(-50%, -50%) rotate(2deg);
  background: rgba(255, 255, 255, 0.32);
  border: 3px dashed rgba(17, 17, 17, 0.5);
  border-radius: 50%;
}

.robot.body-green { --body: #7ed957; }

.robot.body-purple { --body: #b79cff; }

.robot.body-blue { --body: #7ec8f7; }

.robot-arm {
  position: absolute;
  top: 36px;
  width: 17px;
  height: 58px;
  background: var(--body);
  border: 3px solid #111;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #111;
}

.robot-arm.a-left { left: -22px; transform: rotate(10deg); }

.robot-arm.a-right { right: -22px; transform: rotate(-10deg); }

.robot.is-walking .robot-arm.a-left { animation: arm-swing calc(var(--bounce) * 0.55) ease-in-out infinite; transform-origin: top center; }

.robot.is-walking .robot-arm.a-right { animation: arm-swing calc(var(--bounce) * 0.55) ease-in-out infinite; transform-origin: top center; animation-delay: calc(var(--bounce) * -0.275); }

@keyframes arm-swing {
  0%, 100% { transform: rotate(26deg); }
  50%      { transform: rotate(-16deg); }
}

.robot-feet { display: flex; justify-content: center; gap: 28px; margin-top: -8px; }

.robot-foot {
  width: 58px;
  height: 32px;
  background: #8f96a3;
  border: 3px solid #111;
  border-radius: 16px 16px 10px 10px / 20px 20px 10px 10px;
  box-shadow: 4px 4px 0 #111;
}

.robot.is-walking .robot-foot.f-left { animation: foot-step calc(var(--bounce) * 0.55) ease-in-out infinite; }

.robot.is-walking .robot-foot.f-right { animation: foot-step calc(var(--bounce) * 0.55) ease-in-out infinite; animation-delay: calc(var(--bounce) * -0.275); }

@keyframes foot-step {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-17px) rotate(-7deg); }
}