/* ============================================================
   Canton Dragon Asian Grill & Bar — custom styles
   Tailwind handles layout/utilities; this file holds brand
   components, fonts, decorative motifs and animations.
   ============================================================ */

:root {
  --lacquer: #7B1113;
  --lacquer-600: #9B1B1D;
  --gold: #C8A24B;
  --gold-400: #D9BC73;
  --ink: #1A1310;
  --ivory: #FBF7F0;
  /* One signature easing curve used across the whole site, so motion feels authored */
  --ease: cubic-bezier(0.6, 0.01, 0.05, 0.99);
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
  /* Unified warm photographic grade — deepens shadows and pulls the cool fluorescent
     cast toward the lacquer/gold world so every photo reads as commissioned. */
  --img-grade: saturate(1.06) contrast(1.05) brightness(0.96) sepia(0.10);
}

/* Apply the house grade to photographic content (not the logo or promo graphics) */
#about img,
.gallery-item img,
.card-stack-item img { filter: var(--img-grade); }

html { -webkit-tap-highlight-color: transparent; }
body {
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
}

/* Deliberate brand-matched keyboard-focus ring, replacing the browser default
   outline. :focus-visible (not :focus) so it only appears for keyboard/
   assistive-tech navigation, not incidental mouse clicks. */
:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
}

/* Fraunces is variable — let optical sizing track the type scale, and tune display copy.
   Oldstyle figures + ligatures give running serif text an editorial, set-by-hand feel
   (stats override back to tabular lining figures via .stat-num). */
.font-display, .font-serif {
  font-optical-sizing: auto;
  letter-spacing: -0.012em;
  font-feature-settings: "onum" 1, "liga" 1, "dlig" 1, "calt" 1;
}
h1.font-display, h2.font-display { letter-spacing: -0.02em; }

/* The markup uses font-500…font-900 utilities — make them real weights */
.font-300 { font-weight: 300; }
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }
.font-900 { font-weight: 900; }

/* ---------- Buttons ---------- */
.btn-gold,
.btn-ghost,
.btn-outline,
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border-radius: 9999px;
  padding: .8rem 1.6rem;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease,
              border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.btn-gold {
  background: var(--gold);
  color: #2a1d05;
  box-shadow: 0 10px 25px -12px rgba(200,162,75,.7);
}
.btn-gold:hover { background: #d9bc73; box-shadow: 0 14px 30px -10px rgba(200,162,75,.85); }
.btn-gold:active { transform: translateY(1px); }

.btn-ghost {
  background: rgba(251,247,240,.08);
  color: var(--ivory);
  border: 1px solid rgba(251,247,240,.35);
  backdrop-filter: blur(4px);
  padding-right: 0.45rem;
}
.btn-ghost:hover { background: rgba(251,247,240,.16); border-color: rgba(251,247,240,.6); }

/* Button-in-Button: nested icon circle sits flush against the right edge */
.btn-ghost-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 9999px;
  background: rgba(251,247,240,.10);
  border: 1px solid rgba(251,247,240,.18);
  flex-shrink: 0;
  transition: transform .5s var(--ease-out), background-color .35s var(--ease), border-color .35s var(--ease);
}
.btn-ghost:hover .btn-ghost-icon {
  transform: translate(2px, -1.5px) scale(1.1);
  background: rgba(251,247,240,.18);
  border-color: rgba(251,247,240,.35);
}
.btn-ghost:active .btn-ghost-icon {
  transform: translate(1px, 0px) scale(1.0);
}

.btn-outline {
  background: transparent;
  color: var(--ivory);
  border: 1px solid rgba(251,247,240,.28);
}
.btn-outline:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }

.btn-dark {
  background: rgba(251,247,240,.06);
  color: var(--ivory);
  border: 1px solid rgba(251,247,240,.16);
}
.btn-dark:hover { background: var(--gold); color: #2a1d05; border-color: var(--gold); }

/* ---------- Nav ---------- */

/* Option B — always-glass elevated full-width nav */
#navbar {
  background: rgba(20,16,14,.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(200,162,75,.10);
}

/* Logo shrinks smoothly on scroll to stop blocking content */
#navbar img {
  max-height: 8rem;
  transition: max-height 0.5s var(--ease);
}
#navbar.scrolled img {
  max-height: 3.25rem;
}

.nav-link {
  position: relative;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ivory);
  transition: color .3s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  height: 1.5px; width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.nav-link:hover { color: var(--gold-400); }
.nav-link:hover::after { transform: scaleX(1); }

