@import "tailwindcss";

@theme {
  --color-gold: #c5a028;
  --color-gold-light: #f3e5ab;
  --color-black-deep: #0a0a0b;
  --color-black-soft: #141416;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Outfit", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

@layer base {
  body {
    @apply bg-black-deep text-gray-300 font-sans selection:bg-gold selection:text-black-deep;
    scroll-behavior: smooth;
  }
}

@layer utilities {
  .text-shadow-gold {
    text-shadow: 0 0 10px rgba(197, 160, 40, 0.5);
  }
  .gold-gradient {
    background: linear-gradient(135deg, #d4af37 0%, #c5a028 50%, #8b6d11 100%);
  }
  .gold-border {
    border-color: rgba(197, 160, 40, 0.3);
  }
  .glass {
    @apply bg-white/5 backdrop-blur-md border border-white/10;
  }
  .glass-gold {
    @apply bg-gold/5 backdrop-blur-md border border-gold/20;
  }
}

/* Animations from Design Recipes */
@keyframes slamIn {
  0% { transform: scale(1.2) translateY(-20px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.animate-slam {
  animation: slamIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  animation: marquee 40s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* Smooth Fade In */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

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