@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
@import "tailwindcss";

@theme {
  --font-serif: "Cormorant Garamond", serif;
  --font-sans: "Inter", sans-serif;
  
  --color-gold: #d4af37;
  --color-gold-light: #f1e5ac;
  --color-gold-dark: #aa8a2e;
  --color-black-gold: #1c1c1c;
  --color-off-white: #f5f2ed;
}

:root {
  --primary-gold: #d4af37;
  --bg-dark: #0a0a0a;
  --bg-card: #151515;
}

body {
  background-color: var(--bg-dark);
  color: var(--color-off-white);
  font-family: var(--font-sans);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.gold-text {
  color: var(--primary-gold);
}

.gold-border {
  border-color: var(--primary-gold);
}

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

.black-gold-gradient {
  background: linear-gradient(135deg, #1c1c1c 0%, #0a0a0a 100%);
}

.fancy-serif {
  font-family: var(--font-serif);
}

/* Custom animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

/* Image hover effects */
.hover-gold-scale {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-gold-scale:hover {
  transform: scale(1.05);
  filter: brightness(1.1) sepia(0.2);
}

/* Glass effect */
.glass {
  background: rgba(26, 26, 26, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.1);
}

/* Smooth hide/show for pages */
.page-section {
  display: none;
}

.page-section.active {
  display: block;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
  background: #d4af37;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #f1e5ac;
}

.nav-link {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -4px;
  left: 0;
  background-color: var(--primary-gold);
  transition: width 0.3s ease;
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.nav-link:hover, .nav-link.active {
  color: var(--primary-gold);
}