/* css/screensaver.css — the burn-in guard (#screensaver, lib/screensaver.mjs).
 *
 * WHY. deploy/i3/config turns screen blanking and DPMS off on purpose — a guest
 * must never meet a black panel that needs a tap to wake — and the office unit
 * was being powered down by hand every night to spare it (HANDOFF.md,
 * 2026-09-16). The two screens the kiosk rests on for hours are still images:
 * the pink start screen and the pink service lock, each with a white logo box
 * in the same place. This surface replaces them after SCREENSAVER_MS without a
 * touch and moves the only bright thing on it every SCREENSAVER_HOP_MS.
 *
 * WHY IT IS CHEAP. Near-black flat background, no gradient, no backdrop-filter,
 * no infinite animation: the only work is one `transform` transition per hop,
 * on a composited layer. The start screen's tap-hint pulse and the lock's
 * ambient drift keep running underneath an opaque cover for nothing, so both
 * are paused while this is up (docs: kiosk-idle-gpu-burn — the idle start
 * screen alone costs ~30% of a core, and this must not add to it).
 *
 * `style.css` is FROZEN (00-contracts.md §5 [A3]); this sheet is linked last
 * in index.html, so its overrides of `.splash-logo` and `.fiscal-mark` win by
 * cascade order with no !important.
 */

/* ===== THE SURFACE ===== */

.screensaver {
  position: fixed;
  inset: 0;
  /* Over the fiscal mark (300), which is itself over the lock (200): the mark
   * is carried INSIDE the stage instead, so it moves with everything else. */
  z-index: 400;
  /* Not pure black: an LCD lit to #000 still shows its backlight, and a
   * charcoal reads as "resting" where black reads as "off". */
  background: #0b0b0c;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.screensaver[hidden] { display: none; }

/* ===== THE STAGE (the thing that hops) ===== */

.screensaver-stage {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  /* Wide enough that the Hungarian lock line wraps to two even lines, not a
   * long one and an orphan; `hopPosition()` measures the rendered box. */
  width: 560px;
  padding: 24px;
  /* app.js sets the first position while still `hidden`, so there is no
   * transition from the origin on show — only between hops. */
  transition: transform 2.4s ease-in-out;
  will-change: transform;
  pointer-events: none; /* the tap belongs to the surface, wherever it lands */
}

/* The brand mark, toned down: the point is to move it, not to light the
 * room. `.splash-logo` in style.css carries the box; only the shadow (a soft
 * repaint hazard on a moving layer) and the size change here. */
.screensaver-logo {
  font-size: 40px;
  padding: 14px 44px;
  box-shadow: none;
  opacity: 0.85;
}

.screensaver-line {
  max-width: 100%;
  color: rgba(255, 255, 255, 0.72);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

.screensaver-line-en {
  display: block;
  margin-top: 8px;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

/* One line or the other, by app.js's data-mode at show time: a locked kiosk
 * must not invite a tap it cannot answer. */
.screensaver-line-idle,
.screensaver-line-lock { display: none; }
.screensaver[data-mode="idle"] .screensaver-line-idle,
.screensaver[data-mode="lock"] .screensaver-line-lock { display: block; }

/* ===== THE MARK'S COPY =====
 * Same node shape as #fiscal-mark so css/fiscal.css dresses it identically;
 * un-fixed so it rides inside the stage, and without the large variant's
 * backdrop-filter (nothing behind it to blur, and it is a per-frame readback). */
.screensaver .fiscal-mark {
  position: static;
  max-width: none;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: none;
  text-shadow: none;
}

/* ===== WHAT IT COVERS =====
 * The animations of the two screens underneath, paused while covered. Both
 * are pure cost behind an opaque surface. */
body.screensaver-on .splash-tap-hint,
body.screensaver-on .service-lock::before {
  animation-play-state: paused;
}