/* Joint Reconstruction Training - Animations */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes tabSlide {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes progressFill {
  from { width: 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Applied animations */
.animate-fade-in {
  animation: fadeIn 0.3s ease;
}

.animate-fade-in-up {
  animation: fadeInUp 0.4s ease;
}

.animate-slide-in-left {
  animation: slideInLeft 0.3s ease;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease;
}

/* Content loading */
.content-enter {
  animation: fadeInUp 0.3s ease;
}

/* Sidebar transition */
.sidebar {
  transition: transform var(--transition-base);
}

/* Loading spinner */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--neutral-200);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Progress bar animation */
.progress-bar-fill {
  animation: progressFill 0.8s ease;
}

/* Smooth height transitions for accordion */
.accordion-content {
  transition: max-height var(--transition-slow) ease;
}

/* SVG hover effects */
.svg-interactive [data-hover] {
  transition: opacity var(--transition-fast), fill var(--transition-fast);
  cursor: pointer;
}

.svg-interactive [data-hover]:hover {
  opacity: 0.8;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html { scroll-behavior: auto; }
}