/*
 * The live site. There is one element on it.
 *
 * Everything about how the mark LOOKS was decided in /dev/drawing and is baked
 * into the recording — the beam, the burn, the film. This file only has to put a
 * video on a page without a seam anywhere.
 */

:root {
  /* The pair the machine chose. Also in index.html as theme-color, so the browser
     chrome above the page matches the ground rather than stopping at a hard line.
     These are the FLAT colours — the fallback under the photograph, and what shows
     for the moment before it arrives. */
  --ground: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root { --ground: #141112; }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--ground);
  overflow: hidden;
  /* iOS Safari ignores the viewport meta's user-scalable=no in places; this stops
     a double-tap zooming a page that has nothing to zoom into. */
  touch-action: none;
  -webkit-text-size-adjust: 100%;
}

.stage {
  position: fixed;
  inset: 0;
  background: var(--ground);
}

/*
 * The material, underneath. It is the same photograph the recording was made over,
 * fitted the same way, so if the video never arrives the page is still the right
 * object — just standing still and unmarked.
 *
 * The image URL is set from config.js by site.js rather than written here, so the
 * ground is changed in exactly one place.
 */
.ground {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*
 * COVER, AND THE MARK IS DRAWN SMALL INSIDE THE FRAME TO PAY FOR IT.
 *
 * A canvas re-fits itself to any window. A recording cannot — it is one frame
 * shape — so `cover` fills the viewport and crops whatever does not match. The
 * recorder draws the mark well inside the frame (see `video.safeMargin` in
 * config.js) precisely so that the crop only ever eats material.
 */
.mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* A poster that has not loaded is a transparent box; the ground shows through it
     rather than a black rectangle. */
  background: transparent;
  pointer-events: none;
  user-select: none;
}

/* Nothing to play yet, or nothing that will play here. The ground carries the page
   on its own. */
.mark.is-absent { display: none; }

/*
 * Reduced motion is handled in site.js, not here, and the difference matters: this
 * element is hidden by a stylesheet only when there is nothing to show. Under
 * reduced motion the video stays exactly where it is and is simply never given a
 * source, so the browser shows its POSTER — the frame at t=0, the material with the
 * film pass over it, before the first stroke. Not a different picture: the same one,
 * before it starts. A `display: none` here would have thrown that away with it.
 */