html, body { margin: 0; padding: 0; background: #021124; }
#stereum-boot {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  /* Match the whatamesh palette (#310759, #200433, #a42ed2, #021124)
     so the crossfade to the animated canvas is visually continuous. */
  background:
    radial-gradient(1200px 600px at 30% 20%, rgba(164, 46, 210, 0.28), transparent 60%),
    radial-gradient(900px 500px at 80% 100%, rgba(49, 7, 89, 0.45), transparent 60%),
    linear-gradient(135deg, #200433 0%, #021124 100%);
  transition: opacity 650ms ease-out;
}
#stereum-boot.is-leaving { opacity: 0; }
#stereum-boot .dots { display: flex; gap: 8px; }
#stereum-boot .dots > span {
  width: 8px; height: 8px; border-radius: 999px; background: #fff;
  animation: sbounce 0.8s infinite ease-in-out;
}
#stereum-boot .dots > span:nth-child(2) { animation-delay: 0.12s; }
#stereum-boot .dots > span:nth-child(3) { animation-delay: 0.24s; }
#stereum-boot .label {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.7);
  font: 700 11px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
@keyframes sbounce {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50%      { transform: translateY(-8px); opacity: 1; }
}

/* Canvas crossfade — starts invisible, fades in over 900ms.
   The delay gives whatamesh time to render its first WebGL frame
   so the canvas doesn't pop in half-rendered. */
#gradient-canvas-wrap {
  opacity: 0;
  animation: stereum-canvas-in 900ms ease-out 120ms forwards;
}
@keyframes stereum-canvas-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}