Listings grid with filter

One file, the only dependency is react-dom (createPortal), “use client”. Types come from listings (unique kind), the “all” chip is allLabel; the active chip is filled with the text colour. A 1/2/3-column grid by container query, li items appear via @keyframes with a --n×70ms delay. A card is a div role=button: media with two <img>s (imageHover on top, opacity 0 → 1 on hover, both scale 1.05), price, specs, a hint chip. On click getBoundingClientRect is measured and a position:fixed layer with perspective:1400px, a backdrop and a flyer is portalled into body: absolute at the window's size and position (the card ×1.35 centred, never larger than the screen), transform-style:preserve-3d, an initial translate/scale transform places it exactly over the card; the original is hidden. After a reflow and requestAnimationFrame the transform becomes translate(0) scale(1) rotateY(180deg) over .5s cubic-bezier(.2,.9,.25,1) — flight, growth and flip as one motion, only transform animates (a composited layer, no layout recalculation). Sides have backface-visibility:hidden and translateZ(1px); the front is a copy of the card, the back carries imageHover full-frame and a glass panel with price, name, text, features and the openLabel link; a click on a side flips the window, the close button is on both sides, the hidden side is inert. Closing returns the initial transform and focus goes back to the card. While open: body overflow:hidden with scrollbar compensation, Escape closes, Tab cycles in the window. On a filter change the list remounts with a new key. Palette --vibeui-realty-003-* is neutral: ink and paper via light-dark(), the site colours come through the accent, ink and background props; Cormorant Garamond and Manrope via <link precedence> from Google Fonts with system fallbacks. tone pins the scheme, accent, ink and background override colours.