/* app/assets/stylesheets/animations.css */
/* Smooth transitions and animations for modern minimal design */

/* Default transition timing for all interactive elements */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

button,
a,
input,
textarea,
select,
.btn,
.card,
.pill {
  transition-duration: 200ms;
  transition-property: all;
}

/* Fade In Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 400ms ease-out forwards;
}

.fade-in-fast {
  animation: fadeIn 200ms ease-out forwards;
}

.fade-in-slow {
  animation: fadeIn 600ms ease-out forwards;
}

/* Stagger fade-in for lists */
.fade-in-delay-1 {
  animation: fadeIn 400ms ease-out 100ms forwards;
  opacity: 0;
}

.fade-in-delay-2 {
  animation: fadeIn 400ms ease-out 200ms forwards;
  opacity: 0;
}

.fade-in-delay-3 {
  animation: fadeIn 400ms ease-out 300ms forwards;
  opacity: 0;
}

.fade-in-delay-4 {
  animation: fadeIn 400ms ease-out 400ms forwards;
  opacity: 0;
}

/* Pulse Animation for loading states */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

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

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

.pulse-slow {
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Skeleton Loading Animation */
@keyframes skeleton {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 0%,
    #e0e0e0 20%,
    #f0f0f0 40%,
    #f0f0f0 100%
  );
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
  border-radius: 4px;
  display: inline-block;
  line-height: 1;
  width: 100%;
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5rem;
}

.skeleton-heading {
  height: 2em;
  margin-bottom: 1rem;
}

.skeleton-card {
  height: 200px;
  width: 100%;
  border-radius: var(--border-radius-lg, 8px);
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* Slide In Animations */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in-up {
  animation: slideInUp 400ms ease-out forwards;
}

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

.slide-in-down {
  animation: slideInDown 400ms ease-out forwards;
}

/* Scale In Animation */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scale-in {
  animation: scaleIn 300ms ease-out forwards;
}

/* Spin Animation for loading spinners */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 1s linear infinite;
}

.spin-slow {
  animation: spin 2s linear infinite;
}

/* Bounce Animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.bounce {
  animation: bounce 1s ease-in-out infinite;
}

/* Smooth hover transitions */
.smooth-hover {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

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

/* Focus ring animation */
.focus-ring {
  transition: box-shadow 150ms ease-in-out;
}

.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}

/* Loading state for buttons */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
  animation: spin 0.6s linear infinite;
  color: inherit;
  opacity: 1;
}

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