#eyes-container {
  display: flex;
  gap: 60px;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.eye {
  position: relative;
  width: 120px;
  height: 120px;
}

.eye-glow {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: radial-gradient(
    ellipse at center,
    var(--eye-glow) 0%,
    transparent 70%
  );
  border-radius: 50%;
  animation: glow-pulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

.eye-white {
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at 40% 35%,
    var(--eye-color-light) 0%,
    var(--eye-color) 50%,
    #1a3a25 100%
  );
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  box-shadow: 
    inset 0 -10px 30px rgba(0, 0, 0, 0.4),
    0 0 20px var(--eye-glow);
  animation: eye-idle 4s ease-in-out infinite;
}

@keyframes eye-idle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.pupil {
  position: absolute;
  width: 50px;
  height: 50px;
  background: radial-gradient(
    circle at 30% 30%,
    #0a0a0a 0%,
    #000000 100%
  );
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease-out;
}

.pupil-inner {
  position: absolute;
  width: 30px;
  height: 30px;
  background: radial-gradient(
    circle at center,
    #151515 0%,
    #000000 100%
  );
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pupil-reflection {
  position: absolute;
  width: 12px;
  height: 12px;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.4) 0%,
    transparent 100%
  );
  border-radius: 50%;
  top: 20%;
  left: 25%;
}

.eye.blink .eye-white {
  animation: blink 0.15s ease-in-out;
}

@keyframes blink {
  0% { transform: scaleY(1); }
  50% { transform: scaleY(0.1); }
  100% { transform: scaleY(1); }
}

.eye.listening .eye-white {
  animation: listening-pulse 0.5s ease-in-out infinite;
}

@keyframes listening-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.eye.speaking .eye-white {
  animation: speaking-pulse 0.3s ease-in-out infinite;
}

@keyframes speaking-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.eye.thinking .pupil {
  animation: thinking-look 2s ease-in-out infinite;
}

@keyframes thinking-look {
  0%, 100% { transform: translate(-50%, -50%); }
  25% { transform: translate(-40%, -60%); }
  50% { transform: translate(-60%, -50%); }
  75% { transform: translate(-40%, -40%); }
}

@media (max-width: 600px) {
  .eye {
    width: 80px;
    height: 80px;
  }
  
  #eyes-container {
    gap: 40px;
  }
  
  .pupil {
    width: 35px;
    height: 35px;
  }
  
  .pupil-inner {
    width: 20px;
    height: 20px;
  }
  
  .pupil-reflection {
    width: 8px;
    height: 8px;
  }
}