/* Duration, Easing, and Effects */

:root {
  /* Transition Durations */
  --duration-fast: 0.15s;
  --duration-base: 0.2s;
  --duration-slow: 0.3s;
  --duration-slower: 0.5s;
  --duration-slowest: 0.8s;

  /* Easing Functions */
  --ease-linear: linear;
  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-cubic-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-cubic-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-cubic-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-back-in-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Common Transitions */
  --transition-default: all var(--duration-base) var(--ease-out);
  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-slow: all var(--duration-slow) var(--ease-out);
  
  /* Specific Transitions */
  --transition-color: color var(--duration-base) var(--ease-out);
  --transition-background: background-color var(--duration-base) var(--ease-out);
  --transition-border: border-color var(--duration-base) var(--ease-out);
  --transition-shadow: box-shadow var(--duration-base) var(--ease-out);
  --transition-transform: transform var(--duration-base) var(--ease-out);
  --transition-opacity: opacity var(--duration-base) var(--ease-out);
}

/* Transition Utilities */
.transition-none {
  transition: none;
}

.transition-default {
  transition: var(--transition-default);
}

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

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

.transition-color {
  transition: var(--transition-color);
}

.transition-background {
  transition: var(--transition-background);
}

.transition-border {
  transition: var(--transition-border);
}

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

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

.transition-opacity {
  transition: var(--transition-opacity);
}

/* Transform Utilities */
.scale-90 {
  transform: scale(0.9);
}

.scale-95 {
  transform: scale(0.95);
}

.scale-100 {
  transform: scale(1);
}

.scale-105 {
  transform: scale(1.05);
}

.scale-110 {
  transform: scale(1.1);
}

/* Hover Transform Utilities */
.hover-scale-105:hover {
  transform: scale(1.05);
  transition: var(--transition-transform);
}

.hover-scale-110:hover {
  transform: scale(1.1);
  transition: var(--transition-transform);
}

/* Opacity Utilities */
.opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

/* Hover Opacity Utilities */
.hover-opacity-75:hover {
  opacity: 0.75;
  transition: var(--transition-opacity);
}

.hover-opacity-50:hover {
  opacity: 0.5;
  transition: var(--transition-opacity);
}

/* Animation Definitions */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

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

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

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

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

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

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

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

/* Animation Utilities */
.animate-fadeIn {
  animation: fadeIn var(--duration-base) var(--ease-out);
}

.animate-fadeOut {
  animation: fadeOut var(--duration-base) var(--ease-out);
}

.animate-slideUp {
  animation: slideUp var(--duration-base) var(--ease-out);
}

.animate-slideDown {
  animation: slideDown var(--duration-base) var(--ease-out);
}

.animate-scaleIn {
  animation: scaleIn var(--duration-base) var(--ease-out);
}

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

.animate-pulse {
  animation: pulse 2s var(--ease-in-out) infinite;
}

.animate-bounce {
  animation: bounce var(--duration-base) var(--ease-out) infinite;
}