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

:root {
  --color-bg-light: #FAF8F5;
  --color-bg-cream: #F3EFE9;
  --color-text-dark: #1C1C1C;
  --color-text-muted: #575757;
  --color-bronze: #A88C52;
  --color-bronze-light: #C5A880;
  --color-terracotta: #9E5A44;
  --color-terracotta-dark: #824734;
}

/* Custom Typography Mapping */
.font-serif-elegant {
  font-family: 'Cormorant Garamond', serif;
}

.font-sans-clean {
  font-family: 'Inter', sans-serif;
}

/* Base style resets and scroll behavior */
html {
  scroll-behavior: smooth;
  background-color: var(--color-bg-light);
  color: var(--color-text-dark);
}

/* Marble Background Pattern */
.marble-bg {
  background-color: var(--color-bg-light);
  background-image: 
    radial-gradient(at 0% 0%, rgba(243, 239, 233, 0.5) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(197, 168, 128, 0.08) 0px, transparent 50%),
    radial-gradient(at 50% 100%, rgba(243, 239, 233, 0.8) 0px, transparent 50%);
  position: relative;
  overflow: hidden;
}

/* Subtle organic grid/veins representation */
.marble-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800'%3E%3Cpath d='M-100,200 Q200,300 400,100 T900,400' fill='none' stroke='rgba(168, 140, 82, 0.03)' stroke-width='1.5'/%3E%3Cpath d='M-50,600 Q300,500 500,700 T850,500' fill='none' stroke='rgba(168, 140, 82, 0.02)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: cover;
  pointer-events: none;
  z-index: 1;
}

/* Animated Navigation Link Underline */
.nav-link-animated {
  position: relative;
  color: var(--color-text-dark);
  transition: color 0.3s ease;
}

.nav-link-animated::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: -4px;
  left: 0;
  background-color: var(--color-bronze);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav-link-animated:hover {
  color: var(--color-bronze);
}

.nav-link-animated:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes imageReveal {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(15px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in {
  animation: fadeIn 1.2s ease forwards;
}

.animate-image-reveal {
  animation: imageReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animation Delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Image Container Shadows & Hover Effects */
.gourmet-image-container {
  box-shadow: 0 20px 40px -15px rgba(28, 28, 28, 0.12),
              0 0 0 1px rgba(168, 140, 82, 0.15);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gourmet-image-container:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 30px 60px -20px rgba(28, 28, 28, 0.18),
              0 0 0 1px rgba(168, 140, 82, 0.25);
}

/* Glassmorphic Cards */
.glass-card {
  background: rgba(250, 248, 245, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(197, 168, 128, 0.2);
}