// Emphasis Animations
// Attention-grabbing animations for highlighting elements

// Bounce
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translateY(0);
  }
  40%, 43% {
    transform: translateY(-24px);
  }
  70% {
    transform: translateY(-8px);
  }
  90% {
    transform: translateY(-4px);
  }
}

.animate-bounce {
  animation: bounce 0.6s ease-in-out;
}

// Shake
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

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

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

.animate-pulse {
  animation: pulse 0.6s ease-in-out infinite;
}

// Flash
@keyframes flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

.animate-flash {
  animation: flash 0.6s ease-in-out;
}

// Wobble
@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}

.animate-wobble {
  animation: wobble 0.6s ease-in-out;
}

// Swing
@keyframes swing {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.animate-swing {
  animation: swing 0.6s ease-in-out;
  transform-origin: top center;
}

// Rubber Band
@keyframes rubberBand {
  0% { transform: scaleX(1); }
  30% { transform: scaleX(1.25) scaleY(0.75); }
  40% { transform: scaleX(0.75) scaleY(1.25); }
  50% { transform: scaleX(1.15) scaleY(0.85); }
  65% { transform: scaleX(0.95) scaleY(1.05); }
  75% { transform: scaleX(1.05) scaleY(0.95); }
  100% { transform: scaleX(1) scaleY(1); }
}

.animate-rubber-band {
  animation: rubberBand 0.6s ease-in-out;
}

// Tada
@keyframes tada {
  0% { transform: scaleX(1) scaleY(1); }
  10%, 20% { transform: scaleX(0.9) scaleY(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scaleX(1.1) scaleY(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scaleX(1.1) scaleY(1.1) rotate(-3deg); }
  100% { transform: scaleX(1) scaleY(1) rotate(0); }
}

.animate-tada {
  animation: tada 0.6s ease-in-out;
}

// Heartbeat
@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}

.animate-heartbeat {
  animation: heartbeat 0.6s ease-in-out infinite;
}

// Jello
@keyframes jello {
  11.1% { transform: skewX(-12.5deg) skewY(-12.5deg); }
  22.2% { transform: skewX(6.25deg) skewY(6.25deg); }
  33.3% { transform: skewX(-3.125deg) skewY(-3.125deg); }
  44.4% { transform: skewX(1.5625deg) skewY(1.5625deg); }
  55.5% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  66.6% { transform: skewX(0.390625deg) skewY(0.390625deg); }
  77.7% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
  88.8% { transform: skewX(0.09765625deg) skewY(0.09765625deg); }
  100% { transform: skewX(0) skewY(0); }
}

.animate-jello {
  animation: jello 0.6s ease-in-out;
  transform-origin: center;
}