/* Four States — the doors, the living hero, the pop-up floor, and a calmer render path */

/* ---------- smooth scrolling (Lenis) ---------- */
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.nav.is-solid { backdrop-filter: none; background: rgb(23 16 11 / .96); }

/* ---------- the doors ---------- */
.doors { display: none; }
.js .doors {
  position: fixed; inset: 0; z-index: 90; display: block; perspective: 1900px; perspective-origin: 50% 46%; background: #0b0705;
  animation: doors-failsafe 0s 9s forwards;
}
@keyframes doors-failsafe { to { visibility: hidden; } }
.js .doors.is-open { background: transparent; pointer-events: none; transition: background 1s .3s; }
.js .doors.is-gone { display: none; }
.door {
  position: absolute; top: 0; bottom: 0; width: 25vw; color: var(--fg); background-color: var(--wall);
  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .045) 0 1px, transparent 1px 4px), repeating-linear-gradient(0deg, rgb(0 0 0 / .08) 0 1px, transparent 1px 4px);
  display: grid; place-content: center; justify-items: center; gap: 10px; transform-style: preserve-3d;
  transition: transform 1.7s cubic-bezier(.72, 0, .18, 1); box-shadow: inset 0 0 90px rgb(0 0 0 / .35);
}
.door--l { left: 0; transform-origin: 0 50%; }
.door--r { right: 0; transform-origin: 100% 50%; }
.door--l > .door--fold { left: 100%; transform-origin: 0 50%; }
.door--r > .door--fold { right: 100%; transform-origin: 100% 50%; }
.door__cloth { position: absolute; top: 0; bottom: 0; left: 0; width: clamp(14px, 2.6vw, 40px); background: var(--cloth-s) 0 0 / clamp(14px, 2.6vw, 40px) auto repeat-y; }
.door--r > .door__cloth, .door--r > .door--fold > .door__cloth { left: auto; right: 0; transform: scaleX(-1); }
.door > p { font: 600 clamp(1.5rem, 3.4vw, 3.4rem)/1.3 'Noto Serif Kannada', 'Noto Serif Malayalam', 'Noto Serif Tamil', 'Noto Serif Telugu', 'Nirmala UI', serif; color: var(--accent); writing-mode: vertical-rl; }
.door > em { font: 500 .78rem/1 var(--body); font-style: normal; letter-spacing: .2em; text-transform: uppercase; writing-mode: vertical-rl; color: var(--soft); }
.door > p, .door > em { opacity: 0; transform: translateY(16px); animation: door-name .9s var(--ease) forwards; animation-delay: calc(var(--n, 0) * 140ms + .15s); }
.door--l > .door--fold { --n: 1; } .door--r > .door--fold { --n: 2; } .door--r { --n: 3; }
@keyframes door-name { to { opacity: 1; transform: none; } }
.doors.is-open .door--l { transform: rotateY(-86deg); }
.doors.is-open .door--l > .door--fold { transform: rotateY(172deg); }
.doors.is-open .door--r { transform: rotateY(86deg); }
.doors.is-open .door--r > .door--fold { transform: rotateY(-172deg); }
.doors__lock {
  position: absolute; left: 50%; top: 78%; transform: translate(-50%, -50%); z-index: 2; display: grid; gap: 12px; justify-items: center;
  padding: 18px 26px 16px; background: var(--amber); color: var(--ink); box-shadow: 0 20px 50px rgb(0 0 0 / .5);
  transition: transform .7s var(--ease), opacity .5s;
}
.doors__lock b { font: 600 .92rem/1 var(--body); letter-spacing: .34em; text-transform: uppercase; white-space: nowrap; }
.doors__bar { width: 100%; height: 2px; background: rgb(35 23 15 / .25); overflow: hidden; }
.doors__bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--load, 0)); transition: transform .5s ease-out; }
.doors.is-open .doors__lock { transform: translate(-50%, -50%) scale(.8); opacity: 0; }
@media (min-width: 900px) {
  .door > p, .door > em { writing-mode: horizontal-tb; }
}

