/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@14.2.7_@babel+core@7.29.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!../../node_modules/.pnpm/next@14.2.7_@babel+core@7.29.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!../../packages/ui/src/components/auth/otp/animations.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * OTP Components CSS Animations
 *
 * Premium animation keyframes for OTP input and verification components.
 * Designed for OTP error feedback and smooth transitions.
 *
 * Performance:
 * - Uses transform for GPU acceleration
 * - Respects prefers-reduced-motion for accessibility
 * - Animation durations tuned for perceptual smoothness
 */

/* =============================================================================
   KEYFRAMES
   ============================================================================= */

/* Shake animation for error feedback
 * Subtle horizontal shake that communicates invalid input
 * without being jarring or distracting */
@keyframes otp-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-6px);
  }
  20% {
    transform: translateX(6px);
  }
  30% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  50% {
    transform: translateX(-3px);
  }
  60% {
    transform: translateX(3px);
  }
  70% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(2px);
  }
  90% {
    transform: translateX(-1px);
  }
}

/* =============================================================================
   ANIMATION UTILITY CLASSES
   ============================================================================= */

.animate-shake {
  animation: otp-shake 0.5s ease-in-out;
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .animate-shake {
    animation: none;
    /* Fallback: brief opacity flash for feedback */
    opacity: 0.7;
    transition: opacity 0.1s;
  }
}