/* css/lock.css — the full-bleed branded lock screens.
 *
 * Created for 09-field-findings-2.md Phase E1. `style.css` is FROZEN
 * (00-contracts.md §5 [A3]), so the overrides that turn `.service-lock` from a
 * modal into a brand screen live here; this sheet is linked AFTER style.css in
 * index.html, so they win by cascade order with no !important.
 *
 * Two screens share the treatment, both keeping `.overlay.service-lock` and the
 * `active` class that test/service-lock.test.js and e2e/shadow.js assert on:
 *
 *   #service-lock     the kiosk cannot take an order at all (critical device)
 *   #checkout-blocked a guest mid-order hit the checkout-boundary health gate
 *
 * WHY FULL-BLEED. The old treatment was a white dialog floating on a dark scrim
 * over whatever screen the guest was on — which reads as "this thing crashed",
 * and a crashed-looking kiosk is exactly what makes a guest start poking at it.
 * A deliberate brand screen reads as "closed for a moment", which is the truth.
 *
 * WHY IT MOVES. A perfectly static screen reads as frozen for the same reason.
 * The ambient drift below is slow enough to never draw the eye (26 s, one pass)
 * but proves the kiosk is alive. Everything animated is a `transform`/`opacity`
 * on a composited layer — no layout, no repaint of the gradient, which matters
 * on the LattePanda's GPU.
 *
 * NOTHING HERE SAYS WHAT BROKE. That is the point of the screen (F6): the cause
 * is not a guest's business, and the server no longer sends it to an
 * unauthenticated caller anyway (`/api/health?view=kiosk`). The staff path is an
 * RFID tap, handled by the Electron shell entirely outside this page.
 */

/* ===== THE SCREEN ===== */

.service-lock {
  /* Opaque and full-bleed: the dead app underneath must not show through at
   * all. Same brand gradient as #screen-splash (style.css:729-738) so the two
   * "resting" states of the kiosk are visibly the same product. */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(160deg, #FF3399 0%, #E0177F 55%, #C00563 100%);
  /* style.css blurs the scrim behind the dialog. There is nothing to see
   * through an opaque screen, and backdrop-filter is a full-screen readback
   * every frame — pure cost. */
  backdrop-filter: none;
  flex-direction: column;
  overflow: hidden;          /* contains the drifting glow below */
}

/* Ambient light, drifting once across the screen and back. Sized well past the
 * viewport so its soft edge never enters frame as a visible disc. */
.service-lock::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1500px;
  height: 1500px;
  margin: -750px 0 0 -750px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.17) 0%,
    rgba(255,255,255,0.06) 38%,
    rgba(255,255,255,0) 66%);
  animation: lockDrift 26s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes lockDrift {
  from { transform: translate3d(-150px, -130px, 0) scale(0.9); }
  to   { transform: translate3d(150px, 130px, 0) scale(1.15); }
}

/* ===== THE CONTENT ===== */

.lock-stage {
  position: relative;        /* above ::before */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 80px;
  /* Optical, not geometric, centring: on a 1080x1920 portrait panel the true
   * midpoint sits below eye level and reads as sagging. Pulls the lockup to
   * roughly the same height as the splash screen's. */
  margin-bottom: 150px;
}

/* The brand lockup. Reuses `.splash-logo` (style.css:786-795) verbatim for the
 * pill, colour and shadow — this class only scales it up for a screen that has
 * nothing else on it. Change the brand in one place, both screens follow. */
.lock-mark {
  font-size: 66px;
  padding: 24px 76px;
  border-radius: 22px;
  /* Breathes about as fast as a resting person. Paired with the drift it is
   * enough motion to read as "alive" and little enough to ignore. */
  animation: lockBreathe 7s ease-in-out infinite alternate;
}

@keyframes lockBreathe {
  from { transform: scale(1); }
  to   { transform: scale(1.022); }
}

/* One neutral bilingual line. No cause, no error code, no device name. */
.lock-line {
  margin-top: 56px;
  max-width: 820px;
  color: var(--white);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.2px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.18);
  /* Even line lengths instead of a full first line and an orphan. Hungarian
   * strands a one-letter article ("fordulj a / személyzethez") without this. */
  text-wrap: balance;
}

.lock-line-en {
  display: block;
  margin-top: 14px;
  font-size: 24px;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
}

/* ===== STAFF FALLBACK ===== */

/* An invisible target: 3 s press opens the operator page (app.js wires the
 * timing, and only when a PIN exists to gate it). Deliberately unlabelled and
 * unstyled — the discoverable staff path is the RFID tap; this is only for a
 * manager who left their card behind.
 *
 * TOP-CENTRE, not a corner. The bottom-left corner is where the kiosk's back
 * button lives on every ordering screen (`.back-btn`), so that is the one spot
 * on the glass a guest's thumb already goes to by habit — a hidden 3 s gesture
 * underneath it is asking for accidental discovery. The top centre carries no
 * control on any screen. */
.lock-staff-spot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 150px;
  z-index: 2;
  background: none;
  border: 0;
  padding: 0;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

/* Hidden until app.js confirms an OPERATOR_PIN is configured: without one the
 * operator page has nothing to authenticate a card-less manager with, so the
 * press would open a dead end. */
.lock-staff-spot[hidden] { display: none; }

/* ===== REDUCED MOTION =====
 * Kept deliberately *animated*, just without travel: switching this screen off
 * entirely would restore the "looks crashed" failure this design exists to fix.
 */
@media (prefers-reduced-motion: reduce) {
  .service-lock::before {
    animation: lockFade 9s ease-in-out infinite alternate;
  }
  .lock-mark { animation: none; }
  @keyframes lockFade {
    from { opacity: 0.45; }
    to   { opacity: 1; }
  }
}