/* Scrolled state — deepens the glass as you move down the page */
#navbar.scrolled {
  background: rgba(20,16,14,.94);
  border-bottom: 1px solid rgba(200,162,75,.22);
  box-shadow: 0 8px 32px -8px rgba(0,0,0,.75);
}
#navbar.scrolled .nav-link { color: var(--ivory); }
#navbar.scrolled .nav-link:hover { color: var(--gold-400); }
#navbar.scrolled #menuBtn { color: var(--ivory); }

/* ── Hamburger morph ─────────────────────────────────────── */
.ham-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 22px;
  height: 22px;
}
.ham-bar {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transform-origin: center;
  transition: transform .45s var(--ease), opacity .3s ease;
}
#menuBtn.is-open .ham-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#menuBtn.is-open .ham-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
#menuBtn.is-open .ham-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobile nav: backdrop + right-slide panel ────────────── */
#mobileMenu {
  pointer-events: none;
}
#mobileMenu.is-open {
  pointer-events: auto;
}
#mobileBackdrop {
  opacity: 0;
  background: rgba(14,11,9,.55);
  transition: opacity .42s var(--ease);
}
#mobileBackdrop.is-open { opacity: 1; }

#mobilePanel {
  width: min(72vw, 320px);
  background: rgba(14,11,9,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: translateX(100%);
  transition: transform .46s var(--ease);
  will-change: transform;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem 1.5rem 2.5rem;
}
#mobilePanel.is-open { transform: translateX(0); }

.mobile-overlay-close {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 9999px;
  background: rgba(251,247,240,.07);
  border: 1px solid rgba(251,247,240,.14);
  color: var(--ivory);
  transition: background .25s ease, transform .35s var(--ease-out);
}
.mobile-overlay-close:hover { background: rgba(251,247,240,.14); transform: rotate(90deg); }

/* Large staggered nav links */
.mobile-overlay-link {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ivory);
  padding: .55rem 0;
  border-bottom: 1px solid rgba(251,247,240,.07);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease-out) var(--d, 0s),
              transform .7s var(--ease-out) var(--d, 0s),
              color .25s ease;
}
nav .mobile-overlay-link:last-child { border-bottom: none; }
.mobile-overlay-link:hover { color: var(--gold-400); }
.mobile-overlay-link.in { opacity: 1; transform: translateY(0); }

/* CTA group — same entry animation, no text overrides */
.mobile-cta-group {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease-out) var(--d, 0s),
              transform .7s var(--ease-out) var(--d, 0s);
}
.mobile-cta-group.in { opacity: 1; transform: translateY(0); }

/* ---------- Section helpers ---------- */
.section-eyebrow {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .32em;
  /* Bumped from .42 → .60 so the eyebrow clears WCAG AA (~4.5:1) on charcoal */
  color: rgba(251,247,240,.60);
}
/* Eyebrows with an explicit gold class keep their color (two-class specificity wins cascade) */
.section-eyebrow.text-gold-400 { color: var(--gold-400); }

/* Pill badge variant — wraps section eyebrows in a hairline gold-tinted capsule */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.2rem 0.8rem;
  border: 1px solid rgba(200,162,75,.22);
  background: rgba(200,162,75,.07);
  color: var(--gold-400);
}
/* Suppress the underline draw-in — the pill frame replaces it */
.section-eyebrow.eyebrow-pill::after { display: none; }

.info-icon {
  display: grid;
  place-items: center;
  flex: none;
  height: 2.75rem; width: 2.75rem;
  border-radius: 9999px;
  background: rgba(251,247,240,.06);
  color: rgba(251,247,240,.38);
}

