/* foicat: a museum hall seen from the upper gallery. One generated picture per layout (wide 16:9, tall 9:16);
   every object sits on it in % of the picture, measured from its pixels. No crops stacked, no seams. */
@font-face { font-family: "Jost"; src: url(/fonts/jost.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Mono"; src: url(/fonts/mono.woff2) format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; }

:root {
  --bg: #e6dcc6; --ink: #3a2a1e; --accent: #b08a3e;
  --velvet: #7a1e2b; --brass: #6e4c14; --engrave: #d8b56c; --paper: #f2e8d2; --gold: #ffc84a;
  --font-display: "Jost", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Mono", ui-monospace, monospace;
}
:focus-visible { outline: 3px solid var(--velvet); outline-offset: 3px; }
body { background: #2a2220; color: var(--ink); overflow-x: hidden; }
p { margin: 0; }

/* ---------- the window and the picture ---------- */
.win { position: relative; height: 100svh; overflow: hidden; }
.stage {
  --ax: 80%;
  position: absolute; left: var(--ax); top: 50%;
  width: max(100vw, 177.78svh); aspect-ratio: 16 / 9;
  transform: translate(calc(var(--ax) * -1), -50%);
  container-type: inline-size;
}
.stage picture, .stage .bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .bg { animation: flicker 7s steps(1) infinite; }
@keyframes flicker { 0%,100% { filter: none; } 31% { filter: brightness(1.025); } 33% { filter: none; } 62% { filter: brightness(.985); } 64% { filter: none; } }
.stage > :not(picture) { position: absolute; }
.box { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); }

/* a round part of the picture itself (the red button, the key faces): it moves when pressed, nothing is pasted on */
.cap {
  left: calc((var(--cx) - var(--d) / 2) * 1%); top: calc((var(--cy) - var(--dh) / 2) * 1%);
  width: calc(var(--d) * 1%); height: calc(var(--dh) * 1%);
  border: 0; padding: 0; min-height: 0; border-radius: 50%; cursor: pointer;
  background: var(--pic) no-repeat;
  background-size: calc(10000% / var(--d)) calc(10000% / var(--dh));
  background-position: calc((var(--cx) - var(--d) / 2) / (100 - var(--d)) * 100%) calc((var(--cy) - var(--dh) / 2) / (100 - var(--dh)) * 100%);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .25s ease-out;
  display: grid; place-items: center;
}
.cap::after { content: ""; position: absolute; inset: -30%; border-radius: 50%; }
.cap:hover { filter: brightness(1.1); }
.cap:active, .cap.is-down { transform: translateY(6%) scale(.94); filter: brightness(.82); transition-duration: 35ms; box-shadow: inset 0 .2cqw .4cqw rgba(40,20,10,.45); }
.key .mark { width: 54%; height: auto; pointer-events: none; mix-blend-mode: multiply; }
.key.is-off { opacity: 1; cursor: default; } .key.is-off .mark { opacity: .4; }
.key.is-off:active { transform: none; filter: none; box-shadow: none; }

canvas.sky, canvas.fx, canvas.smoke { pointer-events: none; }
canvas.fx { inset: 0; width: 100%; height: 100%; }

/* ---------- words, set in the hall's own lettering ---------- */
.walltext { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); }
.wt-k { font: 600 max(16px, .9cqw)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .16em; color: var(--brass); }
.wt-t { margin-top: .25em; font: 600 max(20px, 1.4cqw)/1.15 var(--font-display); color: var(--ink); }
.wt-b { margin-top: .45em; font: 400 max(16px, 1.02cqw)/1.35 var(--font-body); color: #4a3a2c; }
.wt-go { display: none; }
.door-words { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); text-align: center;
  font: 600 max(16px, .95cqw)/1 var(--font-display); text-transform: uppercase; letter-spacing: .12em; color: var(--brass); transition: color .25s; pointer-events: none; }
.door { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); }
.door:hover ~ .door-words, .door:focus-visible ~ .door-words { color: var(--velvet); }
.risk { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); text-align: center;
  font: 500 max(16px, .95cqw)/1.15 var(--font-display); letter-spacing: .04em; color: var(--engrave); text-shadow: 0 -1px 0 rgba(0,0,0,.55), 0 1px 0 rgba(255,220,150,.15); }

/* the ticket that hangs from the desk printer: its paper is in the picture, the print is set on it */
.ticket { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  padding: .35cqw .45cqw 0; overflow-wrap: anywhere; color: var(--velvet); }
.t-l { font: 600 max(16px, .9cqw)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .12em; }
.ticket code { display: block; margin-top: .15em; font: 500 max(16px, .98cqw)/1.18 var(--font-mono); font-stretch: 75%; font-variation-settings: "wdth" 75; color: var(--ink); }
.t-stub { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  min-height: 0; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center;
  font: 700 max(16px, .9cqw)/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--velvet); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.t-stub::after { content: ""; position: absolute; inset: -40% 0; }
