/* The door button: a petrol-blue pill on a black page, with a door in its round right end. The frame, the door, its
   handle and the room behind are CSS (the door turns in 3D on its hinges); the blade of light on the pill is drawn by
   script.js on a canvas, and the small figure that walks through the door is an SVG redrawn every frame. */
:root {
  --page: #000000;          /* the page */
  --wall: #17343a;          /* the pill, the wall the door is in, at its top */
  --wall-deep: #0b1d21;     /* the wall at its foot */
  --ink: #f3ead8;           /* the words */
  --muted: #8fa7a5;         /* the small line over the words, and the words while it works */
  --door: #a8502f;          /* the door, painted */
  --door-deep: #6f2e19;     /* the door in its own shadow, by the hinges */
  --frame: #eadfc8;         /* the frame round the door, and the sill */
  --frame-shade: #a59a83;   /* the frame where it turns away from the light */
  --brass: #e2bd74;         /* the handle */
  --light: #ffc56e;         /* the warm light of the room: the blade on the pill, the line under the door */
  --light-hot: #fff3d9;     /* the bulb, and the light where it is strongest */
  --room: #4a321d;          /* the back wall of the room, lit */
  --dark: #040809;          /* the room with its light off */
  --figure: #060d0f;        /* the small figure, seen against the light */
  --focus: #f3ead8;         /* the ring of the keyboard's focus */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Mona Sans Variable', 'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 72px 16px;
}

.exit {
  display: grid;
  justify-items: center;
}

/* ---------------------------------------------------------------- the pill */
.exit__btn {
  position: relative;
  display: block;
  /* the script sets the width from the longest words; this is the width before it does */
  width: 246px;
  max-width: calc(100vw - 32px);
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.exit__btn[aria-disabled='true'] {
  cursor: progress;
}

/* the fill is a layer of its own, so it can swell past the pill with a bounce without moving anything */
.exit__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(80% 130% at 22% 0%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(180deg, var(--wall), var(--wall-deep));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: inset 0.6s cubic-bezier(0.34, 1.9, 0.45, 1);
}

.exit__btn:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 5px;
}

html[data-using='pointer'] .exit__btn:focus-visible {
  outline: none;
}

/* the light from the door, drawn over the wall and under everything else; the pill clips it */
.exit__light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ---------------------------------------------------------------- the words */
.exit__faces {
  position: absolute;
  inset: 0 0 0 26px;
  pointer-events: none;
}

.exit__face {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: max-content;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 5px;
  text-align: left;
  white-space: nowrap;
}

.exit__face[aria-hidden='true'] {
  opacity: 0;
  visibility: hidden;
}

.exit__lead {
  font-size: 11.5px;
  font-weight: 520;
  letter-spacing: 0.012em;
  line-height: 1;
  color: var(--muted);
}

/* the action widens on the typeface's width axis under the pointer; the wide copy, invisible and zero high, holds its
   room, so nothing moves */
.exit__word {
  display: inline-grid;
  font-size: 17px;
  font-weight: 640;
  font-stretch: 100%;
  letter-spacing: -0.01em;
  line-height: 1;
  transition: font-stretch 0.6s cubic-bezier(0.34, 1.9, 0.45, 1), font-weight 0.6s cubic-bezier(0.34, 1.9, 0.45, 1);
}

.exit__word::before {
  content: attr(data-wide);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-stretch: 118%;
  font-weight: 700;
}

