/*
 * Display page: full screen, black, no cursor or scrollbars. Stacked layers: two images, a clock, message slides and
 * web pages, and the message layer above them (see display.js).
 */
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #ccc;
  cursor: none;
}

/* Largest size that keeps the aspect ratio; the black background fills the bars, so the front layer covers the back. */
.layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  opacity: 0;
}

/* A web page (display.js): no border, black until its page paints, and no pointer input on a kiosk. */
.frame {
  border: 0;
  pointer-events: none;
}

.layer.shown {
  opacity: 1;
}

/* Only the front layer fades (crossfade: 1 s); the layer behind changes instantly, unseen. */
.layer.front {
  z-index: 1;
  transition: opacity 1s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .layer.front {
    transition: none;
  }
}

/*
 * Clock: "HH:mm", white on black, as large as fits. Every character sits in a box of fixed width, so the digits never
 * move, whatever the font's digit widths: not when a digit changes, nor when the colon blinks (it is hidden, keeping
 * its box). 4 digits x 0.62em + 0.3em = 2.78em wide, one line high: at most 83% of the width and 70% of the height,
 * leaving a margin for screens that crop their edges (overscan).
 */
.clock {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 700 min(30vw, 70vh) / 1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

.clock .digit,
.clock .colon {
  display: inline-block;
  text-align: center;
}

.clock .digit {
  width: 0.62em;
}

/* Visible in the first half of each second, hidden in the second; display.js aligns it with the clock's seconds. */
.clock .colon {
  width: 0.3em;
  animation: clock-colon 1s step-end infinite;
}

@keyframes clock-colon {
  50% {
    visibility: hidden;
  }
}

/*
 * A screen of scrolling text (display.js): the message slide layer and the message layer, full screen in the message's
 * background colour (set by the script), with one line of text that the script moves across it. The text sits at the
 * top, in the middle or at the bottom, with a margin for screens that crop their edges (overscan).
 */
.message-slide,
.message-layer {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 5vh 0;
  overflow: hidden;
}

.message-slide.top,
.message-layer.top {
  align-items: flex-start;
}

.message-slide.bottom,
.message-layer.bottom {
  align-items: flex-end;
}

/* Message layer: above every slide, shown while a break-in runs. It fades in and out like a slide. */
.message-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: #000;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.message-layer.shown {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .message-layer {
    transition: none;
  }
}

/*
 * The text: one line from the layer's left edge, as wide as it is (spaces kept, as measured), on a layer of its own
 * for the compositor, with the line height of ADR 0028. Font, size and colour come from the script.
 */
.message-text {
  flex: none;
  line-height: 1.2;
  white-space: pre;
  will-change: transform;
}

/* Wide letter spacing: WIDE_LETTER_SPACING_EM in display.js, which measures it. */
.message-text.wide {
  letter-spacing: 0.1em;
}

/* Outline and shadow in black or white, whichever contrasts with the text colour (--message-contrast, display.js). */
.message-text.outline {
  text-shadow:
    0.04em 0 0 var(--message-contrast),
    -0.04em 0 0 var(--message-contrast),
    0 0.04em 0 var(--message-contrast),
    0 -0.04em 0 var(--message-contrast),
    0.03em 0.03em 0 var(--message-contrast),
    -0.03em 0.03em 0 var(--message-contrast),
    0.03em -0.03em 0 var(--message-contrast),
    -0.03em -0.03em 0 var(--message-contrast);
}

.message-text.shadow {
  text-shadow: 0.05em 0.05em 0.1em var(--message-contrast);
}

.message {
  margin: 0;
  padding: 2rem;
  font: 1.5rem system-ui, sans-serif;
}