/* ZS R3 stream XK (round 3b-2b): Kvarteret's GROWTH EFFECT LAYER, r3x-kvarteret-fx.css. ZS's own code. Load order: r3-fx.css, r3x-kvarteret.css, THIS file.
   The shared module (r3-fx.css / r3-fx.js, contract in evidence/r3/final10/FXG/FX_GUIDE.md) does the reveals, the masked headline rise, the clip wipes, the parallax, the hover depth and the two-state chapter;
   this file only gives them Kvarteret's identity (warm bone and cream, the bistro) and the live layout of the menu chapter. Nothing here hides or moves anything while motion is not allowed:
   every rule hangs on  html.lib-on:not(.no-motion):not(.r3fx-off)  (no-JS, reduced motion and the page toggle OFF show exactly what r3x-kvarteret.css composes).
   The ONE moving element of Growth stays the hero film; reveals, wipes, parallax, depth and the chapter are craft, not a second film.
   Order: 1 hand-over from the page's own entrance, 2 hero frame (parallax-in, the film is never enlarged beyond its file), 3 the menu chapter (live layout), 4 photograph cards (wipe + depth), 5 sub pages. */

/* ================================ 1. ONE ENTRANCE SYSTEM PER ELEMENT ================================
   The page's own entrance (r3x-kvarteret.css section 14: copy block and ask rise 22 px) is replaced by the module's masked rise / up / stagger on the same elements (FX_GUIDE rule 3). If the module stands down (html.r3fx-off) the page's own entrance applies again. */
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-hero__in > .r3xk-hero__copy,
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-hero__in > .r3xk-hero__side,
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-sub__copy > [data-fx] { animation: none; }

/* ================================ 2. THE HERO FRAME: parallax-in on the poster and the film together ================================
   The frame clips (overflow), the poster and the film carry the same overscan (1.06, set as data-fx-over) so no edge shows while they drift. The overscan is already in the first paint (the module sets the same value when it arms), so nothing pops at script time.
   FILM POLICY / "never enlarged beyond its file": the film is 1280x720. At 1.06 the frame may be at most 720 / 1.06 = 679 px tall on a desktop (it was up to 716 px), so the film stays at or below its own pixels. */
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-hero__plate :is(img, video) { scale: var(--r3fx-over, 1.06); }
@media (min-width: 1200px) and (min-aspect-ratio: 5/4) {
  html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-hero__plate { max-height: min(679px, calc(100vh - var(--kv-bar) - var(--kv-hh) - 56px)); }
}
@media (min-width: 1200px) and (max-width: 1759px) and (min-aspect-ratio: 5/4) {
  html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-hero__plate { max-height: min(679px, calc(100vh - var(--kv-bar) - var(--kv-hh) - 44px)); }
}
@supports (height: 1svh) {
  @media (min-width: 1200px) and (min-aspect-ratio: 5/4) {
    html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-hero__plate { max-height: min(679px, calc(100svh - var(--kv-bar) - var(--kv-hh) - 56px)); }
  }
  @media (min-width: 1200px) and (max-width: 1759px) and (min-aspect-ratio: 5/4) {
    html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-hero__plate { max-height: min(679px, calc(100svh - var(--kv-bar) - var(--kv-hh) - 44px)); }
  }
}
/* the hero ask never waits for a long cascade: the side column (lede, ask, hours) starts at group b and its three steps are done in about a second */

