noteflow/public/css/animations.css

/* Animations CSS */

/* Fade in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Backdrop fade */
@keyframes backdropFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal open animation */
@keyframes modalOpen {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

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

/* Slide in from right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Card hover animation */
@keyframes cardHover {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-4px);
  }
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Spin animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Application des animations */
.modal-backdrop {
  animation: backdropFade var(--transition-slow) ease;
}

.modal-content {
  animation: modalOpen 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.note-card {
  animation: slideInUp 0.3s ease;
}

.todo-item {
  animation: slideInRight 0.2s ease;
}

.user-dropdown {
  animation: slideInUp 0.2s ease;
}

/* Loading state */
.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

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

.spinner {
  animation: spin 1s linear infinite;
  width: 20px;
  height: 20px;
}

/* Smooth transitions */
.smooth-transition {
  transition: all var(--transition-base);
}

.smooth-transition-slow {
  transition: all var(--transition-slow);
}