/* Time machine: the layout shared by the home page and /retro/ (see time-machine.js). Each page styles its own look. */

/* Arriving through the time machine: stay black until the reveal starts, and show the page anyway if the script never runs. */
html.tm-arrive { background: #000; }
html.tm-arrive body { opacity: 0; animation: tm-failsafe 0s 3s forwards; }
@keyframes tm-failsafe { to { opacity: 1; } }

.tm-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
  text-align: center;
  pointer-events: auto;
}
.tm-fx, .tm-cover { position: absolute; inset: 0; }
.tm-cover { width: 100%; height: 100%; }
.tm-year, .tm-caption { position: relative; margin: 0; }
.tm-year { white-space: nowrap; line-height: 1; }
.tm-year span { display: inline-block; text-align: center; }
.tm-leaving .tm-year, .tm-leaving .tm-caption { opacity: 0; transition: opacity 0.45s, transform 0.45s; }