/* Four States — the four cloths, the carved wall, the lanterns, the paper drawings */

@property --tr { syntax: '<percentage>'; inherits: true; initial-value: 24%; }

:root {
  /* border cloths, one per state, drawn as repeating strips */
  --cloth-ka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect width='48' height='48' fill='%238f1420'/%3E%3Cpath d='M0 0L18 12 0 24ZM0 24L18 36 0 48Z' fill='%23f4e6cf'/%3E%3Crect x='26' width='3' height='48' fill='%23f4e6cf'/%3E%3Crect x='34' width='6' height='48' fill='%231d2a5c'/%3E%3Crect x='44' width='2' height='48' fill='%23f4e6cf'/%3E%3C/svg%3E");
  --cloth-kl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Crect width='48' height='12' fill='%23f6edd6'/%3E%3Crect width='22' height='12' fill='%23c9a227'/%3E%3Cpath d='M0 3h22M0 9h22' stroke='%23a07c14' stroke-opacity='.55'/%3E%3Crect x='27' width='3' height='12' fill='%23c9a227'/%3E%3Crect x='34' width='1.5' height='12' fill='%23c9a227'/%3E%3C/svg%3E");
  --cloth-tn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='40'%3E%3Crect width='48' height='40' fill='%230d5c4f'/%3E%3Cpath d='M0 0L26 20 0 40Z' fill='%23f0b63c'/%3E%3Crect x='32' width='3' height='40' fill='%23f0b63c'/%3E%3Crect x='39' width='3' height='40' fill='%23c2185b'/%3E%3Crect x='45' width='1.5' height='40' fill='%23f0b63c'/%3E%3C/svg%3E");
  --cloth-ap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='64'%3E%3Crect width='48' height='64' fill='%23b8321f'/%3E%3Cpath d='M19 4h6v8h5v8h5v8h4v8h-4v8h-5v8h-5v8h-6v-8h-5v-8h-5v-8h-4v-8h4v-8h5v-8h5z' fill='%23f1e2c6'/%3E%3Crect x='17' y='24' width='10' height='16' fill='%2314224a'/%3E%3Crect x='44' width='2' height='64' fill='%2314224a'/%3E%3C/svg%3E");
}
[data-state='ka'] { --wall: #3b1019; --fg: #f6e3c4; --soft: #e6c6a6; --accent: #ffc978; --ink-s: #210a0c; --cloth-s: var(--cloth-ka); }
[data-state='kl'] { --wall: #f2e7cc; --fg: #12301f; --soft: #35482f; --accent: #7a5c06; --ink-s: #0f2f24; --cloth-s: var(--cloth-kl); }
[data-state='tn'] { --wall: #5c0f3c; --fg: #fbe6c2; --soft: #efcbc9; --accent: #ffcf5c; --ink-s: #2a0519; --cloth-s: var(--cloth-tn); }
[data-state='ap'] { --wall: #14224a; --fg: #f6e3c4; --soft: #cdd3ea; --accent: #ffa277; --ink-s: #0b1230; --cloth-s: var(--cloth-ap); }

/* ---------- story intro over the layered-hills painting ---------- */
.story { background: var(--espresso); }
.story__intro { position: relative; overflow: hidden; padding-block: clamp(110px, 18vw, 230px) clamp(70px, 10vw, 140px); }
.story__hills {
  position: absolute; inset: -8% 0; background: url('../assets/img/art/strata.webp') 50% 55% / cover;
  transform: translateY(calc(var(--par, 0) * -70px)) scale(1.1); opacity: .62;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 72%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 72%, transparent);
}
.story__intro::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(23 16 11 / .9), rgb(23 16 11 / .66)); }
.story__intro .wrap { position: relative; z-index: 1; display: grid; gap: 28px; }
.story__intro h2 { max-width: 15ch; }
.story__intro p { max-width: 54ch; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: #ecdcbd; }
.story__outro { padding-block: clamp(64px, 10vw, 140px); display: grid; gap: 22px; }
.story__big { font: 400 clamp(1.7rem, 4.6vw, 3.3rem)/1.12 var(--display); max-width: 20ch; }

/* ---------- four walls, four cloths ---------- */
.frieze { --band-h: clamp(170px, 27svh, 300px); --panel-w: max(100vw, calc(var(--band-h) * 4)); --strip: 30px; position: relative; }
.frieze__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #3b1019; }
.frieze__track { position: absolute; inset: 0 auto 0 0; display: flex; width: calc(var(--panel-w) * 4); will-change: transform; }
.state {
  position: relative; flex: none; width: var(--panel-w); background-color: var(--wall);
  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .04) 0 1px, transparent 1px 4px), repeating-linear-gradient(0deg, rgb(0 0 0 / .07) 0 1px, transparent 1px 4px);
}
.state__cloth { position: absolute; inset: 0 auto 0 0; width: var(--strip); z-index: 2; background: var(--cloth-s) 0 0 / var(--strip) auto repeat-y; box-shadow: 8px 0 26px rgb(0 0 0 / .32); }
.state[data-state='kl']::before {
  content: ''; position: absolute; inset: 0 0 auto var(--strip); height: calc(var(--nav-h) + 8px);
  background: linear-gradient(#c9a227 0 62%, transparent 62% 70%, #c9a227 70% 80%, transparent 80% 88%, #c9a227 88% 92%, transparent 92%);
}
.state[data-state='kl']::after {
  content: ''; position: absolute; inset: 0 0 auto var(--strip); height: calc(var(--nav-h) + 8px); mix-blend-mode: soft-light;
  background: linear-gradient(100deg, transparent 30%, #fff 50%, transparent 70%) 0 0 / 240px 100%; animation: zari 5s linear infinite;
}
@keyframes zari { to { background-position: 240px 0; } }
.state__art { position: absolute; inset: auto 0 var(--dock-h) 0; aspect-ratio: 4 / 1; }
.state__art img, .state__art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.state__art::after { content: ''; position: absolute; inset: 100% 0 auto; height: var(--dock-h); background: var(--ink-s); }

.frieze__texts { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.scene { position: absolute; inset: 0; color: var(--fg); padding: calc(var(--nav-h) + 22px) var(--gut) 0 calc(var(--gut) + var(--strip)); }
.js .scene { clip-path: inset(0 var(--cr, 100%) 0 var(--cl, 0px)); }
.scene__copy { position: relative; max-width: 31rem; }
.scene__script { font: 600 clamp(2.3rem, 8.6vw, 4.8rem)/1.28 'Noto Serif Kannada', 'Noto Serif Malayalam', 'Noto Serif Tamil', 'Noto Serif Telugu', 'Nirmala UI', serif; color: var(--accent); }
.scene h3 { margin-top: 2px; color: var(--fg); }
.scene__copy > p:not(.scene__script) { margin-top: 12px; font-size: clamp(.94rem, 1.25vw, 1.06rem); line-height: 1.55; color: var(--soft); }
.scene__facts { margin-top: 16px; display: grid; font-size: .86rem; line-height: 1.45; }
.scene__facts div { display: grid; grid-template-columns: 3.9rem 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--fg) 30%, transparent); }
.scene__facts dt { font-family: var(--display); color: var(--accent); }
.scene__facts dd { color: var(--fg); }
.scene__motif { position: absolute; right: -12vw; top: calc(var(--nav-h) + 1vh); width: 66vw; max-width: 310px; color: var(--accent); opacity: .26; overflow: visible; }
.scene__motif * { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scene__motif .solid { fill: currentColor; stroke: none; }
.scene__motif .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s; }
.scene.is-on .scene__motif .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 3.6s cubic-bezier(.3, 0, .2, 1) .25s; }
.scene__motif .pop-in { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform .3s; }
.scene.is-on .scene__motif .pop-in { transform: scale(1); transition: transform .8s var(--ease) calc(var(--i, 0) * 70ms + .5s); }
.scene__motif .rain { animation: rain 1.5s linear infinite; }
@keyframes rain { from { transform: translate(16px, -56px); opacity: 0; } 20%, 70% { opacity: 1; } to { transform: translate(-22px, 76px); opacity: 0; } }

