/* ==========================================================================
   SGL Foods - Custom Styles, Brand Theme Colors & Animations
   ========================================================================== */

body {
  background-color: var(--brand-bg, #FDFBF7);
  color: var(--brand-ink, #1D1C1A);

  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Multiline text & paragraph spacing support */
.whitespace-pre-line,
p[data-tr],
div[data-tr] {
  white-space: pre-line;
}


/* Brand Color Utility Classes bound to dynamic CSS variables */
.bg-brand-bg { background-color: var(--brand-bg) !important; }
.bg-brand-sand { background-color: var(--brand-sand) !important; }
.bg-brand-emerald { background-color: var(--brand-emerald) !important; }
.bg-brand-apricot { background-color: var(--brand-apricot) !important; }
.bg-brand-fig { background-color: var(--brand-fig, #5C3344) !important; }
.bg-brand-line { background-color: var(--brand-line) !important; }

.text-brand-emerald { color: var(--brand-emerald) !important; }
.text-brand-apricot { color: var(--brand-apricot) !important; }
.text-brand-ink { color: var(--brand-ink) !important; }
.text-brand-fig { color: var(--brand-fig, #5C3344) !important; }
.text-brand-line { color: var(--brand-line) !important; }

.border-brand-emerald { border-color: var(--brand-emerald) !important; }
.border-brand-apricot { border-color: var(--brand-apricot) !important; }
.border-brand-line { border-color: var(--brand-line) !important; }


/* Font Family Utilities */
.font-serif {
  font-family: "Cormorant Garamond", Georgia, serif !important;
}
.font-sans {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
.font-mono {
  font-family: "JetBrains Mono", "Courier New", monospace !important;
}

/* Subtle Noise Overlay - Kept very light just for texture */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

::selection {
  background-color: #D96C2D;
  color: #FFFFFF;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
  background: #234E35;
}
::-webkit-scrollbar-thumb:hover {
  background: #D96C2D;
}

/* Custom Scrollbar for Drawer / Modal */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #E5E0D8;
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #D96C2D;
}

/* Image Reveal Animation */
.reveal-wrap {
  overflow: hidden;
}
.reveal-image {
  transform: scale(1.1);
  transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.in-view .reveal-image {
  transform: scale(1);
}

/* GPU-Accelerated Micro-Animations (60 FPS Performance) */
.fade-in-up {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.in-view.fade-in-up,
.in-view .fade-in-up {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Stagger delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* Smooth interactive lift for cards and buttons */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.hover-lift:hover {
  transform: translate3d(0, -3px, 0);
}

/* Back to Top Floating Button */
#backToTopBtn {
  will-change: transform, opacity;
}
#backToTopBtn.show-btn {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) !important;
}

/* Staggered text reveal */
.fade-up-text {
  opacity: 0;
  transform: translate3d(0, 25px, 0);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.in-view.fade-up-text {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Marquee Animation */
.marquee-content {
  display: flex;
  animation: marquee 25s linear infinite;
  will-change: transform;
}
@keyframes marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* Custom Hover for Product Cards */
.product-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
  will-change: transform;
}
.product-card:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 20px 40px -10px rgba(35, 78, 53, 0.12);
  border-color: #234E35 !important;
}