/* The load screen: a lighthouse lights up while the page gets ready, then flashes and gets out of
   the way, so the page is first seen whole and never jumps. It shows only with script (html.js);
   without script, or if the loader script never runs, it gives up by itself after 9 s. */
.loader {
  display: none;
}
html.js .loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #07090f;
  color: #ecebe7;
  animation: loader-giveup 0.3s 9s steps(4) forwards;
}
html.loading {
  overflow: hidden;
}

/* the sky: a few stars that twinkle in pixel steps */
.loader-stars {
  position: absolute;
  inset: 0;
}
.loader-stars i {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #ecebe7;
  animation: loader-twinkle 1.6s steps(2) infinite;
}
.loader-stars i:nth-child(1) {
  left: 12%;
  top: 18%;
}
.loader-stars i:nth-child(2) {
  left: 28%;
  top: 9%;
  animation-delay: -0.4s;
}
.loader-stars i:nth-child(3) {
  left: 71%;
  top: 14%;
  animation-delay: -0.9s;
  background: #4da8ff;
}
.loader-stars i:nth-child(4) {
  left: 86%;
  top: 31%;
  animation-delay: -1.2s;
}
.loader-stars i:nth-child(5) {
  left: 8%;
  top: 52%;
  animation-delay: -0.7s;
  background: #3ee0b4;
}
.loader-stars i:nth-child(6) {
  left: 92%;
  top: 62%;
  animation-delay: -0.2s;
}
.loader-stars i:nth-child(7) {
  left: 40%;
  top: 24%;
  animation-delay: -1.4s;
  background: #ffaa33;
}
.loader-stars i:nth-child(8) {
  left: 60%;
  top: 6%;
  animation-delay: -1s;
}

.loader-scene {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 22px;
}
.loader-tower {
  position: relative;
  width: 96px;
  height: 156px;
}
.loader-tower svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  shape-rendering: crispEdges;
}
.loader-lamp {
  fill: #ffd27a;
  animation: loader-lamp 0.8s steps(2) infinite;
}
/* the beam: a wedge of lamplight sweeping round the lamp, in pixel-clock steps */
.loader-beam {
  position: absolute;
  left: 50%;
  top: 21px;
  width: 260vmax;
  height: 260vmax;
  translate: -50% -50%;
  background: conic-gradient(
    from -10deg,
    rgb(255 210 122 / 0.32) 0deg 20deg,
    transparent 20deg 180deg,
    rgb(255 210 122 / 0.12) 180deg 200deg,
    transparent 200deg
  );
  -webkit-mask: radial-gradient(circle, #000 0 4%, transparent 32%);
  mask: radial-gradient(circle, #000 0 4%, transparent 32%);
  animation: loader-sweep 3.2s steps(40) infinite;
  pointer-events: none;
}

/* the gems: six of the spark's colours, lit one by one as the page arrives */
.loader-gems {
  position: relative;
  display: flex;
  gap: 18px;
  padding-top: 14px;
}
.loader-gems b {
  width: 12px;
  height: 12px;
  rotate: 45deg;
  background: var(--c);
  opacity: 0.16;
  transition:
    opacity 0.15s steps(2),
    scale 0.2s cubic-bezier(0.3, 1.8, 0.5, 1);
}
.loader-gems b.lit {
  opacity: 1;
  scale: 1.25;
  box-shadow: 0 0 10px var(--c);
}
.loader-gems b:nth-of-type(1) {
  --c: #ffaa33;
}
.loader-gems b:nth-of-type(2) {
  --c: #ff5e57;
}
.loader-gems b:nth-of-type(3) {
  --c: #3ee0b4;
}
.loader-gems b:nth-of-type(4) {
  --c: #4da8ff;
}
.loader-gems b:nth-of-type(5) {
  --c: #c6e84a;
}
.loader-gems b:nth-of-type(6) {
  --c: #ff8ad8;
}
/* the spark hops along above the last lit gem */
.loader-spark {
  position: absolute;
  left: 3px;
  top: -6px;
  width: 6px;
  height: 6px;
  background: #fff3c4;
  box-shadow: 0 0 8px #ffd27a;
  translate: calc(var(--at, 0) * 30px) 0;
  transition: translate 0.14s steps(3);
  animation: loader-hop 0.42s steps(3) infinite alternate;
}
.loader-say {
  margin: 0;
  min-height: 1.4em;
  font:
    700 1.125rem/1.4 "Pixelify Sans",
    system-ui,
    sans-serif;
  letter-spacing: 0.01em;
  color: #cbbfa6;
  visibility: hidden;
}
.loader-say.ready {
  visibility: visible;
}

/* leaving: the lamp flares, the screen flashes amber, then dissolves in pixel steps */
.loader.done {
  animation: loader-out 0.5s 0.18s steps(5) forwards;
}
.loader.done::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffaa33;
  opacity: 0;
  animation: loader-flash 0.36s steps(3);
  pointer-events: none;
}
.loader.done .loader-scene {
  animation: loader-rise 0.6s steps(6) forwards;
}

@keyframes loader-twinkle {
  50% {
    opacity: 0.25;
  }
}
@keyframes loader-lamp {
  50% {
    fill: #fff3c4;
  }
}
@keyframes loader-sweep {
  to {
    rotate: 360deg;
  }
}
@keyframes loader-hop {
  to {
    top: -12px;
  }
}
@keyframes loader-flash {
  40% {
    opacity: 0.3;
  }
}
@keyframes loader-rise {
  to {
    translate: 0 -24px;
    scale: 1.08;
  }
}
@keyframes loader-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes loader-giveup {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader-stars i,
  .loader-lamp,
  .loader-beam,
  .loader-spark,
  .loader.done::after,
  .loader.done .loader-scene {
    animation: none;
  }
  .loader.done {
    animation: loader-out 0.3s forwards;
  }
}