/* ============================================
   MONROE'S HOT CHICKEN — Custom Styles
   ============================================ */

/* --- AOS FALLBACK (never invisible) --- */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition-property: opacity, transform;
}
[data-aos].aos-animate {
  opacity: 1 !important;
  transform: none !important;
}

/* --- GRAIN OVERLAY --- */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  opacity: 0.4;
  mix-blend-mode: overlay;
}

/* --- NAV --- */
#navbar.scrolled {
  background: rgba(26, 16, 8, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(232, 57, 14, 0.12);
}

/* --- HERO --- */
.hero-bg {
  background: radial-gradient(ellipse 80% 80% at 70% 40%, rgba(232, 57, 14, 0.22) 0%, rgba(26, 16, 8, 0) 70%),
              radial-gradient(ellipse 60% 60% at 10% 80%, rgba(201, 147, 58, 0.08) 0%, transparent 70%),
              linear-gradient(160deg, #1A1008 0%, #2D2015 50%, #1A1008 100%);
}

.hero-pattern {
  background-image: radial-gradient(circle, rgba(232,57,14,0.12) 1px, transparent 1px);
  background-size: 40px 40px;
}

.flame-blob {
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(232, 57, 14, 0.18) 0%, rgba(255, 107, 53, 0.08) 40%, transparent 70%);
  filter: blur(20px);
}

/* --- MARQUEE --- */
.marquee-track {
  animation: marquee 28s linear infinite;
  width: max-content;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- ABOUT image bg --- */
.about-img-bg {
  background: linear-gradient(135deg, #2D2015 0%, #1A1008 40%, #3a1a08 100%);
}
.about-img-frame {
  background: linear-gradient(135deg, #2D2015, #1A1008);
}

/* --- MENU CARD GLOW --- */
.menu-card {
  position: relative;
  overflow: hidden;
}
.menu-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(232,57,14,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.menu-card:hover::before {
  background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(232,57,14,0.12) 0%, transparent 70%);
}
.featured-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% -20%, rgba(232,57,14,0.15), transparent 60%);
  pointer-events: none;
}

/* --- GALLERY grid items — real example food visuals --- */
.gallery-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gallery-bg-1 {
  background-image: linear-gradient(135deg, rgba(74,26,5,0.25) 0%, rgba(232,57,14,0.15) 100%),
                    url("https://images.unsplash.com/photo-1626082927389-6cd097cdc6ec?auto=format&fit=crop&w=1200&q=80");
  background-size: cover;
  background-position: center;
}
.gallery-bg-2 {
  background-image: linear-gradient(135deg, rgba(58,26,8,0.2) 0%, rgba(232,57,14,0.15) 100%),
                    url("https://images.unsplash.com/photo-1562967914-608f82629710?auto=format&fit=crop&w=800&q=80");
  background-size: cover;
  background-position: center;
}
.gallery-bg-3 {
  background-image: linear-gradient(135deg, rgba(32,21,8,0.25) 0%, rgba(74,32,16,0.2) 100%),
                    url("https://images.unsplash.com/photo-1550547660-d9450f859349?auto=format&fit=crop&w=800&q=80");
  background-size: cover;
  background-position: center;
}
.gallery-bg-4 {
  background-image: linear-gradient(135deg, rgba(26,16,8,0.25) 0%, rgba(232,57,14,0.15) 100%),
                    url("https://images.unsplash.com/photo-1567620832903-9fc6debc209f?auto=format&fit=crop&w=800&q=80");
  background-size: cover;
  background-position: center;
}
.gallery-bg-5 {
  background-image: linear-gradient(135deg, rgba(45,21,5,0.25) 0%, rgba(74,32,16,0.2) 100%),
                    url("https://images.unsplash.com/photo-1541592106381-b31e9677c0e5?auto=format&fit=crop&w=800&q=80");
  background-size: cover;
  background-position: center;
}

.gallery-item {
  min-height: 200px;
}
.gallery-item:first-child {
  min-height: 400px;
}

/* --- TESTIMONIAL CARD --- */
.testimonial-card {
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
}

/* --- SCROLL LINE ANIMATION --- */
.scroll-line {
  animation: scrollDown 2s ease-in-out infinite;
}
@keyframes scrollDown {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --- HAMBURGER ACTIVE STATE --- */
#hamburger.is-open .ham-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
#hamburger.is-open .ham-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
#hamburger.is-open .ham-line:nth-child(3) {
  width: 24px;
  transform: translateY(-8px) rotate(-45deg);
}
.ham-line {
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}

/* --- HEAT CARD --- */
.heat-card {
  cursor: default;
}

/* --- STAT CARD HOVER --- */
.stat-card {
  cursor: default;
}

/* --- CONTACT FORM inputs --- */
input, textarea {
  -webkit-appearance: none;
  appearance: none;
}

/* --- SMOOTH SCROLL --- */
html {
  scroll-behavior: smooth;
}

/* --- MOBILE MENU PANEL --- */
#mobile-menu {
  position: fixed;
  overflow-y: auto;
}

/* --- Font weight helpers --- */
.font-300 { font-weight: 300; }
.font-500 { font-weight: 500; }

/* --- Custom scrollbar --- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #1A1008; }
::-webkit-scrollbar-thumb { background: #E8390E; border-radius: 2px; }

/* --- Responsive gallery --- */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }
  .gallery-item:first-child {
    min-height: 260px;
  }
}

/* --- ensure body overflow on mobile menu open doesn't scroll --- */
body.menu-open {
  overflow: hidden;
}