/* ═══════════════════════════════════════════
   China Star Milton — Custom Styles
   Stack: Tailwind CDN + Alpine.js + Inter
   ═══════════════════════════════════════════ */

[x-cloak] { display: none !important; }
html { scroll-behavior: smooth; }

/* Fade-in animation */
.fade-section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
}
.fade-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero parallax background */
.hero-bg {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
@media (max-width: 768px) {
  .hero-bg { background-attachment: scroll; }
}

/* Grain overlay */
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .04;
  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)'/%3E%3C/svg%3E");
}

/* Navbar glass effect */
.nav-glass {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

/* Menu card hover */
.menu-card {
  transition: transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.35s ease;
}
.menu-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(185, 28, 28, 0.15), 0 8px 20px -8px rgba(0,0,0,0.1);
}

/* Dish tag hover */
.flavour-tag {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.flavour-tag:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(185, 28, 28, 0.2);
}

/* CTA pulse animation */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.45); }
  70% { box-shadow: 0 0 0 14px rgba(185, 28, 28, 0); }
  100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0); }
}
.cta-pulse { animation: pulse-ring 2.5s infinite; }

/* Accent line (red → gold gradient) */
.accent-line {
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, #B91C1C, #D97706);
  border-radius: 2px;
}

/* FAQ accordion */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(.16,1,.3,1), padding 0.4s ease;
}
.faq-item.open .faq-answer { max-height: 400px; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform 0.3s ease; }

/* Mobile sticky CTA bar */
.mobile-sticky {
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(.16,1,.3,1);
}
.mobile-sticky.visible {
  transform: translateY(0);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #999; }
.dark ::-webkit-scrollbar-thumb { background: #444; }

/* Print styles */
@media print {
  .mobile-sticky, nav, footer, .fade-section { break-inside: avoid; }
  nav, .mobile-sticky { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  a[href^="tel:"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}