/*
 * SYSTEM FILMS. The page a film is drawn on: 960 x 540, recorded at 2x to
 * 1920 x 1080. Every value a film needs is a token here; a film adds only
 * the drawing of its own figures.
 */
:root {
  /* Ink on white. Four greys and no colour: the figure is a diagram, not a picture. */
  --ink: #111;
  --quiet: #767676;
  --rule: #e2e2e2;
  --fill: #d6d6d6;
  --mark: #8a8a8a;
  --paper: #fff;

  /* One figure, one caption. */
  --fig-x: 96px;
  --fig-y: 150px;
  --fig-w: 400px;
  --fig-h: 240px;
  --text-x: 560px;
  --text-w: 300px;

  --type: 13px/18px "Suisse Intl", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --type-small: 11px;
  --bar: 6px;
}

/* The house face, Suisse Int'l, carried with the kit so a film looks the
   same wherever it plays. */
@font-face {
  font-family: "Suisse Intl";
  src: url("fonts/SuisseIntl-Regular.woff2") format("woff2");
  font-display: block;
}

html, body { margin: 0; background: var(--paper); }
/* Live, the page sits centred in whatever frame it is given. */
html { height: 100%; display: flex; align-items: center; justify-content: center; }
body {
  width: 960px; height: 540px; overflow: hidden; position: relative;
  font: var(--type); color: var(--ink); -webkit-font-smoothing: antialiased;
}

/* A scene: shown, demonstrated, hidden. Only one is ever visible. */
.scene { position: absolute; inset: 0; opacity: 0; }
.fig { position: absolute; left: var(--fig-x); top: var(--fig-y); width: var(--fig-w); height: var(--fig-h); }
.caption { position: absolute; left: var(--text-x); top: var(--fig-y); width: var(--text-w); }
.caption h2 { font: inherit; margin: 0 0 18px; }
.caption p { margin: 0 0 18px; }
.caption .numbers { color: var(--quiet); }

/* The figure's parts. A screen is a hairline rectangle; text inside a
   figure is drawn as bars, a heading as a darker bar, a selection in ink. */
.screen { position: absolute; inset: 0; border: 1px solid var(--rule); overflow: hidden; background: var(--paper); }
.bar { position: absolute; height: var(--bar); background: var(--fill); }
.bar.heading { background: var(--mark); }
.bar.selected { background: var(--ink); }
.hairline { position: absolute; height: 1px; background: var(--rule); }
.label { font-size: var(--type-small); color: var(--quiet); }
.label.on { color: var(--ink); }

/* A finger: where a person would act, a grey circle comes down, moves and lifts. */
.touch {
  position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; z-index: 5;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: rgb(118 118 118 / 0.28);
  box-shadow: inset 0 0 0 1px rgb(118 118 118 / 0.32);
}

/* The orbit, live: its wordmark an eighth of the frame's width, centred,
   from a recording already shrunk to about this size (kit/sting). */
#sting { position: absolute; inset: 0; opacity: 0; display: flex; align-items: center; justify-content: center; }
#sting video { width: calc(3840px * 120 / 1508); height: auto; opacity: 0; }

/* A pointer: the arrow, in ink, for films about a mouse rather than a hand. */
.pointer { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; width: 12px; height: 18px; }

/* Compact: a phone's frame. The figure alone under its title; the sting
   keeps its eighth of the width. */
body.compact { width: 448px; height: 312px; }
body.compact .fig { left: 24px; top: 48px; }
body.compact .caption { left: 24px; top: 18px; width: 400px; }
body.compact .caption h2 { margin: 0; }
body.compact .caption p { display: none; }
body.compact #sting video { width: calc(3840px * 50 / 1508); }