/* ==========================================================
   AgencyOS - Shared Animations

   Common @keyframes animations used across public and portal.
   Consolidates duplicate animations found in multiple files.
   ========================================================== */

/* ========================================
   MODAL ANIMATIONS
   ======================================== */

/**
 * Modal slide-in animation
 * Used by modals to animate in from above with fade
 */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * Fade in animation
 * Generic fade in from transparent to opaque
 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/**
 * Fade out animation
 * Generic fade out from opaque to transparent
 */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ========================================
   LOADING ANIMATIONS
   ======================================== */

/**
 * Spin animation
 * Full 360-degree rotation for loading spinners
 * Consolidated from multiple files
 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/**
 * Pulse animation
 * Subtle scale animation for loading states
 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

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

/* ========================================
   SLIDE ANIMATIONS
   ======================================== */

/**
 * Slide down animation
 * For dropdown menus and expanding content
 */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * Slide up animation
 * For collapsing content
 */
@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

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

/**
 * Slide in from left
 * For sidebars and panels
 */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================
   SHAKE/WIGGLE ANIMATIONS
   ======================================== */

/**
 * Shake animation
 * For error states and validation failures
 */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

/* ========================================
   UTILITY CLASSES FOR ANIMATIONS
   ======================================== */

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

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

.animate-bounce {
  animation: bounce 1s infinite;
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-in-out;
}

.animate-fadeOut {
  animation: fadeOut 0.3s ease-in-out;
}

.animate-modalSlideIn {
  animation: modalSlideIn 0.3s ease-out;
}

.animate-slideDown {
  animation: slideDown 0.2s ease-out;
}

.animate-slideUp {
  animation: slideUp 0.2s ease-out;
}

.animate-shake {
  animation: shake 0.5s;
}