/* ---------- hero: the room is a drawing until the lanterns come on ---------- */
.hero { --lit-n: 0; }
.hero__stage { will-change: transform; transform: scale(calc(1.06 + var(--hs, 0) * .08)) translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -8px), 0); }
.hero__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.js .hero__line { animation: none; opacity: 1; }
.js .hero__room { animation: none; -webkit-mask-image: none; mask-image: none; opacity: calc(var(--lit-n) / 3); transition: opacity 1.5s cubic-bezier(.3, 0, .2, 1); filter: brightness(.86); }
.hero__lanterns { --ls: .44; position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 76%; perspective: 1300px; perspective-origin: 70% 10%; pointer-events: none; }
.hero__lanterns .lanterns__rig {
  left: 68%; top: calc(var(--hs, 0) * -160px);
  transform: scale(var(--ls)) rotateY(calc(var(--px, 0) * 9deg)) rotateX(calc(var(--py, 0) * -5deg));
}
.hero__lanterns .lantern { pointer-events: auto; cursor: pointer; background: none; border: 0; padding: 0; }
.hero__lanterns .lantern:focus-visible { outline: none; }
.hero__lanterns .lantern:focus-visible .face { outline-color: var(--glow); outline-width: 4px; }
.hero__copy { position: relative; z-index: 1; }
.hero__meter { position: relative; z-index: 1; }
.js .hero__title .line > span { animation: none; transform: translateY(108%); transition: transform 1.3s var(--ease) .9s; }
.js .hero__title .line + .line > span { transition-delay: 1.05s; }
.js .hero__lede, .js .hero__actions, .js .hero__meter { animation: none; opacity: 0; transform: translateY(18px); transition: opacity 1.1s 1.5s, transform 1.2s var(--ease) 1.5s; }
.is-ready .hero__title .line > span, .is-ready .hero__lede, .is-ready .hero__actions, .is-ready .hero__meter { transform: none; opacity: 1; }

/* lanterns, shared by the hero and the cloth section */
.lantern__body { animation: turn var(--t, 54s) linear infinite; }
@keyframes turn { from { transform: rotateY(var(--o)); } to { transform: rotateY(calc(var(--o) + 360deg * var(--k))); } }
.is-asleep .lantern, .is-asleep .lantern__body { animation-play-state: paused; }
.lantern__glow {
  position: absolute; left: -330px; top: calc(var(--drop) - 120px); width: 660px; height: calc(var(--h) + 240px); pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 214 140 / .5), rgb(255 190 100 / .16) 55%, transparent); transform: translateZ(-150px); opacity: 0; transition: opacity .9s;
}
.lantern.is-lit .lantern__glow { opacity: 1; }
.face { transition: filter .45s; }
.lantern:not(.is-lit) .face { filter: brightness(.2) saturate(.45); }
.lantern.is-lit .face { animation: strike .7s steps(1, end); }
@keyframes strike { 0% { filter: brightness(.2); } 18% { filter: brightness(1.15); } 34% { filter: brightness(.3); } 52% { filter: brightness(1.05); } 66% { filter: brightness(.6); } 80%, 100% { filter: none; } }

/* ---------- story: fades by overlay, not by mask ---------- */
.story__hills { -webkit-mask-image: none; mask-image: none; will-change: transform; opacity: .7; }
.story__intro::after { background: linear-gradient(var(--espresso), transparent 24%, transparent 72%, var(--espresso)), linear-gradient(90deg, rgb(23 16 11 / .9), rgb(23 16 11 / .62)); }

/* walls only move while their state is on screen */
.state__art .glow { animation: none; }
.state:not(.is-live) .state__art *, .state:not(.is-live)::after { animation-play-state: paused !important; }
.scene:not(.is-on) .rain { animation-play-state: paused; }

/* ---------- carved wall: one lit image under a travelling shade ---------- */
.wall__stage img { filter: brightness(1.12) contrast(1.08); }
.wall__shade {
  position: absolute; top: 0; bottom: 0; left: -100%; width: 300%; will-change: transform; transform: translate3d(calc((var(--rx, .3) - .5) * 33.333%), 0, 0);
  background: radial-gradient(ellipse 11% 62% at 50% 44%, transparent 0, rgb(12 8 5 / .45) 46%, rgb(12 8 5 / .9) 100%);
}

/* ---------- look up: baked textures, clip instead of mask ---------- */
.cloth__canopy { mix-blend-mode: normal; opacity: .34; transform: none; }
.cloth__ink { -webkit-mask-image: none; mask-image: none; clip-path: inset(0 0 calc((1 - var(--drip, 0)) * 100%) 0); }
.menu::before { mix-blend-mode: normal; opacity: .1; }

