/* ============================================
   HATERS FOOD CLUB - Custom Styles
   Brand-inspired template system
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

/* --- Design Tokens --- */
:root {
  /* Haters Food Club Palette */
  --color-primary: #8B1A1A;
  --color-primary-dark: #6B1010;
  --color-primary-light: #A82828;
  --color-cream: #C8A96E;
  --color-cream-light: #D4BC8A;
  --color-cream-dark: #B08E4A;
  --color-black: #0A0A0A;
  --color-white: #FFFDF8;
  --color-dark: #1A1A1A;
  --color-gray-900: #2A2A2A;
  --color-gray-700: #4A4A4A;
  --color-gray-500: #717171;
  --color-gray-300: #B0B0B0;
  --color-gray-100: #F0EDE8;
  --color-warm-bg: #FAF7F2;

  /* Typography */
  --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-accent: 'Playfair Display', Georgia, serif;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.4s ease;

  /* Border Radius */
  --radius-pill: 9999px;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Animations --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes heroTextReveal {
  from { opacity: 0; transform: translateY(20px); letter-spacing: 0.3em; }
  to { opacity: 1; transform: translateY(0); letter-spacing: 0.15em; }
}
@keyframes flame {
  0%, 100% { transform: scaleY(1) rotate(0deg); }
  25% { transform: scaleY(1.05) rotate(-1deg); }
  50% { transform: scaleY(0.97) rotate(1deg); }
  75% { transform: scaleY(1.03) rotate(-0.5deg); }
}

.animate-fade-in-up { animation: fadeInUp 0.6s ease forwards; opacity: 0; }
.animate-fade-in { animation: fadeIn 0.4s ease forwards; opacity: 0; }
.animate-slide-left { animation: slideInLeft 0.6s ease forwards; opacity: 0; }
.animate-slide-right { animation: slideInRight 0.6s ease forwards; opacity: 0; }
.animate-scale-in { animation: scaleIn 0.5s ease forwards; opacity: 0; }
.animate-hero-text { animation: heroTextReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.animate-flame { animation: flame 2s ease-in-out infinite; }

.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; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* Scroll-triggered */
.scroll-animate {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.scroll-animate.is-visible { opacity: 1; transform: translateY(0); }
.scroll-animate-left {
  opacity: 0; transform: translateX(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.scroll-animate-left.is-visible { opacity: 1; transform: translateX(0); }
.scroll-animate-right {
  opacity: 0; transform: translateX(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.scroll-animate-right.is-visible { opacity: 1; transform: translateX(0); }
.scroll-animate-scale {
  opacity: 0; transform: scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.scroll-animate-scale.is-visible { opacity: 1; transform: scale(1); }

/* --- Buttons --- */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 0.85em 1.8em;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  font-size: 1rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.btn-primary:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 26, 26, 0.4);
}

.btn-cream {
  background-color: var(--color-cream);
  color: var(--color-dark);
  padding: 0.85em 1.8em;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  font-size: 1rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.btn-cream:hover {
  background-color: var(--color-cream-dark);
  transform: translateY(-2px);
}

.btn-dark {
  background-color: var(--color-dark);
  color: var(--color-white);
  padding: 0.85em 1.8em;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  font-size: 1rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.btn-dark:hover {
  background-color: var(--color-black);
  transform: translateY(-2px);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-cream);
  padding: 0.8em 1.8em;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: 2px solid var(--color-cream);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  font-size: 1rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.btn-outline:hover {
  background-color: var(--color-cream);
  color: var(--color-dark);
  transform: translateY(-2px);
}

.btn-outline-dark {
  background-color: transparent;
  color: var(--color-dark);
  padding: 0.8em 1.8em;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: 2px solid var(--color-dark);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  font-size: 1rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.btn-outline-dark:hover {
  background-color: var(--color-dark);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* --- Card Effects --- */
.card-hover {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.card-img-zoom { overflow: hidden; }
.card-img-zoom img, .card-img-zoom svg {
  transition: transform var(--transition-slow);
}
.card-img-zoom:hover img, .card-img-zoom:hover svg {
  transform: scale(1.08);
}

/* --- Navigation --- */
.nav-link {
  position: relative;
  color: var(--color-white);
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 0;
  transition: color var(--transition-fast);
  font-family: var(--font-primary);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background-color: var(--color-cream);
  transition: width var(--transition-base);
}
.nav-link:hover::after { width: 100%; }
.nav-link:hover { color: var(--color-cream); }

/* --- Hero --- */
.hero-overlay { position: relative; }
.hero-overlay::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.7) 100%);
  z-index: 1;
}
.hero-overlay > * { position: relative; z-index: 2; }

/* --- Grunge/Fire texture overlay --- */
.bg-texture {
  position: relative;
}
.bg-texture::after {
  content: '';
  position: absolute;
  inset: 0;
  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");
  opacity: 0.03;
  pointer-events: none;
}

/* --- Section divider (fire stripe) --- */
.section-fire {
  position: relative;
}
.section-fire::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-cream), var(--color-primary));
}

/* --- Mobile Menu --- */
.mobile-menu {
  transform: translateX(100%);
  transition: transform var(--transition-base);
}
.mobile-menu.is-open { transform: translateX(0); }

/* --- Sticky Header --- */
.header-scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  background-color: rgba(10, 10, 10, 0.98) !important;
}

/* --- Focus (a11y) --- */
*:focus-visible {
  outline: 3px solid var(--color-cream);
  outline-offset: 2px;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-dark); }
::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); }

/* --- Menu item price dots --- */
.price-dots {
  flex: 1;
  border-bottom: 2px dotted var(--color-gray-300);
  margin: 0 0.5rem;
  min-width: 2rem;
  position: relative;
  top: -4px;
}