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

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

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

@layer components {
  .btn-gold {
    @apply inline-flex items-center justify-center px-12 py-4 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-12 py-4 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/10;
}

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

.property-card-vip img {
  transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.property-card-vip:hover img {
  transform: scale(1.05);
}

.property-card-vip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 60%);
  opacity: 0.8;
  transition: opacity 0.5s ease;
}

.property-card-vip:hover::after {
  opacity: 1;
}

.property-info-vip {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2rem;
  z-index: 10;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.property-card-vip:hover .property-info-vip {
  transform: translateY(0);
  opacity: 1;
}

.hero-text-shadow {
  text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}