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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply text-gray-900 antialiased;
  }
}

@layer components {
  .section-title {
    @apply text-3xl md:text-4xl font-bold text-gray-900 mb-8;
  }
  
  .section-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24;
  }
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

/* Section transitions */
.section-enter {
  opacity: 0;
  transform: translateY(20px);
}

.section-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s, transform 0.5s;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .section-container {
    @apply py-12;
  }
  
  h1 {
    @apply text-4xl;
  }
  
  h2 {
    @apply text-3xl;
  }
}

/* Loading states */
.image-loading {
  @apply relative overflow-hidden bg-gray-100;
}

.image-loading::after {
  content: '';
  @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}