.social-btn {
  display: grid;
  place-items: center;
  height: 2.6rem; width: 2.6rem;
  border-radius: 9999px;
  color: rgba(251,247,240,.32);
  background: rgba(251,247,240,.05);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.social-btn:hover { background: var(--gold); color: #2a1d05; transform: translateY(-2px); }
.social-btn--dark { color: rgba(251,247,240,.32); background: rgba(251,247,240,.06); }
.social-btn--dark:hover { background: var(--gold); color: #2a1d05; }

.footer-link { transition: color .2s ease; }
.footer-link:hover { color: var(--gold-400); }

/* ---------- Menu tabs ---------- */
.menu-tab {
  flex: none;
  white-space: nowrap;
  border-radius: 9999px;
  padding: .6rem 1.15rem;
  font-size: .85rem;
  font-weight: 500;
  color: rgba(251,247,240,.62);
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.menu-tab:hover { color: var(--ivory); }
.menu-tab.active { background: var(--lacquer); color: var(--ivory); }

/* Shrink the pill to hug the tabs rather than stretching full-width */
#menuTabs, #barTabs, #menuGroupTabs, #barGroupTabs {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Primary group tier — larger, bolder, bare (no capsule chrome) so it reads as
   the top level above the smaller pill-capsule fine-tab strip beneath it. */
.menu-tabs--primary .menu-tab {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  padding: .4rem 1.1rem;
  color: rgba(251,247,240,.6);
}
.menu-tabs--primary .menu-tab:hover { color: var(--ivory); }
.menu-tabs--primary .menu-tab.active { color: var(--ivory); }

/* Hide scrollbar on the tab strip but keep it scrollable */
.menu-tabs { scrollbar-width: none; }
.menu-tabs::-webkit-scrollbar { display: none; }

/* Mobile-only separator — complements the desktop-only <br class="hidden sm:block">
   in the Highlights sub-heading. On mobile the <br> collapses to nothing, so this
   dot fills the gap; on sm+ the line break itself is the separator, so this hides.
   (Precompiled Tailwind here has no sm:hidden utility, hence the bespoke class.) */
.mobile-only-dot { display: inline; }
@media (min-width: 640px) {
  .mobile-only-dot { display: none; }
}

/* ---------- Menu item rows ---------- */
.menu-item {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(251,247,240,.09);
}
.menu-item__lead {
  flex: 2;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  min-width: 0;
}
.menu-item__name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.menu-item__name { font-weight: 600; color: var(--ivory); }
.menu-item__dots {
  flex: 1;
  height: 1px;
  margin: 0 .3rem;
  background-image: radial-gradient(currentColor 1px, transparent 1.4px);
  background-size: 7px 7px;
  background-position: bottom;
  background-repeat: repeat-x;
  color: rgba(251,247,240,.2);
  transform: translateY(-3px);
}
.menu-item__price { font-weight: 600; color: var(--gold-400); white-space: nowrap; }
.menu-item__desc { margin-top: .25rem; font-size: .9rem; line-height: 1.5; color: var(--ivory); opacity: .68; }

.spice-tag {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #E0857A;
  border: 1px solid rgba(224,133,122,.4);
  border-radius: 9999px;
  padding: .05rem .4rem;
  transform: translateY(-1px);
}

.signature-tag {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gold-400);
  border: 1px solid rgba(200,162,75,.4);
  border-radius: 9999px;
  padding: .05rem .4rem;
  transform: translateY(-1px);
}

/* Filled (vs. signature-tag's outline) so "Most Popular" outranks "Signature" at a glance */
.popular-tag {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #2a1d05;
  background: var(--gold-400);
  border-radius: 9999px;
  padding: .05rem .45rem;
  white-space: nowrap;
  transform: translateY(-1px);
}

/* ---------- Bar menu sub-groups (wine tiers, beer by country, etc.) ---------- */
.menu-group + .menu-group { margin-top: 2.75rem; }
.menu-group__label {
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--gold-400);
  margin-bottom: 1rem;
}

/* ---------- Bar hero image (Summer Specials promo banner) ---------- */
.bar-hero-img {
  display: block;
  width: 100%;
  max-width: 680px;
  margin: 0 auto 2rem;
  border-radius: 0.75rem;
  object-fit: cover;
  aspect-ratio: 16/9;
  box-shadow: 0 4px 24px rgba(0,0,0,.45);
}

/* ---------- Decorative dragon-scale pattern ---------- */
.scale-pattern {
  background-image: radial-gradient(circle at 50% 100%, transparent 9px, var(--gold) 9px, var(--gold) 10px, transparent 10px);
  background-size: 28px 18px;
  background-position: 0 0, 14px 9px;
}

/* ============================================================
   Animations
   ============================================================ */
.reveal-up,
.reveal-img {
  opacity: 0;
  will-change: transform, opacity;
}
.reveal-up { transform: translateY(28px); }
.reveal-img { transform: translateY(36px) scale(.98); }

.reveal-up.in,
.reveal-img.in {
  opacity: 1;
  transform: none;
  transition: opacity .8s cubic-bezier(.16,.84,.44,1) var(--d, 0s),
              transform .9s cubic-bezier(.16,.84,.44,1) var(--d, 0s);
}

/* Clip-path reveal — ink-on-paper wipe for headings & the about image */
.reveal-clip {
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
}
.reveal-clip.in {
  clip-path: inset(0 0 0% 0);
  transition: clip-path .9s cubic-bezier(.16,.84,.44,1) var(--d, 0s);
}

/* Scroll cue */
.scroll-cue {
  animation: cue 1.8s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue {
  0%, 100% { transform: scaleY(.4); opacity: .4; }
  50%      { transform: scaleY(1);  opacity: 1; }
}

/* Hero matte "frame" panels — solid charcoal, animated via transform only */
.hero-matte {
  background: var(--ink);
  background: #14100E;
}

/* Hero content — revealed by scroll progress (driven inline from JS).
   Starts hidden; JS sets opacity/transform per frame. */
.hero-anim {
  opacity: 0;
  transform: translateY(26px);
  will-change: opacity, transform;
}

/* Hero headline / copy: revealed word-by-word as a scroll-driven wave.
   Text containers stay hidden until JS has split words & taken over. */
.hero-text { opacity: 0; text-shadow: 0 1px 22px rgba(0, 0, 0, .45); }
.hero-text.ready { opacity: 1; }

/* The accented headline word sits over the gold-washed duotone, where a muted
   gold (--gold-400) sinks into the background. Use a brighter champagne gold and
   a darker halo so the word reads as the clear focal point of the line. */
.hero-accent {
  color: #F2D88A;
  text-shadow: 0 2px 10px rgba(20, 16, 14, .85), 0 1px 26px rgba(0, 0, 0, .5);
}

/* Left-anchored scrim that protects the headline once the (lighter) image is
   fully revealed. Strong on the left where the copy sits, fully clear on the
   right so the food photography stays bright. */
.hero-textscrim {
  background: linear-gradient(
    90deg,
    rgba(20, 16, 14, .92) 0%,
    rgba(20, 16, 14, .70) 30%,
    rgba(20, 16, 14, .35) 48%,
    transparent 64%
  );
}
.hero-word {
  display: inline-block;
  opacity: 0;            /* JS ramps this per word from the reveal "head" */
  transform: translateY(8px);
}
/* The decorative gold dash reveals with the first words. */
.hero-dash { opacity: 0; }

/* Mobile: strengthen hero text legibility — the food photo sits right behind copy */
@media (max-width: 1023px) {
  /* Widen and deepen the scrim so it covers the full text column on narrow screens */
  .hero-textscrim {
    background: linear-gradient(
      90deg,
      rgba(20, 16, 14, .97) 0%,
      rgba(20, 16, 14, .90) 40%,
      rgba(20, 16, 14, .70) 62%,
      rgba(20, 16, 14, .35) 80%,
      transparent 100%
    );
  }
  /* Additional bottom scrim: darkens the button/subhead row */
  #heroTrack .hero-textscrim::after {
    content: '';
    position: absolute;
    inset: 45% 0 0 0;
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(20, 16, 14, .72) 80%
    );
    pointer-events: none;
  }
  /* Text shadow so headlines stay legible even over bright food */
  #heroTrack h1 {
    text-shadow: 0 2px 24px rgba(14,11,9,.85), 0 1px 6px rgba(14,11,9,.95);
  }
  #heroTrack .hero-text:not(h1):not(p:first-child) {
    text-shadow: 0 1px 12px rgba(14,11,9,.9);
  }
  /* Make ghost button more visible against busy photo */
  .btn-ghost {
    background: rgba(251,247,240,.14);
    border-color: rgba(251,247,240,.55);
  }
}

