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

@layer base {
  body {
    @apply bg-white text-gray-900 font-sans antialiased;
  }
  
  h1, h2, h3 {
    @apply font-light tracking-tight;
  }
  
  p {
    @apply leading-relaxed text-gray-700;
  }
}

@layer components {
  .page-container {
    @apply min-h-screen flex flex-col;
  }
  
  .content-area {
    @apply flex-grow;
  }
  
  .footer {
    @apply py-6 text-center text-gray-400 text-sm;
  }
  
  .nav-dot {
    @apply w-4 h-4 rounded-full border border-gray-400 cursor-pointer transition-all duration-300 hover:bg-gray-200;
  }
  
  .nav-dot.active {
    @apply bg-gray-800 border-gray-800;
  }
  
  .carousel-slide {
    @apply w-full h-screen object-cover;
  }
  
  .gallery-item {
    @apply rounded-lg overflow-hidden shadow-sm transition-transform duration-300 hover:scale-105;
  }
  
  .gallery-item img {
    @apply w-full h-full object-cover;
  }
  
  .text-panel {
    @apply p-8 md:p-12 h-full flex flex-col justify-center;
  }
  
  .image-gallery {
    @apply h-screen overflow-y-auto;
  }
  
  .archive-grid {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6;
  }
  
  .archive-item {
    @apply group relative overflow-hidden rounded-lg;
  }
  
  .archive-item::after {
    @apply absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-300;
    content: '';
  }
  
  .archive-caption {
    @apply absolute bottom-4 left-4 right-4 text-white text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300;
  }
}

/* Custom scrollbar for image gallery */
.image-gallery::-webkit-scrollbar {
  width: 6px;
}

.image-gallery::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.image-gallery::-webkit-scrollbar-thumb {
  background: #c5c5c5;
  border-radius: 3px;
}

.image-gallery::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Fade transition for page navigation */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease-in-out;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .text-panel {
    @apply p-6;
  }
  
  .archive-grid {
    @apply grid-cols-1 gap-4 p-4;
  }
}