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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --card: transparent;
    --card-foreground: 222.2 47.4% 11.2%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;
    --ring: 215 20.2% 65.1%;
    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    @apply bg-white text-slate-900;
    font-family: Georgia, "Times New Roman", serif;
  }
}

@layer utilities {
  .animate-delay-100 { animation-delay: 100ms; }
  .animate-delay-200 { animation-delay: 200ms; }
  .animate-delay-300 { animation-delay: 300ms; }
  .animate-delay-400 { animation-delay: 400ms; }
  .animate-delay-500 { animation-delay: 500ms; }
  .animate-delay-600 { animation-delay: 600ms; }
  .animate-delay-700 { animation-delay: 700ms; }
  .animate-delay-800 { animation-delay: 800ms; }

  .opacity-0-start {
    opacity: 0;
  }

  .nav-link-hover {
    position: relative;
    display: inline-block;
  }
  .nav-link-hover::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #c9a84c;
    transition: width 0.3s ease;
  }
  .nav-link-hover:hover::after {
    width: 100%;
  }
  .nav-link-hover.active::after {
    width: 100%;
  }

  .gold-shimmer {
    background: linear-gradient(
      90deg,
      #c9a84c 0%,
      #f0d080 40%,
      #c9a84c 60%,
      #a07830 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s linear infinite;
  }

  .reveal-hidden {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-hidden-left {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal-hidden-right {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal-visible-x {
    opacity: 1;
    transform: translateX(0);
  }

  .img-hover-zoom {
    overflow: hidden;
  }
  .img-hover-zoom img {
    transition: transform 0.5s ease;
  }
  .img-hover-zoom:hover img {
    transform: scale(1.04);
  }

  .gold-divider {
    height: 2px;
    background: linear-gradient(to right, transparent, #c9a84c, #c9a84c, transparent);
  }
}

.mobile-menu-enter {
  opacity: 0;
  transform: translateY(-8px);
}
.mobile-menu-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-menu-exit {
  opacity: 1;
}
.mobile-menu-exit-active {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}