/* Duotone hero — gold wash: a static diagonal gold sweep + corner glow laid over the
   charcoal/gold duotone image. Screen blend lifts the gold in shadow areas without a
   video. No animation here; the hero's motion is the JS-driven scale + matte reveal. */
.hero-goldwash {
  background:
    radial-gradient(115% 85% at 84% 14%, rgba(217,188,115,.20), transparent 55%),
    linear-gradient(116deg, transparent 52%, rgba(200,162,75,.12) 78%, rgba(244,224,164,.05) 100%);
  mix-blend-mode: screen;
}

/* ============================================================
   Bespoke micro-interactions
   ============================================================ */

/* Buttons share the signature easing + a subtle spring */
.btn-gold, .btn-ghost, .btn-outline, .btn-dark {
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), box-shadow .45s var(--ease),
              transform .5s var(--ease-out);
}

/* Magnetic targets: JS nudges --mx/--my toward the cursor; CSS animates the spring back */
.magnetic { transition: transform .6s var(--ease-out); }

/* Animated link underline for inline / footer links */
.link-underline {
  position: relative;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  height: 1px; width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease);
}
.link-underline:hover::after { transform-origin: left; transform: scaleX(1); }

.footer-link { position: relative; transition: color .3s var(--ease); }
.footer-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  height: 1px; width: 100%;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.footer-link:hover::after { transform-origin: left; transform: scaleX(1); }

/* Sliding indicator behind the menu tabs */
.menu-tabs { position: relative; }
.menu-tab-indicator {
  position: absolute;
  top: 6px; left: 0;
  height: calc(100% - 12px);
  border-radius: 9999px;
  background: var(--lacquer);
  /* Positioned via `left` (layout) rather than `transform`. A transform-based pill can
     stick on some renderers (the composited layer doesn't repaint from script-set
     transforms); animating `left` is reliable for a click-triggered indicator. */
  transition: left .45s var(--ease), width .45s var(--ease);
  z-index: 0;
  pointer-events: none;
}
.menu-tab { position: relative; z-index: 1; }
.menu-tab.active { background: transparent; color: var(--ivory); }
.menu-tab.active:hover { background: transparent; }

