/* Copyright Ayers Electronics Inc. All rights reserved. */

/* ---- start (js/start-face.js, pages/start-face.html) ----
   The start lockup on the page's ground, from the first frame until the boot's first face: the
   Android starting window's card (parity.json launch.lockup, 288x162 on the 960x540 set) centred on
   the screen, drawn as the one picture the starting window draws. The launch layers stand over it
   hidden, the bird's square where the card's bird stands and the word filling the card, and show in
   the frame the opening motion starts, the picture hidden in that same frame (js/launch.js).
   max-width is cleared on the pictures: base.css caps every img at its parent's width, and the word
   layer is wider than the bird's square it sits in. Drawn in television pixels (tokens.css --tv-px),
   so the card is the same share of every television and the starting window's own dp on a phone.
   Under the wizard and every face over it, over the stage; Try Again comes up under the card, clear
   of it, only when the boot faults. */
#startFace {
  z-index: 44;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
#startFace[hidden] {
  display: none;
}
/* The page starting over on its own, for Switch Profile or after a join (js/theme-boot.js sets the mark
   before the body parses): the face never draws, so the next screen is the first thing on screen. */
html[data-switching] #startFace {
  display: none;
}
.start-lockup {
  position: relative;
  flex: none;
  width: calc(288 * var(--tv-px));
  height: calc(162 * var(--tv-px));
}
.start-lockup-picture {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(288 * var(--tv-px));
  height: calc(162 * var(--tv-px));
  max-width: none;
}
.start-lockup .launch-brand {
  visibility: hidden;
  position: absolute;
  left: calc(15.54 * var(--tv-px));
  top: calc(40.47 * var(--tv-px));
  width: calc(80.6 * var(--tv-px));
  height: calc(80.6 * var(--tv-px));
}
.start-lockup .launch-word {
  position: absolute;
  left: calc(-15.54 * var(--tv-px));
  top: calc(-40.47 * var(--tv-px));
  width: calc(288 * var(--tv-px));
  height: calc(162 * var(--tv-px));
  max-width: none;
}
#startFace.is-moving .launch-brand {
  visibility: visible;
}
#startFace.is-moving .start-lockup-picture {
  visibility: hidden;
}
.start-face-stuck {
  position: absolute;
  top: calc(50% + 105 * var(--tv-px));
  left: 0;
  right: 0;
  text-align: center;
}