/* Custom animations and styles */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes pulse-gentle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

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

.animate-fade-in { animation: fade-in 0.6s ease-out; }
.animate-fade-in-up { animation: fade-in-up 0.6s ease-out; }
.animate-slide-up { animation: slide-up 0.5s ease-out; }
.animate-bounce-gentle { animation: bounce-gentle 2s ease-in-out infinite; }
.animate-pulse-gentle { animation: pulse-gentle 3s ease-in-out infinite; }
.animate-shake { animation: shake 0.5s ease-in-out; }

.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-1000 { animation-delay: 1s; }

/* Button styles */
.btn {
  @apply inline-flex items-center px-4 py-2 rounded-lg font-medium transition-all duration-300 transform hover:scale-105;
}

.btn-primary {
  @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500;
}

.btn-success {
  @apply bg-green-600 text-white hover:bg-green-700 focus:ring-2 focus:ring-green-500;
}

.btn-secondary {
  @apply bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-2 focus:ring-gray-500;
}

.btn-sm {
  @apply px-3 py-1 text-sm;
}

/* Form styles */
.form-input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 hover:shadow-md focus:shadow-lg;
}

/* Navigation styles */
.nav-link {
  @apply flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-300;
}

.nav-link:not(.active) {
  @apply text-gray-600 hover:text-gray-900 hover:bg-gray-100 hover:transform hover:scale-105;
}

.nav-link.active {
  @apply text-blue-600 bg-blue-50 shadow-md transform scale-105;
}

.mobile-nav-link {
  @apply flex flex-col items-center space-y-1 px-3 py-2 rounded-md transition-all duration-300;
}

.mobile-nav-link:not(.active) {
  @apply text-gray-600 hover:text-blue-500;
}

.mobile-nav-link.active {
  @apply text-blue-600 transform scale-110;
}

/* Credential field styles */
.credential-field {
  @apply transition-all duration-300;
}

.credential-input {
  @apply flex-1 px-3 py-2 bg-gray-50 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.copy-btn {
  @apply p-2 text-gray-600 hover:text-green-600 transition-colors transform hover:scale-110;
}

.toggle-btn {
  @apply p-2 text-gray-600 hover:text-blue-600 transition-colors transform hover:scale-110;
}

.external-link-btn {
  @apply p-2 text-gray-600 hover:text-blue-600 transition-colors transform hover:scale-110;
}

/* Smooth transitions for all interactive elements */
* {
  transition-property: transform, box-shadow, background-color, border-color, color, opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}

/* Loading spinner */
.spinner {
  @apply w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin;
}

/* Success message */
.success-message {
  @apply bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-xl;
}

/* Error message */
.error-message {
  @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-xl;
}

/* Card hover effects */
.card-hover {
  @apply transition-all duration-300 transform hover:scale-105 hover:shadow-lg;
}

/* Stats card animations */
.stats-card {
  @apply bg-white/80 backdrop-blur-sm rounded-xl shadow-lg p-6 hover:shadow-xl transition-all duration-300 cursor-pointer transform hover:scale-105 hover:-translate-y-1;
}