@import "tailwindcss";

@theme {
  --color-gold-500: #b8860b;
  --color-luxury-black: #0a0a0a;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply bg-luxury-black text-gray-300 antialiased;
  }

  /* Custom Scrollbar for Luxury Feel */
  ::-webkit-scrollbar {
    width: 6px;
  }
  
  ::-webkit-scrollbar-track {
    background: #0a0a0a;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #b8860b;
    border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #d4af37;
  }
}

@layer components {
  .nav-link {
    @apply relative after:absolute after:bottom-[-4px] after:left-0 after:w-0 after:h-[1px] after:bg-gold-500 after:transition-all hover:after:w-full tracking-widest text-xs uppercase;
  }
}

/* Page transitions */
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

/* Image Hover Effects */
.img-zoom {
  @apply overflow-hidden;
}
.img-zoom img {
  @apply transition-transform duration-700 hover:scale-110;
}