/* ================================ 3. THE MENU CHAPTER (G-01, light): one frame stays, the head and the ledger swap in place ================================
   Static layout (r3x-kvarteret.css section 8): head across both columns, ledger rows beside the photograph pane. LIVE (module adds .fx-live when the window is >= 900 wide, >= 520 tall and the content fits the pinned window):
   the section is (1 + run) screens tall, .fx-pin sticks for the run, the two text states share ONE grid cell (left), the frame (right) stays and its two layers (the dining table, the dish pane) swap with them.
   The grid of the pin is the ledger grid (1.35fr / .8fr), so the frame is exactly the size of the old pane. */
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-chap.fx-live > .fx-pin { grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); align-items: center; align-content: center; gap: 0 clamp(40px, 5vw, 80px); }
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-chap.fx-live .r3xk-chap__states { grid-column: 1; grid-row: 1; align-self: center; }
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-chap.fx-live .r3xk-chap__s1,
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-chap.fx-live .r3xk-chap__s2 { align-self: center; }
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-chap.fx-live .r3xk-chap__frame { display: block; position: relative; top: auto; grid-column: 2; grid-row: 1; align-self: center; }
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-chap.fx-live .r3xk-chap__l1 { display: block; }
/* state 1 stacks (the lede and the ask under the headline): the left cell is one column wide */
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-chap.fx-live .r3xk-chap__s1 .r3xk-menu__head { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-bottom: 0; }
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-chap.fx-live .r3xk-chap__s1 .r3xk-menu__intro { gap: 26px; }
/* the ticks of the module (two small lines, bottom right) take the ink of the plane */
.r3xk-chap { --r3fx-tick-r: 0px; color: var(--kv-wine); }
/* the module lifts its ticks by the 72 px phone dock whenever html.r3-has-dock is set; Kvarteret's dock only exists below 1024 px, so on a desktop the ticks sit at the foot of the window (they used to touch the frame in a 620 px window) */
@media (min-width: 1024px) { .r3xk-chap { --r3fx-dock: 0px; } }
/* the live frame: a floor-brown window with a soft shadow; the dining-table photograph sits in the warm grade of the room */
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-chap.fx-live .r3xk-chap__screen { box-shadow: 0 48px 80px -44px rgba(26, 14, 12, .72); }

/* phones and portrait tablets (< 900 px): the same chapter, one column: the states on top, the frame (a wide crop) under them. The module keeps the chapter static where it would not fit the pinned window (short phones, landscape),
   and clears the 72 px phone dock. The dish pane of state 2 shows the lit dish (hover does not exist on touch); the rows carry their own thumbnails. */
@media (max-width: 899px) {
  html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-chap.fx-live > .fx-pin { grid-template-columns: minmax(0, 1fr); gap: 20px 0; align-items: start; align-content: center; padding-bottom: var(--r3fx-dock, 0px); }
  html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-chap.fx-live .r3xk-chap__states { grid-column: 1; grid-row: 1; align-self: start; }
  html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-chap.fx-live .r3xk-chap__frame { grid-column: 1; grid-row: 2; align-self: start; }
  html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-chap.fx-live .r3xk-chap__screen { aspect-ratio: 16 / 10; }
  html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-chap.fx-live .r3xk-chap__s1 .r3xk-menu__head { gap: 18px; }
}

/* touch phones: hover does not exist, so the dish pane only ever shows the first dish (the rows carry their own thumbnails): the other two photographs are not drawn and so not fetched (about 110 KB less on a phone) */
@media (max-width: 899px) and (hover: none) {
  html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-chap.fx-live .r3xk-ledger__pane figure:not(:first-child) { display: none; }
}

/* ================================ 4. PHOTOGRAPH CARDS: wipe (the photograph) + depth (the card) ================================
   The wipe is on the photograph box, the depth on a plain wrapper around it (an overflow:hidden box would clip the hover shadow and hairline of the module's edge). The caption stays on the plane. */
.r3xk-strip__card, .r3xk-mosaic__card { position: relative; }
.r3xk-strip__card { --r3fx-shadow: rgba(26, 14, 12, .62); --r3fx-edge: rgba(226, 188, 133, .55); --r3fx-glow: rgba(226, 188, 133, .16); }
.r3xk-mosaic__card { --r3fx-shadow: rgba(0, 0, 0, .7); --r3fx-edge: rgba(226, 188, 133, .55); --r3fx-glow: rgba(226, 188, 133, .16); }
/* the dish photographs of the menu page: the wipe goes on the photograph box, the text and the price follow it */
.r3xk-dish__ph, .r3xk-split__fig, .r3xk-close__photo { --r3fx-bleed: 90px; }

/* ================================ 5. SUB PAGES ================================
   The same language, calmer: the headline rises, the head photograph drifts (parallax-in, the page's one), the photographs wipe, the text follows. */
html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-sub__ph > img { scale: var(--r3fx-over, 1.1); }

/* b6 G7 MSG-02: live chapter below 900 px */
@media (max-width: 899px) {
  html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-chap.fx-live .r3xk-ledger__thumb { display: none; }
  html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-chap.fx-live .r3xk-ledger__rows a,
  html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-chap.fx-live .r3xk-ledger__rows a[aria-current="true"] { grid-template-columns: minmax(0, 1fr); }
  html.lib-on:not(.no-motion):not(.r3fx-off) .r3xk-chap.fx-live .r3xk-ledger__rows .r3xk-fig { grid-column: 1; }
}