frontend/src/components/SignDisplay/AnimatedHandDisplay.css
.animated-hand-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  border-radius: 12px;
  padding: 2rem;
  min-height: 400px;
}

.hand-stage {
  width: 300px;
  height: 300px;
  position: relative;
  margin-bottom: 2rem;
}

.hand-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hand-svg {
  width: 100%;
  height: 100%;
}

.sign-label {
  text-align: center;
}

/* Animation for HELLO - wave motion */
.wave-animation .hand-group {
  animation: wave 1s ease-in-out infinite;
  transform-origin: 100px 180px;
}

@keyframes wave {
  0%, 100% { transform: rotate(-20deg); }
  50% { transform: rotate(20deg); }
}

/* Animation for YES - nodding motion */
.yes-animation .hand-group {
  animation: nod 0.8s ease-in-out infinite;
}

@keyframes nod {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(20px); }
}

/* Animation for NO - side to side */
.no-animation .hand-group {
  animation: shake 0.8s ease-in-out infinite;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-15px); }
  75% { transform: translateX(15px); }
}

/* Animation for STOP - palm flash */
.stop-animation .hand-group {
  animation: stop-flash 1s ease-in-out;
}

@keyframes stop-flash {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

/* Animation for THANK YOU - forward motion */
.thank-you-animation .hand-group {
  animation: thank-you 1.2s ease-in-out infinite;
}

@keyframes thank-you {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-20px) translateX(20px); }
}

/* Animation for PLEASE - circular motion */
.please-animation .hand-group {
  animation: circular 2s ease-in-out infinite;
}

@keyframes circular {
  0% { transform: translate(0, 0); }
  25% { transform: translate(20px, -20px); }
  50% { transform: translate(0, -40px); }
  75% { transform: translate(-20px, -20px); }
  100% { transform: translate(0, 0); }
}

/* Animation for GOOD/Thumbs up */
.thumbs-up-animation .thumb {
  animation: thumbs-up 0.8s ease-in-out;
  transform-origin: 55px 125px;
}

.thumbs-up-animation .finger {
  opacity: 0.3;
}

@keyframes thumbs-up {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-30deg) translateY(-10px); }
}

/* Animation for BAD/Thumbs down */
.thumbs-down-animation .thumb {
  animation: thumbs-down 0.8s ease-in-out;
  transform-origin: 55px 125px;
}

.thumbs-down-animation .finger {
  opacity: 0.3;
}

@keyframes thumbs-down {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(30deg) translateY(10px); }
}

/* Animation for HELP - tapping motion */
.help-animation .hand-group {
  animation: tap 0.6s ease-in-out infinite;
}

@keyframes tap {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(15px); }
}

/* Animation for WHAT - shrug motion */
.what-animation .hand-group {
  animation: shrug 1.5s ease-in-out infinite;
}

@keyframes shrug {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(-10deg); }
  75% { transform: translateY(-10px) rotate(10deg); }
}

/* Default animation */
.default-animation .hand-group {
  animation: pulse 2s ease-in-out infinite;
}

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