@import "tailwindcss";

@theme {
  --color-gold: #d4af37;
  --color-gold-hover: #f1c40f;
  --color-dark-bg: #0a0a0a;
  --color-dark-surface: #151515;
  --color-light-text: #f5f5f0;
  --color-muted-text: #a0a0a0;
  
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Oswald', sans-serif;
}

@layer base {
  body {
    @apply bg-dark-bg text-light-text font-sans selection:bg-gold selection:text-dark-bg;
    scroll-behavior: smooth;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-display tracking-tight text-white;
  }
}

@layer components {
  .btn-gold {
    @apply px-6 py-2.5 bg-gold text-dark-bg font-bold rounded-sm transition-all duration-300 hover:bg-gold-hover hover:scale-105 active:scale-95 shadow-[0_0_15px_rgba(212,175,55,0.3)];
  }

  .btn-outline {
    @apply px-6 py-2.5 border border-gold text-gold font-bold rounded-sm transition-all duration-300 hover:bg-gold hover:text-dark-bg hover:shadow-[0_0_15px_rgba(212,175,55,0.3)];
  }

  .card-gold {
    @apply bg-dark-surface border border-white/5 rounded-lg overflow-hidden hover:border-gold/30 transition-all duration-500 hover:-translate-y-1 block;
  }

  .nav-link {
    @apply text-muted-text hover:text-gold transition-colors relative after:content-[''] after:absolute after:bottom-[-4px] after:left-0 after:w-0 after:h-[2px] after:bg-gold after:transition-all hover:after:w-full;
  }

  .section-title {
    @apply text-4xl md:text-5xl font-bold mb-8 relative inline-block;
  }

  .section-title::after {
    @apply content-[''] absolute bottom-[-10px] left-0 w-20 h-1 bg-gold;
  }

  .gold-gradient {
    @apply bg-linear-to-r from-gold to-yellow-600 bg-clip-text text-transparent;
  }

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

@layer utilities {
  .glass {
    @apply bg-white/5 backdrop-blur-md border border-white/10;
  }
  
  .animate-reveal {
    animation: reveal 1s ease forwards;
  }
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Animations for staggered entrance */
.stagger-reveal > * {
  opacity: 0;
  animation: reveal 0.8s ease forwards;
}

.stagger-reveal > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-reveal > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-reveal > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-reveal > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-reveal > *:nth-child(5) { animation-delay: 0.5s; }