/* Task Status Button Animations */

/* Pulse animations for different status colors */
@keyframes pulse-blue {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  50% {
    opacity: 0.9;
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
  }
}

@keyframes pulse-purple {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.4);
  }
  50% {
    opacity: 0.9;
    box-shadow: 0 0 0 8px rgba(147, 51, 234, 0);
  }
}

@keyframes pulse-green {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  50% {
    opacity: 0.9;
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
}

@keyframes pulse-red {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    opacity: 0.9;
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
}

/* Shimmer animation for in-progress status */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Apply animations */
.animate-pulse-blue {
  animation: pulse-blue 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-pulse-purple {
  animation: pulse-purple 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-pulse-green {
  animation: pulse-green 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-pulse-red {
  animation: pulse-red 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-shimmer {
  animation: shimmer 2s ease-in-out infinite;
}

/* Animation delays for status indicators */
.animation-delay-200 {
  animation-delay: 200ms;
}

.animation-delay-400 {
  animation-delay: 400ms;
}

/* Smooth transitions for status changes */
.status-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover effects */
.status-button-hover {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.status-button-hover:hover {
  transform: translateY(-2px);
}

/* Focus styles for accessibility */
.status-button-focus:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.5);
  outline-offset: 2px;
}

/* Status badge animations */
@keyframes status-badge-appear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.status-badge-animate {
  animation: status-badge-appear 0.3s ease-out;
}

/* Loading spinner for async status changes */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.status-loading {
  animation: spin 1s linear infinite;
}

/* Success checkmark animation */
@keyframes checkmark {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.checkmark-animate {
  stroke-dasharray: 100;
  animation: checkmark 0.5s ease-in-out;
}

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

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

/* Glow effects for active status */
.status-glow-blue {
  box-shadow: 
    0 0 20px rgba(59, 130, 246, 0.3),
    0 0 40px rgba(59, 130, 246, 0.2),
    inset 0 0 20px rgba(59, 130, 246, 0.1);
}

.status-glow-purple {
  box-shadow: 
    0 0 20px rgba(147, 51, 234, 0.3),
    0 0 40px rgba(147, 51, 234, 0.2),
    inset 0 0 20px rgba(147, 51, 234, 0.1);
}

.status-glow-green {
  box-shadow: 
    0 0 20px rgba(34, 197, 94, 0.3),
    0 0 40px rgba(34, 197, 94, 0.2),
    inset 0 0 20px rgba(34, 197, 94, 0.1);
}

.status-glow-red {
  box-shadow: 
    0 0 20px rgba(239, 68, 68, 0.3),
    0 0 40px rgba(239, 68, 68, 0.2),
    inset 0 0 20px rgba(239, 68, 68, 0.1);
}