/* General background setup */
body {
  margin: 0;
  background: radial-gradient(circle at center, #0a192f, #020c1b);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Stage container for the robot */
.stage {
  width: 200px;
  height: 300px;
  position: relative;
  cursor: pointer;
}

/* Robot base position (completely still by default) */
.robot {
  position: absolute;
  bottom: 0;
  transform: none;
}

/* Head */
.head {
  width: 80px;
  height: 80px;
  background: #64ffda;
  border-radius: 15px;
  position: relative;
  margin: 0 auto;
}

/* Eyes (no blinking by default) */
.eyes {
  position: absolute;
  top: 25px;
  left: 15px;
  width: 50px;
  height: 15px;
  background: #0a192f;
  border-radius: 10px;
  transition: height 0.1s;
}

/* Body */
.body {
  width: 100px;
  height: 120px;
  background: #233554;
  margin: 10px auto;
  border-radius: 20px;
  position: relative;
}

/* Arms */
.arm {
  width: 20px;
  height: 80px;
  background: #64ffda;
  position: absolute;
  top: 10px;
  border-radius: 10px;
  transform: none;
}

.arm.left { left: -25px; transform-origin: top right; }
.arm.right { right: -25px; transform-origin: top left; }

/* Legs */
.leg {
  width: 20px;
  height: 80px;
  background: #64ffda;
  position: absolute;
  bottom: -70px;
  border-radius: 10px;
  transform: none;
}

.leg.left { left: 20px; transform-origin: top right; }
.leg.right { right: 20px; transform-origin: top left; }

/* ✨ Dance & Blink animations trigger ONLY on hover */
.stage:hover .robot {
  animation: dance 1s infinite alternate ease-in-out;
}

.stage:hover .arm.left {
  animation: armLeft 1s infinite alternate ease-in-out;
}

.stage:hover .arm.right {
  animation: armRight 1s infinite alternate ease-in-out;
}

.stage:hover .leg.left {
  animation: legLeft 1s infinite alternate ease-in-out;
}

.stage:hover .leg.right {
  animation: legRight 1s infinite alternate ease-in-out;
}

.stage:hover .eyes {
  animation: blink 2s infinite ease-in-out;
}

/* 🕺 Dance and move animations */
@keyframes dance {
  from { transform: rotate(-10deg) translateY(0); }
  to { transform: rotate(10deg) translateY(-10px); }
}

@keyframes armLeft {
  from { transform: rotate(20deg); }
  to { transform: rotate(-40deg); }
}

@keyframes armRight {
  from { transform: rotate(-20deg); }
  to { transform: rotate(40deg); }
}

@keyframes legLeft {
  from { transform: rotate(-20deg); }
  to { transform: rotate(20deg); }
}

@keyframes legRight {
  from { transform: rotate(20deg); }
  to { transform: rotate(-20deg); }
}

/* 👀 Eye blink animation */
@keyframes blink {
  0%, 90%, 100% {
    height: 15px; /* open */
  }
  95% {
    height: 3px; /* blink */
  }
}