/* Summer Specials pill: art-deco gold fan tile stands in for the flat lacquer
   fill, bordered so it still reads as a pill against the dark page background. */
.menu-tab-indicator--summer {
  background-image: url('../assets/patterns/fan-deco.svg?v=2');
  background-size: 30px 30px;
  background-repeat: repeat;
  background-position: center;
  border: 1px solid rgba(217,188,115,0.45);
}
.menu-tab.active[data-target="barpanel-summer"] {
  text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.6);
}

/* Count-up stats use tabular figures so they don't jitter while animating */
.stat-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Bar marquee — continuous horizontal scroll of dish photos */
.marquee-mask {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.marquee-track {
  width: max-content;
  animation: marquee 48s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-item {
  flex: none;
  height: 11rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.8);
}
@media (min-width: 768px) { .marquee-item { height: 15rem; } }
.marquee-item img { height: 100%; width: 100%; object-fit: cover; display: block; }
/* Alternating tilt for a playful, scattered feel */
.marquee-item:nth-child(odd)  { transform: rotate(-2deg); }
.marquee-item:nth-child(even) { transform: rotate(5deg); }

/* Gallery item hover */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  cursor: pointer;
}
.gallery-item img {
  height: 100%; width: 100%;
  object-fit: cover;
  transition: filter .55s ease, transform .65s cubic-bezier(.16,.84,.44,1);
}
/* Spotlight: pointer devices only — touch grids must never get stuck in the dimmed state */
@media (hover: hover) and (pointer: fine) {
  #galleryGrid:hover .gallery-item img {
    filter: var(--img-grade) brightness(0.3) saturate(0.45);
  }
  #galleryGrid:hover .gallery-item:hover img {
    filter: var(--img-grade);
    transform: scale(1.04);
  }
}
.gallery-item::after { display: none; }

/* Gallery caption — spotlight approach replaces slide-up; caption hidden */
.gallery-caption { display: none; }

/* Signature cards */
.sig-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  background: #1C1714;
  border: 1px solid rgba(251,247,240,.08);
  height: 22rem;
}
.sig-card img {
  height: 100%; width: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.16,.84,.44,1);
}
.sig-card:hover img { transform: scale(1.04); }
.sig-card__overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2.5rem 1.25rem 1.5rem;
  background: linear-gradient(to top, rgba(20,16,14,.96) 55%, transparent 100%);
  transform: translateY(100%);
  transition: transform .52s cubic-bezier(.16,.84,.44,1);
}
.sig-card:hover .sig-card__overlay { transform: translateY(0); }
@media (hover: none) { .sig-card__overlay { transform: translateY(0); } }

/* ── Highlight#2 — 4-panel image reveal cards ──────────────
   Four portrait cards visible simultaneously. Each card's
   background image slowly scales + fades in on scroll entry,
   with staggered delay per card. No switching — all four
   panels are always in view. */
.hl2-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 0.75rem;
}
.hl2-card {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  min-height: max(600px, 62svh);
  background: #1C1714;
  box-shadow: 0 0 0 1px rgba(200,162,75,.07),
              0 24px 48px -12px rgba(0,0,0,.55);
  transition: box-shadow 0.45s var(--ease), transform 0.5s var(--ease-out);
}
/* Gold hairline border materialises on hover */
.hl2-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(200,162,75,0);
  pointer-events: none;
  z-index: 6;
  transition: border-color 0.45s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .hl2-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 0 1px rgba(200,162,75,.25),
                0 36px 68px -12px rgba(0,0,0,.72);
  }
  .hl2-card:hover::after { border-color: rgba(200,162,75,.28); }
}

/* Background container — reveal animates on .in; hover nudges scale */
.hl2-card__bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.09);
  will-change: transform, opacity;
  transition: transform 2.2s cubic-bezier(.16,.84,.44,1) var(--delay, 0s),
              opacity 1.6s ease var(--delay, 0s);
}
.hl2-card.in .hl2-card__bg {
  transform: scale(1);
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .hl2-card:hover .hl2-card__bg {
    transform: scale(1.04);
    transition: transform 1s cubic-bezier(.16,.84,.44,1);
  }
}

/* Stacked images — crossfade between them; only .active is visible */
.hl2-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--img-grade) brightness(0.82);
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hl2-bg-img.active { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .hl2-card:hover .hl2-bg-img.active {
    filter: var(--img-grade) brightness(1.0);
    transition: filter 0.5s ease;
  }
}

