@import "tailwindcss";

@theme {
  --color-gold: #d4af37;
  --color-gold-light: #f1e5ac;
  --color-dark: #121212;
  --color-dark-surface: #1e1e1e;
  --font-display: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;
}

@layer base {
  body {
    @apply bg-dark text-white font-body;
    scroll-behavior: smooth;
  }
}

@layer components {
  .btn-gold {
    @apply px-8 py-3 bg-gold text-dark font-semibold rounded-sm transition-all duration-300 hover:bg-gold-light hover:shadow-lg hover:shadow-gold/20 active:scale-95;
  }
  
  .section-title {
    @apply font-display text-4xl md:text-5xl text-gold mb-8 relative;
  }
  
  .section-title::after {
    content: "";
    @apply absolute left-0 -bottom-4 w-20 h-1 bg-gold;
  }

  .card-premium {
    @apply bg-dark-surface border border-white/5 p-6 rounded-lg transition-all duration-500 hover:border-gold/50 hover:-translate-y-2;
  }

  .nav-link {
    @apply text-white/70 hover:text-gold transition-colors relative pb-1;
  }

  .nav-link.active::after {
    content: "";
    @apply absolute left-0 bottom-0 w-full h-0.5 bg-gold;
  }

  /* Reveal animation */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .reveal.active {
    opacity: 1;
    transform: translateY(0);
  }
}

.gold-gradient {
  background: linear-gradient(135deg, #d4af37 0%, #f1e5ac 50%, #d4af37 100%);
}

.text-gold-gradient {
  background: linear-gradient(135deg, #d4af37 0%, #f1e5ac 50%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  @apply bg-dark;
}
::-webkit-scrollbar-thumb {
  @apply bg-white/10 rounded-full hover:bg-gold/50 transition-colors;
}