Rannaghar ~ a Bengali comfort-food landing page with scroll-driven CSS and :has() tabs

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing

What I Built

Rannaghar (রান্নাঘর, "the kitchen") is a landing page for a fictional
sixty-two-year-old Bengali home kitchen in Hindustan Park, Kolkata — the restaurant
that serves the dishes Bengal saves for its favourite people: kosha mangsho, sorshe
ilish, nolen gurer payesh. It's a full single-page experience: hero with an animated
clay handi on a chulha (pure CSS + SVG strokes), a menu shelf with four
categories, a sticky two-column family history, "how a thali arrives" rituals,
scattered-postcard testimonials, and a visit/map section. There are no raster
assets anywhere — every visual is CSS, inline SVG or type.

Demo

Things to try:

• Watch the headline line-mask reveal and the eyebrow scramble-decode on load.
• Scroll the story: chapters enter on scroll-driven animations (animation-timeline: view()) with a sticky progress rail (JS fallback included).
• Click the menu shelves — tabs are pure CSS :has() state machines; arrow-key focus rings travel from the hidden radios to their labels.
• Hover cards, postcards (they straighten), and the magnetic "Book a thali" CTA.
• Tab through everything: skip link, :focus-visible rings, aria-live-friendly labels, heat-levels announced as "heat level 2 of 3", full prefers-reduced-motion support.

Journey

I wanted the page to feel like the food: slow, warm, a little smoky. The palette is
turmeric, chili and clay on a dark chulha background, set in Fraunces + Karla with
Noto Sans Bengali for the বাংলা accents. Under the hood:

• Scroll-driven animations (view-timeline / animation-timeline: view()) for chapter reveals and the story progress bar, with an IntersectionObserver/rAF fallback so every browser still works.
• :has()-driven tabs — the menu state machine is entirely CSS; JS never touches it.
• @property registered custom property animating the conic step-rings in "How a thali arrives".
• Line-mask headline reveal, scramble-decode eyebrow, marquee, film-grain noise overlay (data-URI feTurbulence), magnetic buttons, scattered-postcard grid.
• Accessibility as a feature, not a footnote: semantic landmarks, skip link, labeled spice meters, contrast-checked palette, keyboard-navigable tabs, and a global reduced-motion strategy that stills the flames, steam and marquee.
• Zero raster images — the hero handi, flames, steam and map are all CSS/SVG, so the page is featherweight and infinitely sharp.

What I learned: named view-timelines make scroll choreography declarative, and
:has() finally lets state live where state belongs — in the stylesheet. Next I'd
add a View Transitions API page-flip between menu shelves and a sound-on-demand
sizzle toggle.