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

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

@layer base {
  body {
    @apply font-['Montserrat'] text-[#888] bg-[#000000] antialiased selection:bg-[#B89768] selection:text-black;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-['Cinzel'] text-[#E5E5E5] font-normal;
  }
}

@layer components {
  .btn-gold {
    @apply inline-flex items-center justify-center px-10 py-4 border border-[#B89768] text-[#B89768] text-[10px] tracking-[0.3em] uppercase hover:bg-[#B89768] hover:text-black transition-all duration-500;
  }
}

.text-gold { color: #B89768; }
.bg-gold { background-color: #B89768; }

.nav-scrolled {
  @apply bg-[#000000]/90 backdrop-blur-xl border-b border-white/5;
}

.vip-card {
  position: relative;
  overflow: hidden;
}

.vip-card img {
  transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s ease;
  filter: grayscale(1) brightness(0.6);
}

.vip-card:hover img {
  transform: scale(1.05);
  filter: grayscale(0.5) brightness(0.9);
}

.vip-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3rem;
  transition: all 0.5s ease;
}

.vip-card:hover h3 {
  color: #B89768;
}