/* ---------- the room: a floor you travel across, rooms that stand up ---------- */
.is-stage .walk__grid, .is-stage .plan--mini { display: none; }
.is-stage { padding-bottom: 0; }
.room__run { position: relative; }
.room {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  background: radial-gradient(90% 70% at 40% 70%, #2c1d12, var(--espresso) 70%);
}
.room__floor { position: absolute; inset: 0; perspective: 1500px; perspective-origin: var(--ax) var(--ay); }
.room__plane {
  position: absolute; left: var(--ax); top: var(--ay); transform-origin: 0 0; transform-style: preserve-3d; will-change: transform;
  background: linear-gradient(135deg, #3a281a, #24170e); box-shadow: 0 0 0 2px rgb(241 226 198 / .16), 40px 60px 120px rgb(0 0 0 / .65);
}
.room__plane .plan__lines { background: var(--cane); opacity: .7; }
.room__plane > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.room__plane .area { fill: var(--redline); fill-opacity: .08; stroke: var(--redline); stroke-opacity: .55; stroke-width: 2; stroke-dasharray: 7 6; transition: fill-opacity .6s; }
.room__plane .area.is-lit { fill: var(--glow); fill-opacity: .18; stroke: none; }
.room__plane .area.is-here { fill-opacity: .5; }
.room__plane .route { fill: none; stroke: var(--redline); stroke-width: 5; stroke-linecap: round; }
.room__plane .route--ghost { opacity: .3; stroke-dasharray: 3 12; }
.room__plane .dot { fill: var(--glow); }
.room__plane .ping { fill: none; stroke: var(--glow); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: ping 2.2s var(--ease) infinite; }
.room__plane .mark circle { fill: var(--espresso); stroke: var(--redline); stroke-width: 2.5; }
.room__plane .mark text { font: 500 24px var(--measure); fill: var(--redline); text-anchor: middle; dominant-baseline: central; }

.pop {
  position: absolute; width: var(--card-w); transform-origin: 50% 100%; will-change: transform, opacity; backface-visibility: hidden;
  transform: translate(-50%, -100%) rotateZ(var(--yaw)) rotateX(calc(var(--tilt) * var(--up, 0))); opacity: min(1, var(--up, 0) * 5);
  box-shadow: 0 30px 60px rgb(0 0 0 / .55);
}
.pop::after { content: ''; position: absolute; left: 50%; bottom: -3px; width: 3px; height: 3px; }
.pop .reveal { margin: 0; width: 100%; }
.js .pop .reveal.is-lit .reveal__room { -webkit-mask-image: none; mask-image: none; clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }
.js .pop .reveal.is-lit::after { left: calc(var(--p, 0) * 100%); }
.js .reveal.is-draft .reveal__room { animation: none; --tr: 0%; }
.js .reveal.is-draft.is-held .reveal__room { --tr: 26%; }
.js .reveal.is-draft.is-peek .reveal__room { --tr: 190%; }
.js .reveal.is-draft .stamp { animation: none; }

.room__panel { position: absolute; z-index: 3; left: 0; right: 0; bottom: var(--dock-h); padding: 26px var(--gut) 18px; background: linear-gradient(transparent, rgb(18 12 8 / .94) 26%); min-height: 44svh; display: grid; align-items: end; }
.room__panel .zone { grid-area: 1 / 1; padding: 0; gap: 10px; opacity: 0; transform: translateY(22px); transition: opacity .35s, transform .7s var(--ease); pointer-events: none; }
.room__panel .zone.is-on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .12s; }
.room__panel .zone > p:not(.dim) { font-size: .97rem; line-height: 1.5; }
.room__panel .zone h3 { margin-top: 0; }
.room__panel .zone__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.room__panel .peek { min-height: 40px; font-size: .86rem; }
.room__panel .materials { font-size: .8rem; gap: 6px 14px; }
.room__steps { position: absolute; z-index: 4; left: var(--gut); right: var(--gut); top: calc(var(--nav-h) + 4px); display: flex; gap: 6px; }
.room__steps button { flex: 1; height: 26px; padding: 0; background: none; border: 0; cursor: pointer; position: relative; }
.room__steps button::before { content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 2px; background: rgb(241 226 198 / .25); transition: background .4s; }
.room__steps button[aria-current='true']::before { background: var(--amber); }
.room__steps button.is-done::before { background: rgb(241 226 198 / .7); }
.room__steps span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (min-width: 900px) {
  .hero__lanterns { --ls: .8; }
  .hero__lanterns .lanterns__rig { left: 74%; }
  .hero__stage img { object-position: 50% 42%; }
  .room__panel { left: auto; right: 0; top: 0; bottom: 0; width: 38%; min-height: 0; align-items: center; padding: var(--nav-h) var(--gut) 0 3vw; background: linear-gradient(90deg, transparent, rgb(18 12 8 / .9) 22%); }
  .room__panel .zone { gap: 16px; }
  .room__panel .zone > p:not(.dim) { font-size: 1.05rem; line-height: 1.6; }
  .room__steps { left: auto; right: var(--gut); width: calc(38% - var(--gut) - 3vw); top: auto; bottom: 34px; }
  .room__steps button { height: 44px; }
  .room__steps button::before { top: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .doors { display: none; }
  .js .hero__room { opacity: 1; }
  .lantern__body { animation: none; transform: rotateY(var(--o)); }
}

/* ---------- the plate each state brings ---------- */
.scene__dish { position: absolute; margin: 0; overflow: hidden; left: calc(var(--gut) + var(--strip)); right: var(--gut); bottom: calc(var(--dock-h) + var(--panel-w) / 4 - 3svh); height: 17svh; box-shadow: 0 24px 50px rgb(0 0 0 / .4); }
.scene__dish img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; transform: scale(1.12); transition: transform 2.4s var(--ease); }
.scene.is-on .scene__dish img { transform: none; }
.dishes__photo { margin: 0 0 26px; aspect-ratio: 16 / 9; overflow: hidden; }
.dishes__photo img { width: 100%; height: 100%; object-fit: cover; }
.js .dishes.is-turning .dishes__photo img { animation: plate-in 1.4s var(--ease) both; }
@keyframes plate-in { from { transform: scale(1.14); opacity: 0; } }
@media (max-width: 899px) {
  .scene__motif { top: calc(var(--nav-h) + 1vh); bottom: auto; right: -12vw; width: 60vw; opacity: .2; }
  .scene__facts div:first-child { display: none; }
}
@media (max-width: 899px) and (max-height: 700px) { .scene__dish { display: none; } }
@media (min-width: 900px) {
  .scene__copy { max-width: min(31rem, 40vw); }
  .scene__dish { left: auto; right: 6vw; bottom: auto; top: calc(var(--nav-h) + 6vh); width: min(38vw, 54svh); height: auto; aspect-ratio: 3 / 2; }
  .scene__motif { right: calc(6vw + min(38vw, 54svh) - 7vw); top: calc(var(--nav-h) + 3vh); width: min(15vw, 22svh); opacity: 1; filter: drop-shadow(0 6px 18px rgb(0 0 0 / .45)); }
}

/* ---------- the dial is a real thali now ---------- */
.thali .wedge, .thali__q:not(.is-on) .wedge, .thali__q:not(.is-on):hover .wedge { fill-opacity: 0; }
.thali text { font-size: 13px; letter-spacing: .26em; fill: #5a3a14; opacity: .6; transition: opacity .5s, fill .5s; }
.thali__q.is-on text { fill: #2a1708; opacity: 1; }
.thali__disc { transition: transform 1.6s cubic-bezier(.3, 1.2, .3, 1); }

.menu__bar { margin: 44px 0 0; aspect-ratio: 16 / 8; overflow: hidden; }
.menu__bar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.menu__bar + .menu__art { margin-top: 10px; height: clamp(90px, 12vw, 140px); }

/* ---------- the launch film takes over the hero when asked ---------- */
.film-btn { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 5px 22px 5px 5px; border-radius: 999px; cursor: pointer; text-align: left; background: rgb(23 16 11 / .55); border: 1px solid rgb(241 226 198 / .45); color: var(--cane); font-weight: 500; transition: background .4s, border-color .4s, transform .5s var(--ease); }
.film-btn:hover { background: rgb(23 16 11 / .85); border-color: var(--amber); transform: translateY(-2px); }
.film-btn:active { transform: none; }
.film-btn__thumb { position: relative; flex: none; width: 72px; height: 42px; border-radius: 999px; overflow: hidden; background: url('../assets/film/poster.jpg') 82% 50% / 240% auto; }
.film-btn__thumb::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -5px; border-left: 14px solid #fff6dc; border-block: 8px solid transparent; filter: drop-shadow(0 1px 4px rgb(0 0 0 / .7)); }
.film-btn small { display: block; font: 400 .72rem/1.3 var(--body); color: var(--cane-dim); }
.hero__film { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: #0b0705; opacity: 0; transition: opacity .7s; }
.hero__film[hidden] { display: none; }
.hero.is-film .hero__film { opacity: 1; }
.hero__film video { width: 100%; max-height: 100%; aspect-ratio: 16 / 9; background: #0b0705; }
.film-close { position: absolute; right: var(--gut); bottom: calc(var(--dock-h) + 22px); min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--amber); color: var(--ink); border: 0; font-weight: 600; cursor: pointer; }
.hero.is-film .hero__copy, .hero.is-film .hero__meter, .hero.is-film .hero__lanterns { opacity: 0; pointer-events: none; transition: opacity .5s; }
@media (min-width: 900px) { .film-close { bottom: auto; top: calc(var(--nav-h) + 16px); } }

/* ================= HERO v4: one table, then the room =================
   Beat one is the table from above: four cloth runners arrive from four sides and meet under one thali.
   Scrolling dives through the thali into the room, where the lanterns come on. */
.hero { display: block; min-height: 0; height: 230svh; overflow: visible; padding-bottom: 0; --cx: 50%; --cy: 34%; --td: 78vw; --rw: 30vw; }
.hero::after { content: none; }
.hero__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: var(--dock-h); background: #0d1711; }

.hero__table {
  position: absolute; inset: 0; will-change: transform; transform: translate3d(calc(var(--px, 0) * -6px), calc(var(--py, 0) * -5px), 0) scale(1.02);
  background: url('../assets/img/art/flow.webp') 50% 50% / cover, radial-gradient(90% 70% at var(--cx) var(--cy), #1d3326, #0b130e 75%);
  background-blend-mode: soft-light;
}
.hero__table::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(8 12 9 / .5) 0, transparent 16%, transparent 46%, rgb(8 12 9 / .86) 66%, #080c09 100%); }
.runner { position: absolute; left: calc(var(--cx) - var(--rw) / 2); top: var(--cy); width: var(--rw); height: 130vmax; transform-origin: 50% 0; transform: rotate(var(--a)); }
.runner--kl { --a: 180deg; } .runner--ka { --a: 90deg; } .runner--ap { --a: 0deg; } .runner--tn { --a: 270deg; }
.runner__slide { position: absolute; inset: 0; will-change: transform; transform: translate3d(0, calc(var(--ret, 0) * 75vmax), 0); }
.runner__cloth {
  position: absolute; inset: 0; width: 100%; padding: 0; border: 0; cursor: pointer; color: var(--accent); background-color: var(--wall);
  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 4px), repeating-linear-gradient(0deg, rgb(0 0 0 / .09) 0 1px, transparent 1px 4px);
  box-shadow: 0 0 60px rgb(0 0 0 / .55); transform: translate3d(0, 135vmax, 0); transition: transform 1.5s cubic-bezier(.16, 1, .3, 1), filter .4s;
  transition-delay: calc(var(--n) * 130ms + .15s), 0s;
}
.runner--ka { --n: 0; } .runner--kl { --n: 1; } .runner--tn { --n: 2; } .runner--ap { --n: 3; }
.is-ready .runner__cloth { transform: none; }
.runner__cloth:hover { filter: brightness(1.14); }
.runner__cloth:focus-visible { outline: 3px solid var(--glow); outline-offset: -6px; }
.runner__cloth i { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--rw) * .13); background: var(--cloth-s) 0 0 / calc(var(--rw) * .13) auto repeat-y; }
.runner__cloth i + i { left: auto; right: 0; transform: scaleX(-1); }
.runner__cloth span {
  position: absolute; left: 50%; top: calc(var(--td) / 2 + 5vmin); white-space: nowrap; transform: translate(-50%, -50%) rotate(calc(var(--a) * -1)); transform-origin: 50% 50%;
  font: 600 clamp(1.15rem, 4.6vmin, 3.2rem)/1.3 'Noto Serif Kannada', 'Noto Serif Malayalam', 'Noto Serif Tamil', 'Noto Serif Telugu', 'Nirmala UI', serif;
}
.runner--ka .runner__cloth span, .runner--tn .runner__cloth span { top: calc(var(--td) / 2 + 22vmin); }

.hero__thali { position: absolute; left: var(--cx); top: var(--cy); width: var(--td); height: var(--td); margin: calc(var(--td) / -2) 0 0 calc(var(--td) / -2); pointer-events: none; will-change: transform, opacity;
  transform: translate3d(calc(var(--px, 0) * -9px), calc(var(--py, 0) * -8px), 0) scale(calc(1 + var(--dive, 0) * 2.6)) rotate(calc(var(--hp, 0) * 150deg)); opacity: calc(1 - var(--dive, 0) * 1.15); }
.hero__thali-in { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 34px 90px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 220 150 / .18); transform: scale(1.5) rotate(-70deg); opacity: 0; transition: transform 1.9s cubic-bezier(.16, 1, .3, 1) .55s, opacity .8s .55s; }
.is-ready .hero__thali-in { transform: none; opacity: 1; }
.hero__thali-img { width: 100%; height: 100%; border-radius: 50%; background: url('../assets/img/food/thali.webp') 50% 50% / cover; animation: thali-idle 140s linear infinite; }
@keyframes thali-idle { to { transform: rotate(360deg); } }

.hero__room { position: absolute; inset: 0; isolation: isolate; clip-path: circle(var(--iris, 0px) at var(--cx) var(--cy)); }
.hero__room::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(23 16 11 / .5) 0, transparent 15%, transparent 28%, rgb(23 16 11 / .74) 47%, rgb(23 16 11 / .93) 68%, var(--espresso) 100%); }
.js .hero__real { opacity: calc(var(--lit-n) / 3); transition: opacity 1.5s cubic-bezier(.3, 0, .2, 1); filter: brightness(.86); }
.hero__copy { z-index: 3; }
.hero__meter { z-index: 3; }
.hero__film { z-index: 6; }
.hero:not(.is-room) .hero__motes { visibility: hidden; }

