/* Micro-animations, Transitions, & Keyframes */

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

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

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.15);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.35);
  }
  100% {
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.15);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Apply animations classes */
.anim-fade-in {
  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.anim-scale-in {
  animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.anim-pulse-glow {
  animation: pulseGlow 2s infinite ease-in-out;
}

.anim-shake {
  animation: shake 0.2s ease-in-out 2;
}

/* Smooth transitions */
.transition-all {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
