/* ============================================
   Quantum Ops — cursor-following robot (styles)
   ============================================ */

.qo-robot {
  width: 420px;          /* change this to make the robot bigger/smaller */
  max-width: 100%;
  margin: 0 auto;
}

.qo-robot svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Parts that move toward the cursor turn around their lower middle */
.qo-head,
.qo-body {
  transform-box: fill-box;
  transform-origin: 50% 90%;
}

/* Gentle up-and-down floating */
.qo-float { animation: qo-float 5s ease-in-out infinite; }
@keyframes qo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* Blinking eyes */
.qo-blink {
  animation: qo-blink 4.5s infinite;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
@keyframes qo-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}

/* Waving arm */
.qo-wave {
  animation: qo-wave 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 100% 100%;
}
@keyframes qo-wave {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-14deg); }
}

/* On phones: a bit smaller */
@media (max-width: 768px) {
  .qo-robot { width: 280px; }
}

/* Respect visitors who turned off animations in their system settings */
@media (prefers-reduced-motion: reduce) {
  .qo-float, .qo-blink, .qo-wave { animation: none; }
}