/* while it works: the words in a quieter tone, with a sheen running through them */
.exit__shine {
  font-size: 17px;
  font-weight: 560;
  letter-spacing: -0.004em;
  line-height: 1;
  color: var(--muted);
  background: linear-gradient(100deg, var(--muted) 0%, var(--muted) 38%, var(--ink) 50%, var(--muted) 62%, var(--muted) 100%);
  background-size: 260% 100%;
  background-position: var(--sheen, 100%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* done: the words alone, large, before they shrink into the small line */
.exit__big {
  font-size: 17px;
  font-weight: 640;
  letter-spacing: -0.01em;
  line-height: 1;
  transform-origin: 0 0;
}

/* ---------------------------------------------------------------- the door */
/* the doorway in the round right end: 32 wide and 43 high, frame and sill included; the opening is 24 by 37 */
.exit__doorway {
  position: absolute;
  right: 17px;
  top: 11px;
  width: 32px;
  height: 43px;
  pointer-events: none;
}

/* the room behind: dark, with a lit back wall that the light fades in and out, and a bulb hanging on its cord */
.exit__room {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 24px;
  height: 37px;
  overflow: hidden;
  background: var(--dark);
}

.exit__wall {
  position: absolute;
  inset: 0;
  opacity: var(--lit, 1);
  background:
    radial-gradient(70% 45% at 30% 26%, rgba(255, 238, 200, 0.9), transparent 70%),
    linear-gradient(180deg, var(--light) 0%, var(--room) 70%, color-mix(in srgb, var(--room) 60%, #000) 71%, color-mix(in srgb, var(--room) 40%, #000) 100%);
}

.exit__cord {
  position: absolute;
  left: 7.4px;
  top: 0;
  width: 0.7px;
  height: 8px;
  background: rgba(0, 0, 0, 0.55);
}

.exit__bulb {
  position: absolute;
  left: 5.6px;
  top: 7.6px;
  width: 4.2px;
  height: 4.6px;
  border-radius: 45% 45% 50% 50%;
  background: color-mix(in srgb, var(--light-hot) calc(var(--lit, 1) * 100%), #3b3f40);
  box-shadow: 0 0 calc(var(--lit, 1) * 7px) calc(var(--lit, 1) * 2px) color-mix(in srgb, var(--light) calc(var(--lit, 1) * 90%), transparent);
}

/* the door turns in 3D round its hinges on the right, into the room */
.exit__persp {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 24px;
  height: 37px;
  perspective: 90px;
  perspective-origin: 50% 50%;
}

.exit__door {
  position: absolute;
  inset: 0;
  transform-origin: 100% 50%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--door) 86%, #fff) 0%, var(--door) 30%, var(--door-deep) 100%);
  box-shadow: inset 0 0 0 0.6px rgba(0, 0, 0, 0.35);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* two recessed panels, lit from the upper left */
.exit__panel {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 0.6px;
  box-shadow:
    inset 0.7px 0.7px 0 rgba(0, 0, 0, 0.42),
    inset -0.7px -0.7px 0 rgba(255, 220, 190, 0.28),
    0.5px 0.5px 0 rgba(255, 220, 190, 0.18);
}

.exit__panel--top {
  top: 4px;
  height: 15px;
}

.exit__panel--low {
  top: 23px;
  height: 10px;
}

/* the door turning away from the hall gets darker */
.exit__shade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
}

.exit__handle {
  position: absolute;
  left: 2.6px;
  top: 19px;
  width: 0;
  height: 0;
}

.exit__rose {
  position: absolute;
  left: -1.5px;
  top: -1.5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6dc, var(--brass) 55%, color-mix(in srgb, var(--brass) 55%, #000));
  box-shadow: 0.4px 0.6px 0.6px rgba(0, 0, 0, 0.55);
}

.exit__lever {
  position: absolute;
  left: 0;
  top: -0.9px;
  width: 7.2px;
  height: 1.8px;
  border-radius: 1px;
  background: linear-gradient(180deg, #fff3d4, var(--brass) 50%, color-mix(in srgb, var(--brass) 60%, #000));
  box-shadow: 0.4px 0.9px 0.8px rgba(0, 0, 0, 0.5);
  transform-origin: 0 50%;
}

/* the frame: two jambs and a lintel, cream, lit from the upper left; it stands a little proud of the wall */
.exit__frame {
  position: absolute;
  inset: 0 0 2px 0;
  border: 4px solid var(--frame);
  border-bottom: 0;
  border-right-color: var(--frame-shade);
  border-radius: 1px 1px 0 0;
  box-shadow:
    1px 1.5px 2px rgba(0, 0, 0, 0.5),
    inset 0.6px 0.6px 0 rgba(0, 0, 0, 0.4);
}

.exit__sill {
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0;
  height: 2.4px;
  border-radius: 0.6px;
  background: linear-gradient(180deg, #fff9ec, var(--frame-shade));
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.55);
}

/* the light under the door, while the door is shut and the light is on */
.exit__under {
  position: absolute;
  left: 4.5px;
  width: 23px;
  bottom: 2.3px;
  height: 1px;
  background: var(--light-hot);
  box-shadow: 0 0 3px 0.6px var(--light);
  opacity: 0;
}

/* ---------------------------------------------------------------- the figure */
.exit__walker {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.exit__limb {
  fill: none;
  stroke: var(--figure);
  stroke-width: 3.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exit__limb--arm {
  stroke-width: 2.5;
}

.exit__limb--body {
  stroke-width: 4.4;
}

.exit__limb--far {
  stroke: color-mix(in srgb, var(--figure) 62%, var(--wall));
}

.exit__head {
  fill: var(--figure);
}

/* ---------------------------------------------------------------- under the pointer */
@media (hover: hover) and (pointer: fine) {
  .exit__btn:not([aria-disabled='true']):hover .exit__fill {
    inset: -2px -7px;
  }

  .exit__btn:not([aria-disabled='true']):hover .exit__word {
    font-stretch: 118%;
    font-weight: 700;
  }
}

/* the keys bring the focus: the words widen as under the pointer */
html[data-using='keys'] .exit__btn:focus-visible .exit__word {
  font-stretch: 118%;
  font-weight: 700;
}

/* ---------------------------------------------------------------- reduced motion: no swelling, no widening */
@media (prefers-reduced-motion: reduce) {
  .exit__fill,
  .exit__word {
    transition: filter 0.3s ease;
  }

  html[data-using='keys'] .exit__btn:focus-visible .exit__word {
    font-stretch: 100%;
    font-weight: 640;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .exit__btn:not([aria-disabled='true']):hover .exit__fill {
    inset: 0;
    filter: brightness(1.25);
  }

  .exit__btn:not([aria-disabled='true']):hover .exit__word {
    font-stretch: 100%;
    font-weight: 640;
  }
}