/* Gradient scrim — protects legibility of text at top + bottom */
.hl2-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(14,11,9,.18) 0%,
    transparent 28%,
    transparent 44%,
    rgba(14,11,9,.72) 74%,
    rgba(14,11,9,.94) 100%
  );
}

/* Foreground content */
.hl2-card__content {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem;
}
@media (min-width: 1024px) { .hl2-card__content { padding: 1.5rem; } }

.hl2-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.5rem;
}

.hl2-card__tag {
  flex: none;
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #2a1d05;
  background: var(--gold);
  padding: 0.22rem 0.65rem;
  border-radius: 9999px;
  line-height: 1.65;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.5s ease calc(var(--delay, 0s) + 0.38s),
              transform 0.6s var(--ease-out) calc(var(--delay, 0s) + 0.38s);
}
.hl2-card.in .hl2-card__tag {
  opacity: 1;
  transform: translateY(0);
}
.hl2-card__tag--curated {
  background: transparent;
  border: 1px solid rgba(251,247,240,.45);
  color: rgba(251,247,240,.9);
  transition: opacity 0.5s ease calc(var(--delay, 0s) + 0.38s),
              transform 0.6s var(--ease-out) calc(var(--delay, 0s) + 0.38s),
              background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

/* Bottom text block fades up after the image finishes revealing */
.hl2-card__bottom {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.75s ease calc(var(--delay, 0s) + 0.58s),
              transform 0.85s var(--ease-out) calc(var(--delay, 0s) + 0.58s);
}
.hl2-card.in .hl2-card__bottom {
  opacity: 1;
  transform: translateY(0);
}
.hl2-card__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1rem, 1.55vw, 1.4rem);
  font-weight: 700;
  color: var(--ivory);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.hl2-card__desc {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(251,247,240,.58);
}

.hl2-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-400);
  transition: color .25s ease;
}
.hl2-card__cta:hover { color: var(--ivory); }
/* Arrow nudges right on hover via transform (no layout thrash) */
.hl2-card__cta span { display: inline-block; transition: transform .25s var(--ease); }
.hl2-card__cta:hover span { transform: translateX(4px); }

/* Image-cycling dot controls */
.hl2-dots {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.hl2-dot {
  /* Fixed width; active state uses scaleX to avoid layout-thrash width animation */
  width: 14px;
  height: 5px;
  border-radius: 9999px;
  background: rgba(251,247,240,.3);
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transform: scaleX(0.36);
  transform-origin: left;
  transition: background .3s ease, transform .3s ease;
}
.hl2-dot.active {
  transform: scaleX(1);
  background: var(--gold-400);
}

.pin-info {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3rem;
  background: var(--pin-bg, #14100E);
  overflow: visible;
}
@media (min-width: 1024px) { .pin-info { padding: 4rem; } }
.pin-img {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
}

/* Card stack layout */
.card-stack-host { background: transparent; }
.card-stack-item {
  position: absolute;
  width: 260px;
  height: 365px;
  border-radius: 1.5rem;       /* outer shell radius */
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.4s ease;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  background: rgba(22,18,15,.98); /* warm dark frame — shows as ~4px around the photo */
  padding: 4px;
  border: 1px solid rgba(251,247,240,.09);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.65), 0 0 0 1px rgba(200,162,75,.07);
}
.card-stack-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  border-radius: calc(1.5rem - 5px); /* inner concentric radius */
}
.card-stack-item::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px; bottom: 4px; left: 4px; /* align with inner image area */
  background: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 40%, rgba(0,0,0,0.3) 100%);
  border-radius: calc(1.5rem - 5px);
  pointer-events: none;
}
.card-stack-dots {
  position: absolute;
  right: -2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 10;
}
.card-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.25);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.card-dot.active {
  height: 22px;
  border-radius: 3px;
  background: rgba(255,255,255,0.85);
}
.pin-ghost {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200%;
  display: flex;
  align-items: center;
  pointer-events: none;
  user-select: none;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(3.5rem, 7vw, 10rem);
  font-style: italic;
  line-height: 0.82;
  color: rgba(255,255,255,.10);
  font-weight: 600;
  white-space: nowrap;
  overflow: visible;
  padding: 0 3rem;
  letter-spacing: -0.02em;
  z-index: 0;
}
.pin-spec {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 20px;
  align-items: baseline;
}

/* ── Highlight#2 mobile overrides ──────────────────────────
   2×2 grid on tablets/phones; single column on very small
   screens. Description text hidden to keep cards clean. */