html:not(.js) .frieze__pin { position: static; height: auto; }
html:not(.js) .frieze__track { position: relative; width: auto; overflow-x: auto; height: 46svh; }
html:not(.js) .frieze__texts, html:not(.js) .scene { position: static; }
html:not(.js) .scene { background: var(--wall); padding-block: 40px; }
html:not(.js) .scene__motif { display: none; }

/* the walls are alive */
.state__art .glow { animation: breathe 5.5s ease-in-out infinite; }
@keyframes breathe { 50% { stroke-opacity: .5; } }
.state__art .sway { animation: sway 6.5s ease-in-out infinite alternate; }
.state__art .sway--stiff { animation: sway-stiff 9s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-2.4deg); } to { transform: rotate(2.6deg); } }
@keyframes sway-stiff { from { transform: rotate(-.9deg); } to { transform: rotate(1deg); } }
.state__art .swing { animation: sway 5s ease-in-out infinite alternate; }
.state__art .bob { animation: bob 4.8s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(-3px) rotate(-1.2deg); } to { transform: translateY(4px) rotate(1.4deg); } }
.state__art .bob--drift { animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(-70px, 0) rotate(-2deg); } to { transform: translate(90px, 3px) rotate(2deg); } }
.state__art .race { animation: race 17s ease-in-out infinite alternate; }
@keyframes race { from { transform: translateX(-230px); } to { transform: translateX(240px); } }
.state__art .amble { animation: amble 3.2s ease-in-out infinite alternate; }
@keyframes amble { from { transform: translate(-8px, 0) rotate(-.7deg); } to { transform: translate(10px, -3px) rotate(.8deg); } }
.state__art .dip { animation: dip 8s ease-in-out infinite alternate; }
@keyframes dip { from { transform: rotate(-7deg); } to { transform: rotate(5deg); } }
.state__art .beam { animation: beam 7s ease-in-out infinite alternate; }
@keyframes beam { from { transform: rotate(-9deg); opacity: .1; } to { transform: rotate(13deg); opacity: .36; } }
.state__art .steam { stroke-dasharray: 10 8; animation: steam 2.6s linear infinite; }
@keyframes steam { from { stroke-dashoffset: 0; opacity: .9; } to { stroke-dashoffset: 54; opacity: .2; } }
.state__art .train { animation: train 16s linear infinite; }
@keyframes train { from { transform: translateX(-200px); } to { transform: translateX(820px); } }
.state__art .fly { animation: fly 22s linear infinite; }
@keyframes fly { from { transform: translate(-160px, 26px); opacity: 0; } 12%, 85% { opacity: 1; } to { transform: translate(420px, -46px); opacity: 0; } }
.state__art .ripple { stroke-dasharray: 26 14; animation: ripple 7s linear infinite; }
@keyframes ripple { to { stroke-dashoffset: -160; } }
.state__art .sun { animation: sun 9s ease-in-out infinite alternate; }
@keyframes sun { from { transform: translateY(26px); opacity: .35; } to { transform: translateY(-14px); opacity: .75; } }

