@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

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

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

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

.animate-slideInLeft {
  animation: slideInLeft 3s ease forwards;
}

.animate-slideInRight {
  animation: slideInRight 3s ease forwards;
}

.animate-slideInUp {
  animation: slideInUp 3s ease forwards;
}

.loader {
  border-top-color: #3498db;
  animation: spin 1s linear infinite;
}

.project-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-gradient {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #1e40af 100%);
}

.hero-section {
  position: relative;
  color: white;
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-section > .bg-black {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 0;
}

.hero-section > .relative {
  position: relative;
  z-index: 1;
}

/* Project card overlay hidden by default */
.project-card .project-overlay {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.3s ease !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  transform: translateY(20px) !important;
  pointer-events: none !important;
}

/* Show overlay on hover */
.project-card:hover .project-overlay {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Enhanced hover effects for project cards */
.project-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Ensure opacity-0 utility is enforced */
.opacity-0 {
  opacity: 0 !important;
  pointer-events: none !important;
}

.project-card img {
  transition: transform 0.3s ease;
}

.project-card:hover img {
  transform: scale(1.05);
}

.project-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Responsive Enhancements */

/* Ensure images scale properly */
img {
  max-width: 100%;
  height: auto;
}

/* Navigation adjustments for small screens */
@media (max-width: 768px) {
  nav .hidden.md\\:flex {
    display: none !important;
  }
  nav .md\\:hidden {
    display: flex !important;
  }
}

/* Mobile menu styles */
#mobile-menu {
  display: none;
  position: absolute;
  top: 64px; /* height of nav */
  left: 0;
  width: 100%;
  background-color: white;
  z-index: 50;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#mobile-menu.show {
  display: block;
}

/* Service cards grid responsiveness */
@media (max-width: 640px) {
  .service-card {
    padding: 1rem !important;
  }
  .grid.md\\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  .grid.lg\\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
}

/* Project cards grid responsiveness */
@media (max-width: 640px) {
  #completed-projects,
  #ongoing-projects {
    grid-template-columns: 1fr !important;
  }
}

/* Footer adjustments */
@media (max-width: 640px) {
  footer .grid.md\\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
}

/* Form inputs full width on mobile */
@media (max-width: 640px) {
  form input,
  form textarea,
  form select {
    width: 100% !important;
  }
}

/* Add smooth transitions for layout changes */
* {
  transition: all 0.3s ease-in-out;
}