@media (max-width: 767px) {
  .hl2-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  .hl2-card { min-height: 340px; }
  .hl2-card__content { padding: 0.9rem; }
  .hl2-card__title { font-size: clamp(0.88rem, 4vw, 1.05rem); }
  .hl2-card__desc { display: none; }
}
@media (max-width: 380px) {
  .hl2-grid { grid-template-columns: 1fr; }
  .hl2-card { min-height: 300px; }
}

/* ---------- Additional micro-interactions ---------- */

/* 1. Gold CTA glint sweep */
.btn-gold { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform .6s var(--ease-out);
  pointer-events: none;
}
.btn-gold:hover::after { transform: translateX(130%); }

/* 2. Section eyebrow underline draws in on reveal */
.section-eyebrow { position: relative; }
.section-eyebrow::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  height: 1px; width: 0;
  background: linear-gradient(90deg, rgba(251,247,240,.3), transparent);
  transition: width .9s var(--ease-out) .3s;
}
.section-eyebrow.in::after { width: 100%; }

/* 3. Menu item hover — left accent bar + name/price shift */
.menu-item { position: relative; padding-left: .75rem; }
.menu-item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 2px; height: 1.25em;
  background: var(--gold-400);
  border-radius: 1px;
  transition: transform .35s var(--ease-out);
  transform-origin: center;
}
.menu-item:hover::before { transform: translateY(-50%) scaleY(1); }
.menu-item:hover { background: rgba(200,162,75,.05); }
.menu-item__name { transition: color .3s var(--ease), transform .3s var(--ease); }
.menu-item__price { transition: color .3s var(--ease), transform .35s var(--ease-out); }
/* Name stays ivory on hover — the gold accent bar is the single gold cue, so gold
   stays rare and the row reads as a quiet shift rather than a colour change. */
.menu-item:hover .menu-item__name { color: var(--ivory); transform: translateX(3px); }
.menu-item:hover .menu-item__price { transform: translateY(-2px); }

/* 4. Cocktail marquee — pause on hover; item straightens + lifts */
.marquee-item { transition: transform .45s var(--ease-out), box-shadow .45s ease; }
.marquee-mask:hover .marquee-track { animation-play-state: paused; }
.marquee-item:hover {
  transform: scale(1.05) rotate(0deg);  /* overrides nth-child tilt (equal specificity, later wins) */
  box-shadow: 0 28px 55px -20px rgba(0,0,0,.9);
  position: relative; z-index: 2;
}

/* 5. Visit info icon — glow ring on row hover */
.info-icon {
  transition: background-color .3s var(--ease),
              transform .35s var(--ease-out),
              box-shadow .3s var(--ease);
}
dl .flex:hover .info-icon {
  background: rgba(200,162,75,.18);
  color: var(--gold-400);
  transform: scale(1.1);
  box-shadow: 0 0 0 5px rgba(200,162,75,.1);
}

/* 6. About floating dish card — gentle zoom on hover */
.reveal-img.absolute img { transition: transform .7s var(--ease-out); }
.reveal-img.absolute:hover img { transform: scale(1.07); }

/* ── Accolade strip cell hover ───────────────────────────────── */
.accolade-cell {
  border-radius: .75rem;
  cursor: default;
}
/* Override the slow reveal-up transition for hover snappiness */
.reveal-up.in.accolade-cell {
  transition: transform .38s var(--ease-out), background-color .38s var(--ease);
}
.accolade-cell .font-display { transition: text-shadow .4s ease; }
.accolade-cell:hover { transform: translateY(-4px); background: rgba(200,162,75,.04); }
.accolade-cell:hover .font-display { text-shadow: 0 0 28px rgba(200,162,75,.6); }

/* ── Bar section — badge glint ───────────────────────────────── */
.bar-badge { position: relative; overflow: hidden; isolation: isolate; cursor: default; }
.bar-badge::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.28) 50%, transparent 72%);
  transform: translateX(-145%);
  transition: transform .65s var(--ease-out);
  pointer-events: none;
}
.bar-badge:hover::after { transform: translateX(145%); }

/* ── Bar section — headline word hover float ─────────────────── */
.bar-word { cursor: default; }
/* Three-class specificity wins over .reveal-up.in (two classes) */
.reveal-up.in.bar-word { transition: transform .4s var(--ease-out), color .35s ease; }
.bar-word:hover { transform: translateY(-6px) !important; color: var(--gold-400); }

/* ── Signature: hand-painted brush underline ─────────────────
   One bespoke, brand-tied moment — a tapered gold ink stroke that
   paints itself left-to-right after the heading wipes in. Tied to
   the Cantonese / calligraphic heritage, used exactly once. */
