/* Flattened from openclaw.module.css. Class map:
   clawStage → openclaw-clawStage, halo → openclaw-halo, claw → openclaw-claw,
   clawLeft → openclaw-clawLeft, clawRight → openclaw-clawRight,
   eye → openclaw-eye.
   @keyframes (clawEntrance, clawFloat, pinchLeft, pinchRight, blink,
   haloPulse) are left unrenamed — they are not class selectors. */

/*
 * Animated OpenClaw hero claw.
 * Lobster coral-red: #ff7a59 -> #c81e1e gradient, teal #00e5cc eye glow.
 * All motion is wrapped in prefers-reduced-motion below.
 */

.openclaw-clawStage {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 1.75rem;
  position: relative;
}

/* Soft glowing halo behind the claw */
.openclaw-halo {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 107, 74, 0.38) 0%,
    rgba(200, 30, 30, 0.18) 45%,
    rgba(255, 107, 74, 0) 72%
  );
  filter: blur(6px);
  z-index: 0;
  animation: haloPulse 4.5s ease-in-out infinite;
}

.openclaw-claw {
  position: relative;
  z-index: 1;
  width: 200px;
  height: 200px;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(200, 30, 30, 0.45));
  transform-origin: center;
  animation: clawEntrance 0.9s cubic-bezier(0.16, 1, 0.3, 1) both,
    clawFloat 5s ease-in-out 0.9s infinite;
}

/* Left claw pinches around its outer hinge */
.openclaw-clawLeft {
  transform-origin: 25px 55px;
  animation: pinchLeft 2.6s ease-in-out infinite;
}

/* Right claw pinches around its outer hinge */
.openclaw-clawRight {
  transform-origin: 95px 55px;
  animation: pinchRight 2.6s ease-in-out infinite;
}

/* Eyes blink in place: each eye group squashes vertically (eyelid close) around
 * its own centre — no drift, no scaling outward. */
.openclaw-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 4s ease-in-out infinite;
}

@keyframes clawEntrance {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes clawFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pinchLeft {
  0%,
  100% {
    transform: rotate(0deg) translateX(0);
  }
  50% {
    transform: rotate(14deg) translateX(2px);
  }
}

@keyframes pinchRight {
  0%,
  100% {
    transform: rotate(0deg) translateX(0);
  }
  50% {
    transform: rotate(-14deg) translateX(-2px);
  }
}

@keyframes blink {
  0%,
  90%,
  100% {
    transform: scaleY(1);
  }
  94% {
    transform: scaleY(0.08);
  }
}

@keyframes haloPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

/* Responsive: smaller on mobile */
@media (max-width: 640px) {
  .openclaw-claw {
    width: 150px;
    height: 150px;
  }
  .openclaw-halo {
    width: 165px;
    height: 165px;
  }
}

/* Respect reduced-motion: hold a clean static state */
@media (prefers-reduced-motion: reduce) {
  .openclaw-claw,
  .openclaw-clawLeft,
  .openclaw-clawRight,
  .openclaw-eye,
  .openclaw-halo {
    animation: none;
  }
  .openclaw-claw {
    opacity: 1;
    transform: none;
  }
}