.t-stub:hover { color: var(--ink); }
.t-stub:active { transform: translateY(2px) rotate(1.5deg); transition-duration: 35ms; }

/* ---------- the hall, wide picture ---------- */
.page-hall .stage { --pic: url(/img/hall-w.webp); --hat-x: 35.9; --hat-y: 44.2; --land: 15 60 47 57; }
.page-hall canvas.sky { left: 11.5%; top: 29%; width: 58.5%; height: 11%; }
.page-hall .walltext { --x: 12.6; --y: 13.4; --w: 21; }
.page-hall .door { --x: 76; --y: 18; --w: 16.4; --h: 32; }
.page-hall .door-words { --x: 79.5; --y: 13.6; --w: 15; }
.page-hall .signal { --cx: 38.24; --cy: 67.24; --d: 2.3; --dh: 4.08; }
.page-hall .k1 { --cx: 82.92; --cy: 77.31; --d: 2.39; --dh: 4.25; }
.page-hall .k2 { --cx: 87.02; --cy: 78.0; --d: 2.39; --dh: 4.25; }
.page-hall .k3 { --cx: 91.09; --cy: 78.53; --d: 2.39; --dh: 4.25; }
.page-hall .ticket { --x: 70.2; --y: 70.9; --w: 8.5; --h: 13.6; }
.page-hall .t-stub { --x: 70.2; --y: 86.3; --w: 8.5; --h: 3.9; }
.page-hall .risk { --x: 80.6; --y: 81.3; --w: 13.2; }

/* the cat in the diorama */
.cat { left: 33.8%; top: 42.9%; width: 4.27%; aspect-ratio: 400 / 790; }
.cat::before { content: ""; position: absolute; left: -8%; right: -8%; bottom: -3%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(10,12,20,.55), transparent); }
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .35s ease-out; }
.cat .c-up, .cat .c-away { opacity: 0; }
.cat[data-pose="up"] .c-sit, .cat[data-pose="away"] .c-sit { opacity: 0; }
.cat[data-pose="up"] .c-up, .cat[data-pose="away"] .c-away { opacity: 1; }
.cat[data-pose="up"] .c-up { filter: drop-shadow(0 -.3cqw .6cqw rgba(255,200,74,.7)); }

/* the saucer */
.saucer { left: 33.4%; top: -26%; width: 9.4%; aspect-ratio: 560 / 470; transition: top 2.4s cubic-bezier(.3,.7,.2,1); }
.saucer[data-at="hover"] { top: 21.5%; }
.saucer img { position: absolute; width: 100%; left: 0; top: 0; }
.saucer .s-ok { animation: bob 3.2s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(6%) rotate(-2deg); } }
.saucer .s-boom { width: 150%; left: -25%; top: -18%; opacity: 0; transform: scale(.4); }
.saucer[data-boom] .s-ok { opacity: 0; }
.saucer[data-boom] .s-boom { animation: boom 1.1s ease-out forwards; }
@keyframes boom { 0% { opacity: 1; transform: scale(.4); } 25% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.25); } }
.debris { inset: 0; pointer-events: none; }
.debris img { position: absolute; width: 2.4%; }
.glyphs { inset: 0; pointer-events: none; }
.glyphs img { position: absolute; width: 2.2%; opacity: 0; animation: rise 2.6s ease-out forwards; filter: drop-shadow(0 0 .4cqw rgba(255,200,74,.9)); }
@keyframes rise { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-9cqw) scale(1.1); } }

/* ---------- the debris room, wide picture ---------- */
.page-debris .stage { --ax: 70%; --pic: url(/img/debris-w2.webp); }
.page-debris canvas.smoke { left: 28%; top: 18%; width: 44%; height: 30%; }
.page-debris .walltext { --x: 22.8; --y: 21.4; --w: 30; }
.page-debris .lore { font-size: max(20px, 1.3cqw); }
.page-debris .door { --x: 2.4; --y: 20; --w: 18; --h: 35; }
.page-debris .door-words { --x: 1.5; --y: 14.8; --w: 13; }
.page-debris .k1 { --cx: 85.13; --cy: 82.18; --d: 1.95; --dh: 3.47; }
.page-debris .k2 { --cx: 88.42; --cy: 82.6; --d: 1.95; --dh: 3.47; }
.page-debris .k3 { --cx: 91.75; --cy: 82.96; --d: 1.95; --dh: 3.47; }
.page-debris .risk { --x: 74.9; --y: 80; --w: 8.4; }

