/* ελδίρπ Custom CSS - Extends Tailwind for site specifics */
/* Animations */
@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  0% { transform: scale(0.95); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease-out forwards;
}

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

/* Gradients */
.bg-home-hero {
  background-image: linear-gradient(to right, #f5f7fa, #c3cfe2);
}

/* Card Transitions */
.card-hover {
  transition: all 0.3s ease-in-out;
  transition-property: box-shadow, transform;
}

.card-hover:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 25px -5px rgba(9, 9, 24, 0.1), 0 8px 10px -6px rgba(9, 9, 24, 0.05);
}

/* Gradient Text Classes */
.bg-gradient-text {
  background-image: linear-gradient(90deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  color: transparent;
}

/* Search Input Styles */
.search-input {
  border-radius: 2rem;
  padding: 1rem 3rem 1rem 1rem;
  border: 2px solid #e2e8f0;
  transition: all 0.2s ease;
}

.search-input:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.search-input::placeholder {
  opacity: 0.6;
}

/* Button Enhancements */
.btn-primary {
  background-image: linear-gradient(to right, #3b82f6, #6366f1);
}

.btn-primary:hover {
  background-image: linear-gradient(to right, #4f46e5, #5856d6);
}

/* Custom Transitions */
.transition-all {
  transition: all 0.3s ease-in-out !important;
}

/* Custom Hover Effects */
.hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}

.hover\:shadow-xl:hover {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}

/* Dark Mode Backgrounds */
.dark\:bg-card {
  background-color: #1f2937;
}

/* Glassmorphism Elements */
.backdrop-blur-lg {
  backdrop-filter: blur(20px);
  background-color: rgba(255, 255, 255, 0.03);
}

/* Custom Shaders */
.drop-shadow-lg {
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Footer Gradient */
.footer-gradient {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}