/* styles.css */
:root {
  --background: #fff8f3;
  --foreground: #1e1b18;
  --primary: #390002;
  --primary-soft: #5c0a0a;
  --secondary: #775a19;
  --secondary-bright: #c5a059;
  --surface: #fff8f3;
  --surface-low: #f9f2ed;
  --surface-mid: #f3ede8;
  --surface-high: #e8e1dc;
  --muted: #564240;
  --outline: #ddc0bd;
  
  --font-body: 'Hanken Grotesk', sans-serif;
  --font-display: 'EB Garamond', serif;
}

* { box-sizing: border-box; }

html {
  background: var(--background);
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: var(--font-display); }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-shell {
  width: min(100% - 48px, 1280px);
  margin-inline: auto;
}

/* Base Image Animations */
.hero-image {
  animation: hero-image-rise 7s ease-out both;
  transform-origin: center;
}
.hero-overlay {
  animation: hero-overlay-soften 1.8s ease-out both;
}
@keyframes hero-image-rise {
  from { filter: saturate(0.86) brightness(0.84); transform: scale(1.08); }
  to { filter: saturate(1) brightness(1); transform: scale(1); }
}
@keyframes hero-overlay-soften {
  from { opacity: 0.82; }
  to { opacity: 1; }
}

/* Scroll Reveal Animations (Hero & Cards) */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-reveal { animation: reveal-up 0.8s ease-out forwards; opacity: 0; }
.hero-reveal-delay-1 { animation-delay: 0.2s; }
.hero-reveal-delay-2 { animation-delay: 0.4s; }
.hero-reveal-delay-3 { animation-delay: 0.6s; }

.card-reveal { animation: reveal-up 0.6s ease-out forwards; opacity: 0; }
.card-reveal-delay-1 { animation-delay: 0.8s; }
.card-reveal-delay-2 { animation-delay: 1.0s; }
.card-reveal-delay-3 { animation-delay: 1.2s; }

/* Scroll Reveal Animations (About Section) */
@keyframes fade-slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal-element { animation: fade-slide-up 0.8s ease-out forwards; opacity: 0; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* Marquee Animation */
@keyframes infinite-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - 3.5rem)); }
}
.animate-infinite-scroll { animation: infinite-scroll 40s linear infinite; }
.animate-infinite-scroll:hover { animation-play-state: paused; }/* styles.css */
:root {
  --background: #fff8f3;
  --foreground: #1e1b18;
  --primary: #390002;
  --primary-soft: #5c0a0a;
  --secondary: #775a19;
  --secondary-bright: #c5a059;
  --surface: #fff8f3;
  --surface-low: #f9f2ed;
  --surface-mid: #f3ede8;
  --surface-high: #e8e1dc;
  --muted: #564240;
  --outline: #ddc0bd;
  
  --font-body: 'Hanken Grotesk', sans-serif;
  --font-display: 'EB Garamond', serif;
}

* { box-sizing: border-box; }

html {
  background: var(--background);
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: var(--font-display); }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-shell {
  width: min(100% - 48px, 1280px);
  margin-inline: auto;
}

/* Base Image Animations */
.hero-image {
  animation: hero-image-rise 7s ease-out both;
  transform-origin: center;
}
.hero-overlay {
  animation: hero-overlay-soften 1.8s ease-out both;
}
@keyframes hero-image-rise {
  from { filter: saturate(0.86) brightness(0.84); transform: scale(1.08); }
  to { filter: saturate(1) brightness(1); transform: scale(1); }
}
@keyframes hero-overlay-soften {
  from { opacity: 0.82; }
  to { opacity: 1; }
}

/* Scroll Reveal Animations (Hero & Cards) */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-reveal { animation: reveal-up 0.8s ease-out forwards; opacity: 0; }
.hero-reveal-delay-1 { animation-delay: 0.2s; }
.hero-reveal-delay-2 { animation-delay: 0.4s; }
.hero-reveal-delay-3 { animation-delay: 0.6s; }

.card-reveal { animation: reveal-up 0.6s ease-out forwards; opacity: 0; }
.card-reveal-delay-1 { animation-delay: 0.8s; }
.card-reveal-delay-2 { animation-delay: 1.0s; }
.card-reveal-delay-3 { animation-delay: 1.2s; }

/* Scroll Reveal Animations (About Section) */
@keyframes fade-slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal-element { animation: fade-slide-up 0.8s ease-out forwards; opacity: 0; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* Marquee Animation */
@keyframes infinite-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - 3.5rem)); }
}
.animate-infinite-scroll { animation: infinite-scroll 40s linear infinite; }
.animate-infinite-scroll:hover { animation-play-state: paused; }