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

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

@layer base {
  body {
    @apply font-['Inter'] text-neutral-400 bg-neutral-950 antialiased selection:bg-white selection:text-black;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-['Cormorant_Garamond'] text-white font-normal;
  }
}

@layer components {
  .btn-minimal {
    @apply inline-flex items-center justify-center px-8 py-3 border border-white/20 text-white text-[10px] tracking-[0.2em] uppercase hover:bg-white hover:text-black transition-all duration-500;
  }
}

.nav-scrolled {
  @apply bg-neutral-950/90 backdrop-blur-xl border-b border-white/5;
}

.dish-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.dish-card img {
  transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s ease;
  filter: brightness(0.7) grayscale(0.2);
}

.dish-card:hover img {
  transform: scale(1.05);
  filter: brightness(1) grayscale(0);
}

.dish-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2rem;
  background: linear-gradient(to top, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0) 100%);
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dish-card:hover .dish-info {
  transform: translateY(0);
  opacity: 1;
}

.menu-line {
  flex-grow: 1;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin: 0 1rem 0.5rem 1rem;
}