/* Through the keyhole: a corridor at night, period doors with brass locks, and behind each door a room in its own
   light. The colours of the doors and walls change with data-door on the drawing; the rooms carry their own. */
:root {
  --page: #000000;          /* the dark inside the lock */
  --brass: #d6a654;         /* the hook, the ticks of the lock */
  --light: #ffd58c;         /* the light of the room, through the keyhole and under the door */
  --ui: #f4ead6;            /* the button */
  --ui-ink: #1b1512;        /* the words on the button */
  --caption: #efe4cf;       /* the name of the place, in the corridor */

  /* the hotel door */
  --wall-0: #16323a;
  --wall-line-0: #1d3f48;
  --motif-0: #24505a;
  --leaf-0: #5d1a21;
  --panel-0: #4a131a;
  --panel-in-0: #6c242c;
  --frame-0: #e3d4b6;
  --frame-lo-0: #bba886;
  --floor-0: #2a1b15;

  /* the gallery door */
  --wall-1: #3a3833;
  --wall-line-1: #44413b;
  --motif-1: #4d4a43;
  --leaf-1: #1d3b31;
  --panel-1: #152d25;
  --panel-in-1: #26493d;
  --frame-1: #d8d1c0;
  --frame-lo-1: #aea592;
  --floor-1: #2b2119;

  /* the winter garden door */
  --wall-2: #57291c;
  --wall-line-2: #622f21;
  --motif-2: #6e3727;
  --leaf-2: #1b2541;
  --panel-2: #141c33;
  --panel-in-2: #253154;
  --frame-2: #e8dbc2;
  --frame-lo-2: #bdaa8a;
  --floor-2: #24170f;
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--page);
  color: var(--caption);
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--page);
}

/* ---- the corridor and the door ---- */
.hall {
  position: absolute;
  inset: 0;
}

