/* ===== CUSTOM STYLES — Mom & Pop Chicken Shop ===== */

/* ---- Fonts applied globally ---- */
body {
  font-family: 'DM Sans', sans-serif;
}

/* ---- Grain overlay ---- */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  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)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ---- Nav scroll styles ---- */
#navbar {
  background: transparent;
}
#navbar.scrolled {
  background: rgba(253, 246, 236, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}
#navbar.scrolled .nav-link {
  color: #1A1209;
}
#navbar:not(.scrolled) .nav-link {
  color: rgba(253, 246, 236, 0.8);
}
#navbar:not(.scrolled) > div > a > span:last-child {
  color: #FDF6EC;
}

/* ---- Hero headline sizing ---- */
.hero-headline {
  font-size: clamp(3.5rem, 10vw, 9rem);
}

/* ---- Hero food circle ---- */
.hero-food-circle {
  transform: translateY(0);
  animation: heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-20px) rotate(2deg); }
}

/* ---- Spinning badge ---- */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spin-slow 12s linear infinite;
}

/* ---- Hero pattern (dot grid) ---- */
.hero-pattern {
  background-image: radial-gradient(circle, rgba(245,166,35,0.4) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ---- Marquee ---- */
.marquee-inner {
  display: flex;
  animation: marqueeScroll 28s linear infinite;
  width: max-content;
}
.marquee-strip:hover .marquee-inner {
  animation-play-state: paused;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Gallery item hover ---- */
.gallery-item {
  overflow: hidden;
}
.gallery-item img {
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gallery-item:hover img {
  transform: scale(1.07);
}

/* ---- Menu cards hover shadow ---- */
.menu-card {
  position: relative;
}

/* ---- Smooth scroll ---- */
html {
  scroll-behavior: smooth;
}

/* ---- AOS FALLBACK — never invisible ---- */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Only reduce opacity for the initial pre-animate state when AOS loads properly */
body.aos-ready [data-aos]:not(.aos-animate) {
  opacity: 0 !important;
}
body.aos-ready [data-aos="fade-up"]:not(.aos-animate) {
  opacity: 0 !important;
  transform: translateY(30px) !important;
}
body.aos-ready [data-aos="fade-right"]:not(.aos-animate) {
  opacity: 0 !important;
  transform: translateX(-30px) !important;
}
body.aos-ready [data-aos="fade-left"]:not(.aos-animate) {
  opacity: 0 !important;
  transform: translateX(30px) !important;
}

/* ---- Button micro-interaction ---- */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  transition: opacity 0.2s;
}
.btn-primary:hover::after {
  opacity: 0.08;
}

/* ---- Hamburger open state ---- */
.menu-open .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-open .hamburger-line:nth-child(2) {
  opacity: 0;
}
.menu-open .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ---- Counter animation ---- */
.counter {
  display: inline-block;
}

/* ---- Focus styles ---- */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(232,75,28,0.3);
}

/* ---- Mobile menu panel ---- */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
#mobile-menu:not(.hidden) {
  max-height: 500px;
}

/* ---- Responsive hero image ---- */
@media (max-width: 768px) {
  .hero-food-circle {
    width: 220px;
    height: 220px;
  }
  #hero .absolute.right-0.top-0 {
    opacity: 0.4;
  }
}

/* ---- Scroll padding for sticky nav ---- */
:target {
  scroll-margin-top: 80px;
}