.robot {
  position: fixed;
  width: 60px;
  height: 80px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.15;
}

.robot::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    /* Head */
    radial-gradient(circle at 50% 20%, rgba(255, 193, 7, 0.8) 0%, transparent 60%),
    /* Body */
    linear-gradient(to bottom, 
      rgba(255, 193, 7, 0.8) 20%,
      transparent 20%,
      transparent 40%,
      rgba(255, 193, 7, 0.8) 40%,
      rgba(255, 193, 7, 0.8) 60%,
      transparent 60%,
      transparent 80%,
      rgba(255, 193, 7, 0.8) 80%
    );
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255, 193, 7, 0.3);
}

.robot::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(255, 193, 7, 0.8);
  border-radius: 50%;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 
    0 0 10px rgba(255, 193, 7, 0.5),
    0 0 20px rgba(255, 193, 7, 0.3);
  animation: blink 3s infinite;
}

.robot-1 {
  top: 15%;
  left: 15%;
  animation: floatRobot1 20s ease-in-out infinite;
}

.robot-2 {
  top: 45%;
  left: 75%;
  animation: floatRobot2 25s ease-in-out infinite;
}

.robot-3 {
  top: 75%;
  left: 25%;
  animation: floatRobot3 22s ease-in-out infinite;
}

@keyframes blink {
  0%, 45%, 55%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes floatRobot1 {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(30px, -20px) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0deg); }
  75% { transform: translate(-30px, 20px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes floatRobot2 {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-40px, 30px) rotate(-5deg); }
  50% { transform: translate(0, 0) rotate(0deg); }
  75% { transform: translate(40px, -30px) rotate(5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes floatRobot3 {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(35px, 25px) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0deg); }
  75% { transform: translate(-35px, -25px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
} 