/*
  The few rules that belong to the chain itself rather than to any one screen.

  is-booting is set on <html> by a line in the document head before the first
  paint, and taken off by main.js once a screen is up. It exists so that the
  two-window site is never visible for the instant between «the page arrived»
  and «the firmware logo is drawn». The animation is the safety: if the script
  never gets that far, the page shows itself after six seconds rather than
  staying black — a status page that is blank is worse than one that is ugly.
*/

html.is-booting body {
  visibility: hidden;
  animation: rw-unveil 0s linear 6s forwards;
}

/*
  While a screen of the chain is up, a finger cannot move the page under it.
  The board and the shell that wait behind the firmware logo and the login are
  taller than a phone (837 px on an 812 px screen), so a drag would scroll the
  login screen away or rubber-band it. is-booting covers the first paint and
  goes as soon as a screen is up; has-boot-screen (set by sequence.js) is the
  rest of the time, up to the lock screen and the way back.
*/
@media (pointer: coarse) {
  html.is-booting,
  html.is-booting body,
  html.has-boot-screen,
  html.has-boot-screen body {
    overflow: hidden;
    overscroll-behavior: none;
  }
}

/*
  The old site under a screen. host.js marks it aria-hidden while a boot screen
  or a desktop is on top, and `inert` keeps the keyboard and find-in-page out;
  hiding it as well takes it out of the text of the page (what a copy of the
  page, a crawler's innerText or a reader that ignores aria-hidden would get),
  and costs nothing, since a screen with an opaque background is over it.
  Layout is kept, so the terminal built under the login screen still measures.
*/
.shell[aria-hidden="true"] {
  visibility: hidden;
}

@keyframes rw-unveil {
  to {
    visibility: visible;
  }
}

/*
  A display that has gone to sleep. Above the login screen (1000) and nothing
  else; it fades in rather than cutting, because that is what a monitor does.
*/
.rw-dim {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #000;
  cursor: none;
  animation: rw-dim-in 400ms ease-out both;
}

@keyframes rw-dim-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rw-dim {
    animation: none;
  }
}

:root[data-anim="off"] .rw-dim {
  animation: none;
}