/* ========================================
   Animation & Transition Utilities
   ======================================== */

/* Transition Variables */
:root {
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Cubic bezier curves for smoother animations */
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
}

/* ========================================
   GPU Optimization
   ======================================== */

/* Apply to elements that will be animated */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* For opacity animations */
.gpu-accelerated-opacity {
  will-change: opacity;
}

/* For complex animations */
.gpu-accelerated-complex {
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* ========================================
   Fade Animations
   ======================================== */

.fade-in {
  animation: fadeIn var(--transition-normal);
}

.fade-in-fast {
  animation: fadeIn var(--transition-fast);
}

.fade-in-slow {
  animation: fadeIn var(--transition-slow);
}

.fade-out {
  animation: fadeOut var(--transition-normal);
}

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

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

/* ========================================
   Slide Animations
   ======================================== */

.slide-in-left {
  animation: slideInLeft var(--transition-normal);
}

.slide-in-right {
  animation: slideInRight var(--transition-normal);
}

.slide-in-up {
  animation: slideInUp var(--transition-normal);
}

.slide-in-down {
  animation: slideInDown var(--transition-normal);
}

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

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

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

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

/* ========================================
   Scale Animations
   ======================================== */

.scale-in {
  animation: scaleIn var(--transition-normal);
}

.scale-out {
  animation: scaleOut var(--transition-normal);
}

@keyframes scaleIn {
  from { 
    transform: scale(0.9); 
    opacity: 0; 
  }
  to { 
    transform: scale(1); 
    opacity: 1; 
  }
}

@keyframes scaleOut {
  from { 
    transform: scale(1); 
    opacity: 1; 
  }
  to { 
    transform: scale(0.9); 
    opacity: 0; 
  }
}

/* ========================================
   Bounce Animations
   ======================================== */

.bounce {
  animation: bounce 1s infinite;
}

.bounce-once {
  animation: bounce 0.6s;
}

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

/* ========================================
   Pulse Animation
   ======================================== */

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* ========================================
   Shake Animation
   ======================================== */

.shake {
  animation: shake 0.5s;
}

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

/* ========================================
   Loading Spinner
   ======================================== */

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

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

/* ========================================
   Transition Utilities
   ======================================== */

/* All properties */
.transition-all {
  transition: all var(--transition-normal);
}

.transition-all-fast {
  transition: all var(--transition-fast);
}

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

/* Specific properties */
.transition-opacity {
  transition: opacity var(--transition-normal);
}

.transition-transform {
  transition: transform var(--transition-normal);
}

.transition-colors {
  transition: background-color var(--transition-normal), 
              color var(--transition-normal), 
              border-color var(--transition-normal);
}

.transition-shadow {
  transition: box-shadow var(--transition-normal);
}

/* Combined transitions */
.transition-hover {
  transition: transform var(--transition-fast), 
              box-shadow var(--transition-fast);
}

/* No transition */
.transition-none {
  transition: none !important;
}

/* ========================================
   Hover Effects
   ======================================== */

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.hover-grow:hover {
  transform: scale(1.02);
}

.hover-shrink:hover {
  transform: scale(0.98);
}

.hover-shadow:hover {
  box-shadow: var(--shadow-lg);
}

.hover-opacity:hover {
  opacity: 0.8;
}

/* ========================================
   Delay Classes
   ======================================== */

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

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

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

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

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

/* ========================================
   Animation Fill Mode
   ======================================== */

.animation-fill-both {
  animation-fill-mode: both;
}

.animation-fill-forwards {
  animation-fill-mode: forwards;
}

.animation-fill-backwards {
  animation-fill-mode: backwards;
}