/* ── At Our Table — the Tajik food scatter ─────────────────────────
     A #F5F6ED paper field of scattered illustrated plates (transparent,
     soft-shadowed WebP). Click a plate and GSAP Flip plays a "travel +
     expand": the very same plate flies to a centred focus while its name,
     story and a small ritual note reveal beside it; close / Esc / arrow
     keys browse and dismiss. An opaque paper backdrop fades up over the
     scatter as the focus opens (cleaner than Palmer's per-item alpha, and
     because the plates are transparent the focus view reads as the same
     sheet of paper). Native scroll — this section never pins; scroll is
     locked only while a plate is focused. Reduced-motion or a missing
     GSAP/Flip degrade to a plain cross-fade modal: no float, no travel. */
  .food{
    --food-paper: #F5F6ED;
    --food-gold:  #9a7b3e;            /* warm brown-gold accent that sits on the paper */
    position: relative;
    z-index: 1;                       /* paint above the fixed #gl shader */
    background: var(--food-paper);
    color: var(--ink);
    padding: clamp(72px, 11vh, 132px) max(clamp(20px, 4vw, 40px), env(safe-area-inset-left), env(safe-area-inset-right)) clamp(60px, 9vh, 104px);
    overflow: hidden;
    cursor: default;                  /* override the body's crosshair within this section */
  }

  /* intro copy — centred, echoing Our Story / Getting There */
  .food__intro{ position: relative; z-index: 2; max-width: 32em; margin: 0 auto; text-align: center; }
  .food__heading{
    font-family: 'LF Serif', 'Fraunces', Georgia, 'Times New Roman', serif;
    font-optical-sizing: auto; font-weight: 440;
    font-size: clamp(34px, 4.8vw, 58px); line-height: 1.02; letter-spacing: -0.02em;
  }
  .food__sub{
    margin: clamp(6px, 0.9vh, 11px) auto 0; max-width: 30em;   /* sits close under the title */
    font-family: 'Inter', system-ui, sans-serif; letter-spacing: -0.01em;
    font-weight: 400; font-size: clamp(13px, 1.12vw, 15px); line-height: 1.55; color: #5b5b5b;
  }

  /* ── the scattered field ───────────────────────────────── */
  .food__scatter{
    position: relative;
    width: 100%; max-width: 1180px;
    height: clamp(600px, 74vh, 880px);   /* min raised so mantu/plov never collide at short heights */
    margin: clamp(8px, 3vh, 40px) auto 0;
  }
  /* the plate button — invisible chrome; only the plate image shows.
     The centring translate is purely declarative and is NEVER animated, so
     GSAP Flip's inline transform (during a flight) never fights a CSS one. */
  .food__plate{
    position: absolute;
    left: calc(var(--x) - var(--s) / 2);   /* centre on (--x,--y) WITHOUT a transform, so */
    top:  calc(var(--y) - var(--s) / 2);   /* transform stays free for GSAP Flip (no jump) */
    width: var(--s);
    appearance: none; -webkit-appearance: none;
    background: none; border: 0; padding: 0;
    border-radius: 50%;
    cursor: grab;                          /* affords drag-to-reposition; click still opens */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .food__plate.is-dragging{ cursor: grabbing; }
  /* hover scale lives on .food__float, NOT .food__img: the reveal pins
     `.food.food-ready.is-in .food__img{ transform:none }` at a higher specificity,
     so a hover transform on the img would never win. The float is a free layer no
     other transform rule touches, so the hover always applies cleanly. */
  .food__float{ display: block; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
  .food__img{
    display: block; width: 100%; height: auto; pointer-events: none;
    transition: transform .45s cubic-bezier(.2,.7,.2,1);
  }
  .food__plate:hover .food__float,
  .food__plate:focus-visible .food__float{
    transform: scale(1.05);   /* a clean few-% lift on hover — scale only, no drift */
  }
  .food__plate:focus-visible{ outline: 3px solid var(--ink); outline-offset: 8px; }

  /* During a Flip the plate must be a rigid unit — kill the inner hover lift
     and any transition so the only motion is GSAP's transform on the button.
     (Without this the image keeps settling from its hover state mid-flight, so
     the travel looks like it jumps/glitches into place.) */
  .food.is-focusing .food__plate{ transition: none; }
  .food.is-focusing .food__img,
  .food.is-focusing .food__float{ transition: none; transform: none; }
  /* the focus overlay lives inside .food (z-index:1, its own stacking context),
     so while a dish is open we lift the whole section above the later sections
     (Celebrations/Travel/RSVP at z-index:1) and the audio dock — otherwise the
     fixed overlay is trapped below them and they bleed through. */
  .food.is-focusing{ z-index: 80; }

  /* On close the plate is re-parented from the stage back into the scatter, which
     sits BELOW the focus overlay (z-index:60). The backdrop is still opaque for the
     first frames of the flight, so without this the flying plate is hidden behind it
     — a brief cream "flash" — until the backdrop fades. The scatter is position:relative
     with z-auto (no stacking context of its own), so a z-index on the plate resolves in
     .food's stacking context and lifts it clear of the z-60 backdrop. Only the flying
     plate is lifted; the other plates stay hidden behind the backdrop until it fades. */
  .food__plate.is-returning{ z-index: 70; }

  /* per-dish placement + size (percentages → responsive); bob phase varies.
     mantu crowns the top, plov anchors the centre, the rest ring around. */
  .food__plate--mantu  { --x:50%; --y:15%; --s:clamp(108px,13vw,184px);   --bob:7.5s; --bobd:-1.2s; }
  .food__plate--non    { --x:14%; --y:33%; --s:clamp(118px,15vw,204px);   --bob:8.2s; --bobd:-3.0s; }
  .food__plate--sambusa{ --x:86%; --y:29%; --s:clamp(108px,13vw,184px);   --bob:6.8s; --bobd:-2.1s; }
  .food__plate--plov   { --x:50%; --y:60%; --s:clamp(228px,30vw,406px);   --bob:9.0s; --bobd:-0.5s; z-index:3; }
  .food__plate--shurbo { --x:16%; --y:79%; --s:clamp(120px,15.5vw,210px); --bob:7.9s; --bobd:-4.2s; }
  .food__plate--qurutob{ --x:84%; --y:77%; --s:clamp(190px,25vw,340px);   --bob:8.6s; --bobd:-1.8s; }

  /* visually-hidden, still read by assistive tech (the keyboard-controls hint) */
  .food__sr{
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  /* custom hover label — follows the pointer over the scatter (fine pointers only) */
  .food__cursor{
    position: fixed; top: 0; left: 0; z-index: 40; pointer-events: none;
    padding: 7px 13px; border-radius: 6px;
    background: var(--ink); color: var(--food-paper);
    font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 600;
    letter-spacing: 0; text-transform: uppercase; white-space: nowrap;
    opacity: 0; transition: opacity .25s ease; will-change: transform;
  }
  .food__cursor.is-on{ opacity: 1; }

  /* ── focus overlay (one dish at a time) ────────────────── */
  .food__focus{
    position: fixed; inset: 0; z-index: 60;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: clamp(20px, 4vw, 64px);
    padding: clamp(40px, 6vh, 80px) clamp(28px, 6vw, 96px);
    pointer-events: none;                 /* only interactive while open (and never while flipping closed) */
  }
  .food__focus.is-open{ pointer-events: auto; }
  .food__focus[hidden]{ display: none; }
  /* the overlay is the scroll container on phones (single column, may exceed the
     viewport). Keep its scroll to itself — no chaining into the locked page behind
     — with momentum, so a flick inside the dish never tugs the background. */
  .food__focus{ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .food__focus-backdrop{
    position: absolute; inset: 0; z-index: 0;
    background: var(--food-paper);
    opacity: 0; transition: opacity .5s ease;
  }
  .food__focus.is-open .food__focus-backdrop{ opacity: 1; }

  .food__focus-stage{
    position: relative; z-index: 1; min-width: 0;
    display: flex; align-items: center; justify-content: center;
  }
  /* the flown-in plate, parked in the stage (overrides the scatter placement) */
  .food__focus-stage .food__plate{
    position: relative; left: auto; top: auto; transform: none;
    width: clamp(248px, 38vw, 484px);
    cursor: default;
  }
  .food__focus-stage .food__plate:hover .food__float{ transform: none; }   /* no hover lift while focused */

  .food__focus-info{ position: relative; z-index: 1; max-width: 30em; }
  /* hold the copy hidden until the overlay opens, so it can never flash before
     GSAP's reveal runs (and so a slow first frame shows nothing, not stale text) */
  .food__focus-info > *{ opacity: 0; }
  .food__focus.is-open .food__focus-info > *{ opacity: 1; will-change: transform, opacity; }
  .food__focus-native{
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(11px, 1.05vw, 13px); font-weight: 600;
    letter-spacing: .12em; color: var(--food-gold);
  }
  .food__focus-name{
    margin-top: clamp(6px, 1vh, 12px);
    font-family: 'LF Serif', 'Fraunces', Georgia, 'Times New Roman', serif;
    font-optical-sizing: auto; font-weight: 460;
    font-size: clamp(40px, 6vw, 84px); line-height: .98; letter-spacing: -0.022em;
  }
  .food__focus-kind{
    margin-top: clamp(8px, 1.2vh, 14px);
    font-family: 'LF Serif', 'Fraunces', Georgia, serif; font-style: italic;
    font-weight: 400; font-size: clamp(15px, 1.6vw, 21px); color: #6b6b6b;
  }
  .food__focus-body{
    margin-top: clamp(16px, 2.4vh, 26px); max-width: 26em;
    font-family: 'Inter', system-ui, sans-serif; letter-spacing: -0.01em;
    font-weight: 400; font-size: clamp(14px, 1.25vw, 17px); line-height: 1.6; color: #2a2a2c;
  }
  .food__focus-note{
    margin-top: clamp(18px, 2.6vh, 28px);
    padding-top: clamp(12px, 1.6vh, 16px);
    border-top: 1px solid rgba(11,11,12,.16);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(11px, 1.05vw, 13px); font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: #6f5a2c;  /* darkened: ~7:1 on the paper at 11px */
  }

  /* close + prev/next + counter — fade with the overlay so they vanish during the close-flip */
  .food__close, .food__nav, .food__count{ opacity: 0; transition: opacity .35s ease; }
  .food__focus.is-open .food__close,
  .food__focus.is-open .food__nav,
  .food__focus.is-open .food__count{ opacity: 1; }
  .food__close{
    position: absolute; top: max(clamp(18px, 3vh, 34px), env(safe-area-inset-top)); right: max(clamp(18px, 3vw, 40px), env(safe-area-inset-right)); z-index: 3;
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    background: transparent; border: 1px solid rgba(11,11,12,.24); color: var(--ink);
    font-size: 16px; line-height: 1; cursor: pointer;
    transition: background .3s ease, color .3s ease, transform .3s ease, opacity .35s ease;
  }
  .food__close:hover{ background: var(--ink); color: var(--food-paper); }
  .food__close:active{ transform: scale(.94); }
  .food__close:focus-visible{ outline: 2px solid var(--food-gold); outline-offset: 3px; }
  .food__nav{
    position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    background: transparent; border: 1px solid rgba(11,11,12,.24); color: var(--ink);
    font-size: 22px; line-height: 1; cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease, opacity .35s ease;
  }
  .food__nav:hover{ background: var(--ink); color: var(--food-paper); border-color: var(--ink); }
  /* touch press response — keep the translateY(-50%) centring while it dips */
  .food__nav:active{ background: var(--ink); color: var(--food-paper); border-color: var(--ink); transform: translateY(-50%) scale(.94); }
  .food__nav:focus-visible{ outline: 2px solid var(--food-gold); outline-offset: 3px; }
  .food__nav--prev{ left: clamp(12px, 2vw, 28px); }
  .food__nav--next{ right: clamp(12px, 2vw, 28px); }

  /* ── section reveal — intro fades/rises, plates fade in (opacity only, so
     nothing competes with the bob animation or a Flip) ── */
  .food.food-ready .food__intro > *{ opacity: 0; transform: translateY(20px); transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
  .food.food-ready .food__plate{ opacity: 0; transition: opacity .85s ease; }
  .food.food-ready .food__img{ transform: scale(.9); }                 /* gentle scale-in, eased by the img's own transition */
  .food.food-ready.is-in .food__intro > *{ opacity: 1; transform: none; }
  .food.food-ready.is-in .food__plate{ opacity: 1; }
  .food.food-ready.is-in .food__img{ transform: none; }

  /* GSAP entrance mode: when JS hands the plates to GSAP (the springy "pop-in"),
     neutralise the CSS opacity/scale reveal so the two never double up. GSAP sets the
     hidden start state inline and clears it on finish, landing on this visible resting
     state. Reduced motion never gets .food--gsap, so it keeps the instant CSS path. */
  .food.food--gsap .food__plate{ opacity: 1; transition: none; }
  .food.food--gsap .food__img{ transform: none; }

  .food.food-ready.is-in .food__intro > *:nth-child(2){ transition-delay: .07s; }
  .food.food-ready.is-in .food__plate--plov   { transition-delay: .05s; }
  .food.food-ready.is-in .food__plate--mantu  { transition-delay: .12s; }
  .food.food-ready.is-in .food__plate--qurutob{ transition-delay: .18s; }
  .food.food-ready.is-in .food__plate--non    { transition-delay: .22s; }
  .food.food-ready.is-in .food__plate--sambusa{ transition-delay: .26s; }
  .food.food-ready.is-in .food__plate--shurbo { transition-delay: .30s; }

  /* lock the page behind the focus (Lenis is also .stop()'d in JS) */
  html.food-focus-lock, html.food-focus-lock body{ overflow: hidden; }

  /* ── focus → single column on tablet/phone ── */
  @media (max-width: 820px){
    .food__focus{
      grid-template-columns: 1fr; align-content: center; justify-items: center;
      gap: clamp(14px, 3vh, 26px);
      /* clear the notch/home-indicator on the single-column phone modal */
      padding:
        max(clamp(60px, 9vh, 88px), calc(env(safe-area-inset-top) + 44px)) /* + room for the close button under the notch */
        max(22px, env(safe-area-inset-left), env(safe-area-inset-right))
        max(clamp(76px, 12vh, 104px), env(safe-area-inset-bottom));
      overflow-y: auto;
    }
    .food__focus-stage .food__plate{ width: min(62vw, 320px); }
    .food__focus-info{ text-align: center; }
    .food__focus-body{ margin-left: auto; margin-right: auto; }
    .food__nav{ width: 44px; height: 44px; }
  }
  /* ── tighten the scatter on phones ── */
  @media (max-width: 620px){
    /* tighter ring on phones — sizes/positions tuned so the circular plates
       clear each other and never clip the section edges (verified ~360–414px) */
    .food__scatter{ height: clamp(520px, 132vw, 640px); max-width: 460px; }
    .food__plate--plov   { --x:50%; --y:50%; --s:clamp(168px,45vw,236px); }
    .food__plate--mantu  { --x:50%; --y:13%; --s:29vw; }
    .food__plate--non    { --x:20%; --y:30%; --s:27vw; }
    .food__plate--sambusa{ --x:80%; --y:30%; --s:27vw; }
    .food__plate--shurbo { --x:23%; --y:76%; --s:30vw; }
    .food__plate--qurutob{ --x:77%; --y:74%; --s:32vw; }
    .food__cursor{ display: none; }
  }

  /* ── occasional dish hop (invite the tap) ──
     The hop animates .food__plate's INDEPENDENT translate/scale/rotate, never its
     transform — that stays reserved for GSAP Flip, just like the centring note above. */
  @keyframes foodHop{
    0%   { translate: 0 0;     scale: 1 1;       rotate: 0deg; }
    14%  { translate: 0 4px;   scale: 1.04 .94;  rotate: 0deg; }
    40%  { translate: 0 -26px; scale: .97 1.05;  rotate: -3deg; }
    58%  { translate: 0 0;     scale: 1.03 .97;  rotate: 1.5deg; }
    74%  { translate: 0 -9px;  scale: 1 1;       rotate: -1deg; }
    88%  { translate: 0 0;     scale: 1.01 .99;  rotate: 0deg; }
    100% { translate: 0 0;     scale: 1 1;       rotate: 0deg; }
  }
  .food__plate.is-hopping{ animation: foodHop .62s cubic-bezier(.3,.7,.4,1.05); z-index: 4; }
  @media (prefers-reduced-motion: reduce){
    .food__plate.is-hopping{ animation: none; }
  }

  @media (prefers-reduced-motion: reduce){
    .food.food-ready .food__intro > *{ opacity: 1; transform: none; transition: none; }
    .food.food-ready .food__plate{ opacity: 1; transition: none; }
    .food.food-ready .food__img{ transform: none; transition: none; }
    .food.food-ready .food__float{ transform: none; transition: none; }   /* no hover scale under reduced motion */
    .food__float{ animation: none !important; }
    .food__focus-backdrop, .food__close, .food__nav, .food__count{ transition: none; }
  }