/* ---------- the carved wall, raked by one lamp ---------- */
.wall { background: #0f0a07; }
.wall__stage { position: relative; overflow: hidden; aspect-ratio: 4 / 5; max-height: 92svh; width: 100%; cursor: ew-resize; }
.wall__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.wall__dark { filter: brightness(.36) saturate(.7) contrast(1.15); }
.wall__lit {
  filter: brightness(1.22) contrast(1.1);
  -webkit-mask-image: radial-gradient(ellipse 34% 95% at var(--rx, 30%) 44%, #000 0, rgb(0 0 0 / .55) 42%, transparent 76%);
  mask-image: radial-gradient(ellipse 34% 95% at var(--rx, 30%) 44%, #000 0, rgb(0 0 0 / .55) 42%, transparent 76%);
}
.wall__copy { padding-block: 34px clamp(70px, 10vw, 130px); display: grid; gap: 18px; }
.wall__copy h2 { max-width: 13ch; }
.wall__copy p:not(.dim) { max-width: 46ch; color: #e4d0ad; }

/* ---------- look up: canopy, lanterns, cloth, ink ---------- */
.cloth { position: relative; overflow: hidden; background: var(--cloth); color: var(--ink); padding-block: clamp(72px, 11vw, 150px) 0; }
.cloth ::selection { background: var(--ink); color: var(--cloth); }
.cloth__canopy {
  position: absolute; inset: 0 0 auto; height: min(130vw, 980px); background: url('../assets/img/art/canopy.webp') 50% 0 / cover; mix-blend-mode: multiply; opacity: .3;
  transform: scale(calc(1.16 - var(--drip, 0) * .16)); transform-origin: 50% 30%;
  -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent);
}
.cloth__head { position: relative; z-index: 2; display: grid; gap: 20px; justify-items: center; text-align: center; }
.cloth__head p { max-width: 44ch; font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: #3d2b1e; }

.lanterns { --ls: .56; position: relative; z-index: 2; height: calc(600px * var(--ls) + 30px); overflow: hidden; perspective: 1300px; perspective-origin: 50% 20%; margin-top: 8px; }
.lanterns__rig { position: absolute; left: 50%; top: calc(70px * var(--ls)); width: 0; transform: scale(var(--ls)); transform-origin: 0 0; transform-style: preserve-3d; }
.lantern { position: absolute; top: 0; left: var(--x); width: 0; transform-style: preserve-3d; transform-origin: 0 -360px; animation: hang 7s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes hang { from { transform: translateZ(var(--z)) rotateZ(-1.3deg); } to { transform: translateZ(var(--z)) rotateZ(1.3deg); } }
.lantern::before { content: ''; position: absolute; left: -2px; top: -700px; width: 4px; height: calc(700px + var(--drop)); background: #2a1a10; }
.lantern__body { position: absolute; left: 0; top: var(--drop); transform-style: preserve-3d; transform: rotateY(calc(var(--spin, 0) * var(--k) * 1deg + var(--o))); }
.face {
  position: absolute; top: 0; left: calc(var(--w) / -2); width: var(--w); height: var(--h); backface-visibility: hidden;
  transform: rotateY(var(--ry)) translateZ(var(--tz)); display: grid; grid-template-rows: 86px 1fr 86px; outline: 2px solid #2a1a10; outline-offset: -1px;
}
.face i { background: #e9d7b3 url('../assets/img/toile.webp') var(--bx) 50% / auto 100%; border-block: 2px solid #2a1a10; }
.face b {
  background:
    repeating-linear-gradient(0deg, rgb(120 82 34 / .3) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgb(120 82 34 / .3) 0 1px, transparent 1px 6px),
    radial-gradient(ellipse 120% 70% at 50% 50%, #fff6dc, #f0d7a2 60%, #dcb877);
}
.face::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(60 34 8 / .28), transparent 35%, transparent 65%, rgb(60 34 8 / .28)); }

.cloth__band {
  position: relative; z-index: 2; height: clamp(150px, 26vw, 325px); background: url('../assets/img/toile.webp') 0 50% / auto 100% repeat-x;
  border-block: 5px solid var(--ink); animation: cloth-drift 90s linear infinite; box-shadow: 0 30px 60px -30px rgb(60 36 14 / .55);
}
@keyframes cloth-drift { to { background-position: calc(clamp(150px, 26vw, 325px) * -10.8) 50%; } }
.cloth .dim { color: #a2331c; margin-top: 22px; position: relative; z-index: 2; }
.cloth__ink {
  height: clamp(190px, 44vw, 460px); margin-top: 20px;
  background: url('../assets/img/art/dots.webp') 12% 0 / auto 118% repeat-x, url('../assets/img/art/dots.webp') 71% -40px / auto 84% repeat-x;
  -webkit-mask-image: linear-gradient(#000 calc(var(--drip, 0) * 120% - 20%), transparent calc(var(--drip, 0) * 120%));
  mask-image: linear-gradient(#000 calc(var(--drip, 0) * 120% - 20%), transparent calc(var(--drip, 0) * 120%));
}

/* ---------- drawings are paper now ---------- */
.reveal { background: #eee3cb; }
.reveal.is-draft .reveal__line { filter: none; }
.reveal .titleblock {
  position: absolute; right: 10px; bottom: 10px; z-index: 3; font: 500 .56rem/1.35 var(--measure); letter-spacing: .06em; text-transform: uppercase;
  color: #3a281c; background: rgb(238 227 203 / .94); border: 1px solid #3a281c; padding: 5px 8px; opacity: calc((1 - var(--p, 0)) * 4); text-align: right;
}
.reveal.is-draft .titleblock { opacity: 1; }
.js .reveal.is-draft .stamp { background: rgb(238 227 203 / .92); color: #b3311a; }
.js .reveal.is-draft .stamp b { color: #2a1a10; }
.js .reveal.is-lit .reveal__room {
  clip-path: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p) * 122% - 22%), transparent calc(var(--p) * 122%));
  mask-image: linear-gradient(90deg, #000 calc(var(--p) * 122% - 22%), transparent calc(var(--p) * 122%));
}
.js .reveal.is-draft .reveal__room {
  -webkit-mask-image: radial-gradient(circle at var(--tx) var(--ty), #000 0, #000 calc(var(--tr) * .4), transparent var(--tr));
  mask-image: radial-gradient(circle at var(--tx) var(--ty), #000 0, #000 calc(var(--tr) * .4), transparent var(--tr));
  transition: --tr 1.5s var(--ease);
}
.js .reveal.is-draft.is-peek .reveal__room { --tr: 190%; }
.js .reveal.is-draft.is-peek .stamp, .js .reveal.is-draft.is-peek .titleblock { opacity: 0; transition: opacity .5s; }
.peek {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid rgb(241 226 198 / .45); color: var(--cane); font-size: .9rem; transition: background .4s, color .4s, border-color .4s;
}
.peek::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgb(255 217 143 / .7); animation: lamp 2.4s ease-out infinite; }
@keyframes lamp { to { box-shadow: 0 0 0 12px rgb(255 217 143 / 0); } }
.peek:hover, .peek[aria-pressed='true'] { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.peek[aria-pressed='true']::before { background: var(--ink); animation: none; }

/* ---------- menu, visit and footer wear the artwork ---------- */
.menu::before { content: ''; position: absolute; inset: 0; background: url('../assets/img/art/flow.webp') 50% 50% / cover; mix-blend-mode: luminosity; opacity: .11; pointer-events: none; }
.menu .wrap { position: relative; }
.dishes[data-state] h3 { display: flex; align-items: center; gap: 14px; }
.dishes[data-state] h3::before { content: ''; flex: none; width: 22px; height: 1.5em; background: var(--cloth-s) 0 0 / 22px auto repeat-y; box-shadow: 0 4px 12px rgb(0 0 0 / .4); }
.menu__art { margin: 44px 0 0; height: clamp(150px, 22vw, 240px); overflow: hidden; }
.menu__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.menu__art + .dishes--shared { margin-top: 0; border-top: 0; padding-top: 30px; }

.visit { position: relative; }
.visit::before, .foot::before { content: ''; display: block; height: 26px; background: url('../assets/img/art/ikat.webp') 0 0 / 70px auto; }
.visit::before { position: absolute; inset: 0 0 auto; }
.foot { padding-top: 0; }
.foot__grid { padding-top: 56px; }
.foot__guard { display: flex; align-items: center; gap: 16px; }
.foot__guard img { width: clamp(76px, 20vw, 120px); height: auto; box-shadow: 0 14px 30px rgb(0 0 0 / .5); }
.foot__guard img:last-child { transform: scaleX(-1); }
.foot__mark { text-align: center; flex: 1; }

@media (min-width: 900px) {
  .story__intro .wrap { grid-template-columns: 1.1fr 1fr; align-items: end; gap: 6vw; }
  .story__intro::after { background: linear-gradient(90deg, rgb(23 16 11 / .92), rgb(23 16 11 / .5) 60%, rgb(23 16 11 / .68)); }
  .frieze { --band-h: clamp(250px, 40svh, 420px); --strip: 56px; }
  .scene { padding-top: calc(var(--nav-h) + 6vh); }
  .scene__motif { right: 7vw; top: calc(var(--nav-h) + 5vh); width: min(30vw, 40svh); max-width: none; opacity: .92; }
  .wall__stage { aspect-ratio: 1600 / 806; }
  .wall__stage img { object-position: 50% 50%; }
  .wall__copy { grid-template-columns: 1fr 1fr; align-items: start; gap: 14px 6vw; padding-top: 48px; }
  .wall__copy h2 { grid-row: span 2; }
  .lanterns { --ls: 1; }
  .foot__grid { grid-template-columns: auto 1.6fr auto; align-items: center; }
  .foot__guard { gap: 28px; }
}
@media (min-width: 600px) and (max-width: 899px) { .lanterns { --ls: .78; } }

@media (prefers-reduced-motion: reduce) {
  .js .reveal.is-lit .reveal__room { -webkit-mask-image: none; mask-image: none; }
  .scene__motif .draw { stroke-dashoffset: 0; }
  .scene__motif .pop-in { transform: none; }
}

@media (max-width: 899px) {
  /* on a phone the motif sits in the open wall between the words and the skyline */
  .scene__motif { top: auto; right: 5vw; bottom: calc(var(--dock-h) + var(--panel-w) / 4 + 2svh); width: min(42vw, 19svh); opacity: .9; }
  .reveal .titleblock { top: 10px; bottom: auto; }
}