/* ============================================================
   saver98.css  ::  the Pages 98 screen saver
   ------------------------------------------------------------
   Four rules and a fade. Everything that moves is drawn into a
   canvas by js/saver.js, so there is no animation here beyond
   the overlay arriving.

   ------------------------------------------------------------
   WHERE IT SITS
   ------------------------------------------------------------

   z-index 9500: above the desktop, above the taskbar, above
   every window and every menu, and below the CRT overlay at
   9999. That order is deliberate. The monitor is a monitor, and
   a monitor is in front of whatever it happens to be showing,
   including a screen saver.

   The whole overlay is one fixed black box. It is not
   pointer-events: none, unlike the CRT glass, because eating the
   click is the entire job: the press that dismisses a screen
   saver must never reach the icon it happened to land on. See
   the comment at the top of js/saver.js for the rest of that.

   Every class is prefixed sv__, including the state class, so
   nothing here can collide with the desktop, the windows or the
   terminal.

   Safari 7 rules: no custom properties, no grid, no flexbox gap,
   no clamp, prefixes on the transition.
   ============================================================ */

.sv__wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9500;

  overflow: hidden;
  background: #000000;

  /* The pointer goes away with the desktop. A screen saver with
     an arrow parked in the middle of it is a black window, not a
     screen saver. Browsers too old for cursor: none simply keep
     the arrow, which is only cosmetic. */
  cursor: none;

  /* Nothing here is content and none of it should be selectable,
     least of all by a drag that started before the saver came up. */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;

  /* Faded in rather than switched on. A screen saver that appears
     between two frames reads as a fault, which is exactly what
     you do not want from something that arrives while you are not
     looking. js/saver.js adds sv__on a moment after inserting the
     element, because a transition needs a frame at the starting
     value to have anything to move from. */
  opacity: 0;
  -webkit-transition: opacity .55s linear;
     -moz-transition: opacity .55s linear;
          transition: opacity .55s linear;
}

.sv__wrap.sv__on { opacity: 1; }

/* Motion off: no fade either. The saver in that mode is a static
   black screen, and fading one in is still something moving on a
   machine that has been asked to stop. Keyed off html.motion-off
   rather than the media query so the on page switch can overrule
   an operating system wide setting. See js/motion.js. */
html.motion-off .sv__wrap {
  -webkit-transition: none;
     -moz-transition: none;
          transition: none;
}


/* ---------- the canvas -----------------------------------------
   Sized in pixels by the script, on both the element and its
   style, because the width and height attributes are the drawing
   surface and the CSS is the box it is stretched into. Set only
   one of the two and the field comes out squashed. */
.sv__canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}


/* ---------- the reduced motion screen ---------------------------
   A label small enough and dim enough to be worth leaving on a
   dark screen for four minutes, in the same face the rest of the
   desktop uses. Positioned with top and a negative margin rather
   than a transform, since it is one line and its height is known. */
.sv__label {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: -8px 0 0;
  padding: 0;

  text-align: center;
  color: #6f6f6f;
  font-family: "Selawik", "Segoe UI", Tahoma, "MS Sans Serif", sans-serif;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .3px;
}