/* Loading screen: Jacob's traffic light, shown while a page loads.
   signal.js hides it once the page has loaded; if scripts never run, it fades by itself. */
.page-signal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: #fff;
  animation: signal-away 0.35s ease 6s forwards;
}
.page-signal.done {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0s linear 0.35s;
}
.page-signal svg {
  width: 74px;
  height: auto;
}
.page-signal .lamp {
  fill: #2a2a2a;
  animation: 1.5s steps(1, end) infinite;
}
.page-signal .lamp.red {
  animation-name: signal-red;
}
.page-signal .lamp.amber {
  animation-name: signal-amber;
}
.page-signal .lamp.green {
  animation-name: signal-green;
}
/* Red, then amber, then green, one after another. */
@keyframes signal-red {
  0% {
    fill: #e8213b;
  }
  33.3% {
    fill: #2a2a2a;
  }
}
@keyframes signal-amber {
  0% {
    fill: #2a2a2a;
  }
  33.3% {
    fill: #ffc531;
  }
  66.6% {
    fill: #2a2a2a;
  }
}
@keyframes signal-green {
  0% {
    fill: #2a2a2a;
  }
  66.6% {
    fill: #35b34a;
  }
}
@keyframes signal-away {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-signal .lamp {
    animation: none;
  }
  .page-signal .lamp.green {
    fill: #35b34a;
  }
}