/* ---------- 404 ---------- */
.page-404 .walltext { --x: 79.5; --y: 21; --w: 12.4; }
.page-404 .wt-k { margin: 0; font-size: max(20px, 2.4cqw); }
.page-404 .wt-home { display: inline-block; margin-top: .8em; min-height: 44px; padding-top: 10px; font: 600 max(16px, 1cqw)/1 var(--font-display); text-transform: uppercase; letter-spacing: .12em; color: var(--velvet); }
.page-404 .door { --x: 5.5; --y: 20; --w: 19.5; --h: 38; }

/* ---------- tall screens: the tall picture of the same room ---------- */
@media (max-aspect-ratio: 6/5) {
  .win { height: max(100svh, 177.78vw); }
  .stage { --ax: 62%; top: 0; width: calc(max(100svh, 177.78vw) * .5625); aspect-ratio: 9 / 16; transform: translateX(calc(var(--ax) * -1)); }
  .wt-k, .wt-b { display: none; }
  .wt-t { font-size: max(18px, 4.4cqw); }
  .wt-go { display: inline-block; margin-top: .35em; min-height: 44px; padding-top: 8px; font: 600 16px/1 var(--font-display); text-transform: uppercase; letter-spacing: .12em; color: var(--velvet); }
  .t-l { display: none; }
  .ticket { padding: 1.4cqw 1.6cqw 0; }
  .ticket code { font-size: max(16px, 3.6cqw); }
  .t-stub, .risk { font-size: max(16px, 3.4cqw); }
  .t-stub { text-transform: none; letter-spacing: .02em; }

  .page-hall .stage { --ax: 65%; --pic: url(/img/hall-t.webp); --hat-x: 45.7; --hat-y: 42.4; --land: 12 72 43 50; }
  .page-hall canvas.sky { left: 7.5%; top: 32%; width: 70%; height: 6%; }
  .page-hall .walltext { --x: 18.5; --y: 20.3; --w: 62; text-align: center; }
  .page-hall .wt-t { line-height: 1.08; }
  .page-hall .wt-go { margin-top: 0; padding-top: 4px; }
  .page-hall .door, .page-hall .door-words { display: none; }
  .page-hall .signal { --cx: 44.35; --cy: 51.63; --d: 4.3; --dh: 2.42; }
  .page-hall .k1 { --cx: 57.07; --cy: 76.26; --d: 6.6; --dh: 3.71; }
  .page-hall .k2 { --cx: 68.97; --cy: 76.26; --d: 6.6; --dh: 3.71; }
  .page-hall .k3 { --cx: 80.87; --cy: 76.26; --d: 6.6; --dh: 3.71; }
  .page-hall .ticket { --x: 14.9; --y: 68.4; --w: 31; --h: 14.8; }
  .page-hall .t-stub { --x: 14.9; --y: 83.8; --w: 31; --h: 3.7; }
  .page-hall .risk { --x: 48.5; --y: 79.2; --w: 41; }
  .cat { left: 43%; top: 41.8%; width: 5.4%; }
  .saucer { left: 18%; width: 16%; }
  .saucer[data-at="hover"] { top: 30.5%; }
  .debris img, .glyphs img { width: 4.4%; }

  .page-debris .stage { --ax: 35%; --pic: url(/img/debris-t.webp); }
  .page-debris canvas.smoke { left: 22%; top: 26%; width: 56%; height: 16%; }
  .page-debris .walltext { --x: 34; --y: 23.6; --w: 51; text-align: center; }
  .page-debris .wt-t { display: none; }
  .page-debris .wt-b { display: block; margin: 0; }
  .page-debris .lore { font-size: max(16px, 3.6cqw); }
  .page-debris .door { --x: 2; --y: 21; --w: 29; --h: 20; }
  .page-debris .door-words { --x: 6.5; --y: 18.2; --w: 27; font-size: 16px; letter-spacing: .04em; white-space: nowrap; }
  .page-debris .k1 { --cx: 56.32; --cy: 79.55; --d: 5.6; --dh: 3.15; }
  .page-debris .k2 { --cx: 66.21; --cy: 79.84; --d: 5.6; --dh: 3.15; }
  .page-debris .k3 { --cx: 76.09; --cy: 80.14; --d: 5.6; --dh: 3.15; }
  .page-debris .risk { --x: 11.5; --y: 77; --w: 34; }

  .page-404 .win { height: 100svh; }
  .page-404 .stage { --ax: 42%; top: 50%; width: max(100vw, 177.78svh); aspect-ratio: 16 / 9; transform: translate(-42%, -50%); }
  .page-404 .walltext { --x: 31.5; --y: 17; --w: 17; }
  .page-404 .wt-k, .page-404 .wt-b { display: block; }
  .page-404 .wt-t { font-size: 22px; }
  .page-404 .wt-b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .saucer, .saucer img { transition: none; animation: none; } .stage .bg { animation: none; } }