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

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

@layer base {
  body {
    @apply font-['Montserrat'] text-[#a0a0a0] bg-[#0a0a0a] antialiased selection:bg-[#d4af37] selection:text-black;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-['Cinzel'] text-white font-normal;
  }
}

@layer components {
  .btn-gold {
    @apply inline-flex items-center justify-center px-8 py-3 border border-[#d4af37] text-[#d4af37] text-xs tracking-[0.2em] uppercase hover:bg-[#d4af37] hover:text-black transition-all duration-500;
  }
  
  .btn-solid-gold {
    @apply inline-flex items-center justify-center px-8 py-3 bg-[#d4af37] text-black text-xs tracking-[0.2em] uppercase hover:bg-white transition-all duration-500;
  }
}

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

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

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

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

.service-card-vip:hover img {
  transform: scale(1.05);
  filter: grayscale(0);
}

.service-info-vip {
  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: 2rem;
  transition: all 0.5s ease;
}

.service-card-vip:hover .service-info-vip h3 {
  color: #d4af37;
}