@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Montserrat:wght@400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');

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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply font-sans text-gray-800 bg-white;
  }
}

@layer components {
  /* Buttons */
  .btn {
    @apply px-6 py-3 rounded-lg font-medium transition-all duration-300 inline-flex items-center justify-center gap-2;
  }
  
  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 hover:shadow-lg hover:-translate-y-0.5;
  }
  
  .btn-secondary {
    @apply bg-accent-600 text-white hover:bg-accent-700 hover:shadow-lg hover:-translate-y-0.5;
  }
  
  .btn-outline {
    @apply border-2 border-primary-600 text-primary-600 hover:bg-primary-600 hover:text-white;
  }
  
  .btn-ghost {
    @apply bg-transparent text-gray-700 hover:bg-gray-100;
  }

  /* Cards */
  .card {
    @apply bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl;
  }
  
  .card-hover {
    @apply hover:-translate-y-2 hover:shadow-2xl;
  }

  /* Form Elements */
  .form-input {
    @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 transition-all duration-200;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }
  
  .form-error {
    @apply text-red-500 text-sm mt-1;
  }

  /* Section Headers */
  .section-title {
    @apply text-4xl md:text-5xl font-display font-bold text-gray-900 mb-4;
  }
  
  .section-subtitle {
    @apply text-lg md:text-xl text-gray-600 max-w-3xl mx-auto;
  }
  
  .section-badge {
    @apply inline-block px-4 py-1 bg-primary-100 text-primary-700 rounded-full text-sm font-semibold uppercase tracking-wide mb-4;
  }

  /* Navigation */
  .nav-link {
    @apply text-gray-700 hover:text-primary-600 transition-colors duration-200 font-medium;
  }
  
  .nav-link-active {
    @apply text-primary-600 font-semibold;
  }

  /* Hero Section */
  .hero-overlay {
    @apply absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-black/70;
  }

  /* Image Overlay on Hover */
  .image-overlay {
    @apply absolute inset-0 bg-black/0 hover:bg-black/40 transition-all duration-300;
  }

  /* Gradient Text */
  .gradient-text {
    @apply bg-gradient-to-r from-primary-600 to-accent-600 bg-clip-text text-transparent;
  }

  /* Container */
  .container-custom {
    @apply container mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Divider */
  .divider {
    @apply w-20 h-1 bg-gradient-to-r from-primary-600 to-accent-600 mx-auto rounded-full;
  }
}

@layer utilities {
  /* Custom Animations */
  .animate-slow-bounce {
    animation: bounce 3s infinite;
  }
  
  /* Parallax */
  .parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  /* Smooth Scrollbar */
  .smooth-scroll {
    scroll-behavior: smooth;
  }
  
  /* Glass Effect */
  .glass {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  .glass-dark {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  /* Text Shadow */
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  .text-shadow-lg {
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
  }
  
  /* Custom Scrollbar */
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}

/* Loading Animation */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.skeleton {
  animation: shimmer 2s infinite;
  background: linear-gradient(to right, #f0f0f0 4%, #e0e0e0 25%, #f0f0f0 36%);
  background-size: 1000px 100%;
}

/* Smooth transitions for route changes */
.page-enter {
  opacity: 0;
  transform: translateY(20px);
}

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

/* Custom AOS animations */
[data-aos] {
  pointer-events: auto;
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
}