@media (min-width: 900px) {
  .hero { --cx: 68%; --cy: 35%; --td: 54svh; --rw: 19svh; }
  .hero__pin { padding-bottom: 0; }
  .hero__table::after { background: linear-gradient(90deg, rgb(8 12 9 / .72) 0, rgb(8 12 9 / .2) 44%, transparent 60%), linear-gradient(180deg, rgb(8 12 9 / .45), transparent 18%); }
  .hero__room::after { background: linear-gradient(180deg, rgb(23 16 11 / .55) 0, transparent 22%, transparent 38%, rgb(23 16 11 / .86) 74%, var(--espresso) 100%); }
  .hero__copy { max-width: 46vw; }
  .hero__title { font-size: clamp(3.2rem, 5.4vw, 5.2rem); }
  .runner--ka .runner__cloth span, .runner--tn .runner__cloth span { top: calc(var(--td) / 2 + 20vmin); }
  .runner--ka .runner__cloth span { top: calc(var(--td) / 2 + 17vmin); }
}
@media (prefers-reduced-motion: reduce) {
  .runner__cloth, .hero__thali-in { transition: none; transform: none; opacity: 1; }
  .hero__thali-img { animation: none; }
}

/* the room wrapper is a window now, not the image: undo the image-era rules on it */
.js .hero__room { animation: none; opacity: 1; filter: none; transition: none; -webkit-mask-image: none; mask-image: none; }

