:root {
  --background: #0b0907;
  --surface: #161210;
  --surface-2: #1e1815;
  --foreground: #f6efe4;
  --muted: #a89d8d;
  --gold: #d4a24c;
  --gold-soft: #e8c384;
  --ember: #8a3a2c;
  --border-soft: rgba(212, 162, 76, 0.16);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  margin: 0;
}

.font-display {
  font-family: 'Playfair Display', Georgia, serif;
}

::selection {
  background: var(--gold);
  color: #14100c;
}

/* ---------- Reveal-on-scroll (replaces Framer Motion whileInView) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.in-view {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Staggered delays for grid children */
.stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------- Hero gradient mesh ---------- */
@keyframes mesh-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(4%, -6%) scale(1.08); }
  66% { transform: translate(-3%, 4%) scale(0.96); }
}
@keyframes mesh-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-6%, 5%) scale(1.12); }
}
@keyframes mesh-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(5%, 3%) scale(0.94); }
  70% { transform: translate(-4%, -5%) scale(1.05); }
}
.animate-mesh-1 { animation: mesh-drift-1 22s ease-in-out infinite; }
.animate-mesh-2 { animation: mesh-drift-2 26s ease-in-out infinite; }
.animate-mesh-3 { animation: mesh-drift-3 30s ease-in-out infinite; }

.bg-noise {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
  background-size: 140px 140px;
}

/* ---------- Hookah smoke ---------- */
@keyframes smoke-rise {
  0% { transform: translate(0, 0) scale(0.5) rotate(0deg); opacity: 0; }
  15% { opacity: 0.8; }
  55% { opacity: 0.35; }
  100% { transform: translate(var(--sx, 40px), -105px) scale(1.5) rotate(var(--sr, 20deg)); opacity: 0; }
}
.smoke-wisp {
  position: absolute;
  bottom: 0;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(240,232,220,0.85) 0%, rgba(240,232,220,0.35) 45%, rgba(240,232,220,0) 75%);
  filter: blur(4px);
  animation-name: smoke-rise;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

/* ---------- WhatsApp pulse ---------- */
@keyframes wa-ping {
  0% { transform: scale(1); opacity: 0.5; }
  75%, 100% { transform: scale(1.9); opacity: 0; }
}
.wa-pulse {
  animation: wa-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ---------- Mobile menu ---------- */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
#mobile-menu.open {
  max-height: 400px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-mesh-1, .animate-mesh-2, .animate-mesh-3, .smoke-wisp, .wa-pulse { animation: none; }
  .reveal, .reveal-left, .reveal-right { transition: none; opacity: 1; transform: none; }
}