.door {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.door[data-door="0"] { --wall: var(--wall-0); --wall-line: var(--wall-line-0); --motif: var(--motif-0); --leaf: var(--leaf-0); --panel: var(--panel-0); --panel-in: var(--panel-in-0); --frame: var(--frame-0); --frame-lo: var(--frame-lo-0); --floor: var(--floor-0); }
.door[data-door="1"] { --wall: var(--wall-1); --wall-line: var(--wall-line-1); --motif: var(--motif-1); --leaf: var(--leaf-1); --panel: var(--panel-1); --panel-in: var(--panel-in-1); --frame: var(--frame-1); --frame-lo: var(--frame-lo-1); --floor: var(--floor-1); }
.door[data-door="2"] { --wall: var(--wall-2); --wall-line: var(--wall-line-2); --motif: var(--motif-2); --leaf: var(--leaf-2); --panel: var(--panel-2); --panel-in: var(--panel-in-2); --frame: var(--frame-2); --frame-lo: var(--frame-lo-2); --floor: var(--floor-2); }

.door .v0,
.door .v1,
.door .v2 {
  display: none;
}

.door[data-door="0"] .v0,
.door[data-door="1"] .v1,
.door[data-door="2"] .v2 {
  display: inline;
}

.wp-base { fill: var(--wall); }
.wp-line { fill: var(--wall-line); }
.wp-motif { fill: var(--motif); }
.warm-a { stop-color: var(--light); stop-opacity: 0.55; }
.warm-b { stop-color: var(--light); stop-opacity: 0; }
.sconce__glow { opacity: 0.55; }
.sconce__arm { stroke: var(--brass); stroke-width: 4; fill: none; }
.sconce__shade { fill: #f3dcae; }
.skirting { fill: var(--frame-lo); }
.floor { fill: var(--floor); }
.plank { stroke: #000; stroke-opacity: 0.28; stroke-width: 2; fill: none; }
.underglow { opacity: 0.6; }
.frame { fill: var(--frame); }
.frame-lo { fill: none; stroke: var(--frame-lo); stroke-width: 4; }
.v2 .frame-lo { fill: var(--frame-lo); stroke: none; }
.fan { fill: var(--light); opacity: 0.75; }
.fan__bars { stroke: var(--frame); stroke-width: 5; fill: none; }
.door-shadow { fill: #000; opacity: 0.35; }
.leaf { fill: var(--leaf); }
.leaf-edge { fill: none; stroke: #000; stroke-opacity: 0.35; stroke-width: 3; }
.panel { fill: var(--panel); }
.panel-in { fill: var(--panel-in); }
.plaque__line { fill: none; stroke: #7e5622; stroke-width: 0.8; }
.plaque__text {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: 11.5px;
  font-variation-settings: 'opsz' 9, 'SOFT' 50;
  font-weight: 600;
  letter-spacing: 0.4px;
  fill: #3c2810;
}
.plaque__glint { fill: #fff6dc; opacity: 0; }
.spill { opacity: 0; }
.hook path { fill: none; stroke: var(--brass); stroke-width: 2.6; stroke-linecap: round; }
.lock__line { fill: none; stroke: #7e5622; stroke-width: 1; }
.lock__shine { fill: #fff7dd; opacity: 0.8; }
.keyhole { fill: #0b0705; }
.ticks {
  fill: none;
  stroke: #ffe1a0;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

.leaf-hit {
  cursor: pointer;
}

/* the name of the place, top left of the corridor */
.where {
  position: absolute;
  top: max(22px, env(safe-area-inset-top));
  left: max(24px, env(safe-area-inset-left));
  margin: 0;
  display: grid;
  gap: 4px;
  max-width: calc(100% - 48px);
  pointer-events: none;
}

.where__place {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-variation-settings: 'opsz' 48, 'SOFT' 60;
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.where__floor {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* ---- the dark inside the lock ---- */
.veil {
  position: absolute;
  inset: 0;
  background: var(--page);
  opacity: 0;
  pointer-events: none;
}

/* ---- the rooms ---- */
.room {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.room__inner {
  position: absolute;
  inset: 0;
}

.scene {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.scene.is-on {
  visibility: visible;
}

.scene__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.room__light {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, #fff3d2 0%, var(--light) 45%, #e7a24c 100%);
}

.scene__text {
  position: absolute;
  top: max(26px, env(safe-area-inset-top));
  left: max(28px, env(safe-area-inset-left));
  max-width: min(520px, calc(100% - 56px));
  color: var(--ink, #f3ead8);
}

.scene[data-scene="0"] { --ink: #f5ecda; --soft: #c5cbe4; --scrim: 30, 43, 80; }
.scene[data-scene="1"] { --ink: #24211c; --soft: #6e665a; --scrim: 233, 226, 212; }
.scene[data-scene="2"] { --ink: #1d3329; --soft: #3f5a4d; --scrim: 243, 239, 219; }

/* the title sits over the drawing: a soft veil of the room's own colour, from the top left corner, keeps it readable */
.scene::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: min(820px, 100%);
  height: 360px;
  background: radial-gradient(ellipse 100% 100% at 0 0, rgba(var(--scrim), 0.94) 0%, rgba(var(--scrim), 0.8) 45%, rgba(var(--scrim), 0) 100%);
  z-index: 1;
  pointer-events: none;
}

.scene__text {
  z-index: 2;
}

.scene__place {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft);
}

.scene__title {
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'WONK' 1;
  font-weight: 420;
  font-size: clamp(36px, 6.4vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.scene__line {
  margin: 14px 0 0;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--soft);
}

/* the letters of the titles, one span each, inside a word that does not break */
.w {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  vertical-align: top;
}

.c {
  display: inline-block;
}

/* ---- the rim of light round the opening keyhole ---- */
.rim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.rim__wide {
  fill: none;
  stroke: var(--light);
  stroke-width: 14;
  stroke-opacity: 0.22;
  stroke-linejoin: round;
}

.rim__thin {
  fill: none;
  stroke: #fff1cf;
  stroke-width: 2;
  stroke-opacity: 0.8;
  stroke-linejoin: round;
}

/* ---- the key ---- */
.key {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.key__shadow {
  fill: #000;
  opacity: 0.35;
}

.key__turn {
  width: 100%;
  height: 100%;
}

.key__art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---- the button ---- */
.dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(22px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.act {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px 13px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ui);
  color: var(--ui-ink);
  font: 600 15px/1 'Instrument Sans Variable', system-ui, sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  transition: transform 0.5s cubic-bezier(0.34, 1.8, 0.5, 1), box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.act:active {
  transform: scale(0.95);
  transition-duration: 0.12s;
}

.act:focus-visible {
  outline: 2px solid var(--light);
  outline-offset: 3px;
}

.act__icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.6s cubic-bezier(0.34, 1.8, 0.5, 1);
}

.act__label {
  display: inline-block;
  overflow: hidden;
  padding: 2px 0;
}

.act__label span {
  display: inline-block;
}

@media (hover: hover) {
  .act:hover {
    transform: scale(1.05);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  }

  .act:hover .act__icon {
    transform: rotate(-35deg);
  }

  .act:active {
    transform: scale(0.95);
  }
}

.act[aria-busy="true"] {
  cursor: progress;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .where__floor {
    font-size: 11px;
  }

  .scene__place {
    font-size: 11px;
  }
}