.brush-underline {
  position: relative;
  display: inline-block;
  color: var(--gold-400);
}
.brush-underline::after {
  content: "";
  position: absolute;
  left: -3%; right: -3%;
  bottom: -0.16em;
  height: 0.34em;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2022'%20preserveAspectRatio='none'%3E%3Cpath%20d='M2,12%20C40,5%2082,5%20130,8%20C180,11%20232,5%20280,7%20C290,7.5%20297,9%20298,11%20C297,14.5%20290,15.5%20280,14%20C232,16.5%20180,11.5%20130,14.5%20C82,17.5%2040,17.5%202,12%20Z'%20fill='%23D9BC73'/%3E%3C/svg%3E") no-repeat left center / 100% 100%;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}
.reveal-clip.in .brush-underline::after {
  clip-path: inset(0 0 0 0);
  transition: clip-path .72s var(--ease-out) .6s;
}

/* Map container needs explicit height — min-h-[] arbitrary values aren't in pre-compiled Tailwind */
#visitMap {
  min-height: 420px;
  height: 100%;
}
@media (max-width: 639px) {
  #visitMap { min-height: 260px; }
}

/* ── Visit map container hover ring ─────────────────────────── */
.visit-map-wrap {
  position: relative;
  transition: box-shadow .45s var(--ease-out);
}
.visit-map-wrap:hover {
  box-shadow: 0 0 0 2px rgba(200,162,75,.4),
              0 28px 70px -20px rgba(200,162,75,.22),
              0 32px 64px -12px rgba(0,0,0,.65); /* preserve bezel ambient shadow */
}

/* ── Double-Bezel Card System ─────────────────────────────────
   Outer shell: hairline border + barely-there tint + deep shadow.
   Inner core: concentric radius + subtle top-edge highlight.
   ─────────────────────────────────────────────────────────── */
.bezel-outer {
  padding: 0.375rem;
  border-radius: 1.75rem;
  background: rgba(251,247,240,.025);
  border: 1px solid rgba(251,247,240,.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 32px 64px -12px rgba(0,0,0,.65),
    0 0 0 1px rgba(200,162,75,.05);
  transition: transform 0.4s var(--ease-out),
              box-shadow 0.4s var(--ease);
}
/* Lift only when wrapping a promo card */
.bezel-outer:has(.promo-card):hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 44px 72px -12px rgba(0,0,0,.75),
    0 0 0 1px rgba(200,162,75,.14);
}
.bezel-inner {
  border-radius: calc(1.75rem - 0.375rem); /* ≈1.375rem — concentric */
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.05);
}

/* Ivory photo-mat bezel (About floating card) */
.bezel-photo {
  padding: 4px;
  border-radius: 1.25rem;
  background: rgba(251,247,240,.88);
  box-shadow: 0 24px 56px -8px rgba(0,0,0,.82),
              inset 0 1px 0 rgba(255,255,255,.5),
              0 0 0 1px rgba(251,247,240,.12);
}
.bezel-photo-inner {
  border-radius: calc(1.25rem - 4px); /* ≈0.875rem */
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.22);
}

/* ---------- Specials / Promo cards ---------- */
.promo-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.22rem 0.75rem;
  font-family: var(--font-sans, 'Hanken Grotesk', system-ui, sans-serif);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  border-radius: 9999px;
  line-height: 1.7;
  z-index: 10;
}
.promo-badge--gold    { background: rgba(200,162,75,0.92); color: #14100E; }
.promo-badge--lacquer { background: rgba(123,17,19,0.90);  color: #FBF7F0; }
.promo-badge--neutral {
  background: rgba(251,247,240,0.10);
  border: 1px solid rgba(251,247,240,0.28);
  color: #FBF7F0;
  backdrop-filter: blur(4px);
}

/* Accolade strip — fix divide-x behaviour in 2-col mobile grid.
   Tailwind's divide-x adds border-left to every sibling after the first,
   which in a 2-col grid gives the bottom-left cell an unwanted left border.
   Override: remove all dividers, then re-apply the right column separator
   for row 1 and a top border for both cells in row 2. */
@media (max-width: 639px) {
  #accolades > div > * + * { border-left-width: 0; }
  #accolades > div > *:nth-child(2)  { border-left: 1px solid rgba(251,247,240,.1); }
  #accolades > div > *:nth-child(3),
  #accolades > div > *:nth-child(4)  { border-top: 1px solid rgba(251,247,240,.1); }
  #accolades > div > *:nth-child(4)  { border-left: 1px solid rgba(251,247,240,.1); }
}


/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-up, .reveal-img { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal-clip { clip-path: none !important; }
  .scroll-cue, .hero-bg { animation: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── Gallery editorial heading ──────────────────────────── */
.gallery-editorial-head {
  font-size: clamp(2rem, 8vw, 6.5rem);
  font-style: italic;
  line-height: 0.88;
  letter-spacing: -0.025em;
}