/* The hand-off into the Time Machine.

   Pressing Time Machine does not simply swap pages: the screen tears into
   analogue static for a moment, and then the archive boots, on a Mac OS X
   10.1 startup panel, before the press appears. The panel is the real
   artwork with its progress bar and status line lifted out, so the bar can
   fill for three seconds and the line can say where we are going.

   Two halves: the flash that plays on the archive as the tab opens, and the
   full sequence that plays in the Time Machine's own tab while it loads. */

#timewarp{position:fixed;inset:0;z-index:9999;display:none;
  align-items:center;justify-content:center;background:#000;
  font-family:"Lucida Grande","Lucida Sans Unicode","Helvetica Neue",Helvetica,Arial,sans-serif}
#timewarp.on{display:flex}
#timewarp.fade{opacity:0;transition:opacity .55s ease}

/* the static. Drawn small and scaled up with no smoothing, so the grain
   stays chunky the way broadcast noise is rather than turning to mush. */
#timewarp canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  image-rendering:pixelated;image-rendering:crisp-edges}

/* a bright bar rolling down the screen, as a mistuned set does */
#timewarp .tw-roll{position:absolute;left:0;right:0;z-index:2;height:16vh;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.14),rgba(255,255,255,0));
  animation:tw-roll 1.1s linear infinite}
@keyframes tw-roll{from{top:-20vh}to{top:100vh}}

/* ---- the boot panel ---------------------------------------------------
   Mac OS X 10.1's startup window, at its own proportions. Everything
   inside is placed as a percentage of the panel so it scales as one. */
#timewarp .tw-panel{position:relative;z-index:3;width:min(461px,86vw);aspect-ratio:384 / 287;
  background:url("../img/aqua/bootpanel.png") center/100% 100% no-repeat;
  border:1px solid #b3b3b3;
  box-shadow:0 2px 3px rgba(0,0,0,.35),0 14px 40px -10px rgba(0,0,0,.75);
  opacity:0;transform:scale(.97);transition:opacity .45s ease,transform .45s ease}
#timewarp.booting .tw-panel{opacity:1;transform:none}

/* the progress bar, back where the original had it */
#timewarp .tw-bar{position:absolute;left:27.08%;top:69.69%;width:45.57%;height:5.23%;
  background:#e4e2e3;border:1px solid #a9a7a8;border-radius:2px;overflow:hidden;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.14)}
#timewarp .tw-fill{display:block;height:100%;width:2%;
  background:linear-gradient(to bottom,#9ec8f7,#3f86df 55%,#2f6dc4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
#timewarp.booting .tw-fill{width:100%;transition:width 3s cubic-bezier(.3,.05,.35,1)}

/* the status line, in the panel's own face and size */
#timewarp .tw-say{position:absolute;left:6%;right:6%;top:79.5%;text-align:center;
  font-size:calc(.034 * min(461px,86vw));color:#1f1d1e;letter-spacing:0;line-height:1.3}

@media(prefers-reduced-motion:reduce){
  #timewarp canvas,#timewarp .tw-roll{display:none}
  #timewarp .tw-panel{transition:none;opacity:1;transform:none}
  #timewarp.booting .tw-fill{transition:width 1.2s linear}
}