@media (max-width: 899px) {
  /* phone: the table sits in the top half, the words underneath it */
  .hero { --cy: 26%; --td: 62vw; --rw: 25vw; height: 215svh; }
  .hero__table::after { background: linear-gradient(180deg, rgb(8 12 9 / .5) 0, transparent 12%, transparent 40%, rgb(8 12 9 / .9) 54%, #080c09 100%); }
  .hero__title { font-size: clamp(2.5rem, 11.4vw, 3.4rem); }
  .hero__lede { margin-top: 12px; font-size: .98rem; }
  .hero__actions { flex-wrap: nowrap; gap: 10px; margin-top: 18px; }
  .hero__actions .btn { padding: 0 20px; white-space: nowrap; }
  .film-btn { padding-right: 16px; gap: 10px; white-space: nowrap; }
  .film-btn small { display: none; }
  .film-btn__thumb { width: 50px; height: 40px; }
  .hero__meter { margin-top: 20px; margin-bottom: 14px; }
  .hero__meter dd { white-space: normal; }
}

@media (max-width: 899px) { .runner--ka .runner__cloth span, .runner--tn .runner__cloth span { display: none; } }

/* ================= the lights you tap are the lanterns in the picture =================
   .hero__canvas is sized by script to the render's exact cover-fit box, so each lamp sits on its lantern at any viewport. */
.hero__stage { z-index: 0; }
.hero__room::after { z-index: 1; }
.hero__canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.hero__canvas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.hero__lit { position: absolute; inset: 0; }
.js .hero__lit { opacity: calc(var(--lit-n) / 3); transition: opacity 1.4s cubic-bezier(.3, 0, .2, 1); }
.js .hero__real { opacity: 1; filter: brightness(.9); transition: none; }
.lamp { position: absolute; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lamp i { position: absolute; inset: 0; pointer-events: none; }
.lamp__off { background: linear-gradient(180deg, rgb(26 17 10 / .9), rgb(38 26 16 / .82)); opacity: 1; transition: opacity .35s; }
.lamp__glow { inset: -45% -60% !important; background: radial-gradient(closest-side, rgb(255 214 140 / .42), rgb(255 190 100 / .12) 60%, transparent); opacity: 0; transition: opacity .9s; mix-blend-mode: screen; }
.lamp.is-lit .lamp__off { opacity: 0; animation: lamp-strike .75s steps(1, end); }
.lamp.is-lit .lamp__glow { opacity: 1; }
.lamp:hover .lamp__glow { opacity: .55; }
.lamp.is-lit:hover .lamp__glow { opacity: 1; filter: brightness(1.25); }
.lamp:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; }
@keyframes lamp-strike { 0% { opacity: 1; } 18% { opacity: 0; } 34% { opacity: .85; } 52% { opacity: .1; } 66% { opacity: .5; } 80%, 100% { opacity: 0; } }
.hero__room { z-index: 1; }
.hero__copy, .hero__meter { pointer-events: none; }
.hero__copy a, .hero__copy button { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .lamp.is-lit .lamp__off { animation: none; } }

/* ================= headings in Bodoni Moda: a didone, the face of menus and maisons ================= */
h1, h2, h3 { font-weight: 500; font-optical-sizing: auto; letter-spacing: -.018em; line-height: 1.04; }
h2 { font-size: clamp(2.3rem, 6.8vw, 4.9rem); }
h3 { font-size: clamp(1.55rem, 3.3vw, 2.15rem); line-height: 1.14; }
.hero__title { font-weight: 500; line-height: 1; letter-spacing: -.022em; }
.hero__title .line { padding-bottom: .12em; }
.hero__title .line + .line > span { font-style: italic; font-weight: 400; }
.story__big, .foot__mark { font-weight: 500; letter-spacing: -.015em; }
.story__big { font-style: italic; }
.dishes b { font-weight: 600; font-size: 1.2rem; letter-spacing: 0; }
.scene__facts dt, .visit__facts dt, .hold legend { font-weight: 600; }
.zone em { font-style: italic; font-weight: 500; }
@media (min-width: 900px) { .hero__title { font-size: clamp(3.6rem, 6.2vw, 6rem); } }
@media (max-width: 899px) { .hero__title { font-size: clamp(2.8rem, 12.6vw, 3.8rem); } .hero__actions { margin-bottom: 26px; } }
@media (min-width: 900px) { .hero__actions { margin-bottom: 64px; } }

/* ================= lanterns off: the room simply gets darker ================= */
.js .hero__lit { opacity: 0; transition: opacity 1.2s cubic-bezier(.3, 0, .2, 1); }
.js .is-room .hero__lit { opacity: 1; }
.hero__dim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #070403; opacity: calc((3 - var(--lit-n)) * .27); transition: opacity .9s cubic-bezier(.3, 0, .2, 1); }

/* ================= one lamp on by default: the unlit lanterns ask to be tapped ================= */
.hero__dim { opacity: calc((3 - var(--lit-n)) * .21); }
.hero__lede { display: grid; }
.hero__lede span { grid-area: 1 / 1; transition: opacity .7s; }
.hero__lede-b { opacity: 0; }
.is-room .hero__lede-a { opacity: 0; }
.is-room .hero__lede-b { opacity: 1; transition-delay: .5s; }
.is-room .lamp:not(.is-lit) .lamp__glow { animation: lamp-ask 2.6s ease-in-out infinite; }
@keyframes lamp-ask { 0%, 100% { opacity: 0; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .is-room .lamp:not(.is-lit) .lamp__glow { animation: none; opacity: .3; } }