#preloader{
  position:fixed;top:0;left:0;
  width:100%;height:100%;
  z-index:99999;
  /* Blanco opaco, el mismo de la página. Opaco y no transparente porque el
     canvas nace vacío y hasta el primer draw() no hay nada pintado: sin
     fondo se colaría un fotograma de página visible antes de que arranque
     el campo de estrellas.

     Era #000. Ahora el salto va en azul de marca sobre blanco para que la
     entrega al hero sea continua: al final de la secuencia el preloader se
     disuelve sobre un fondo del mismo color que la página y no hay salto
     de luminancia.

     Sin transition: la disolución la escribe draw() frame a frame y una
     transición CSS de .6s la perseguiría con retraso. */
  background:var(--white,#fff);
}

#hyperspace{width:100%;height:100%;display:block;}

body.loading{overflow:hidden;}

/* OJO: esto NO es del vídeo del CoreBot que se quitó del preloader. Lo
   consume .floating-corebot en shared/nav/nav.css —el mini-logo fijo—, que
   vive fuera de este componente. Borrarlo de aquí le quita el rebote al
   logo flotante. Se queda hasta que alguien lo mueva a nav.css, que es
   donde le tocaría estar. */
@keyframes corebot-bounce{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-5px);}
}

.hero-intro{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  z-index:3;overflow:hidden;
  transition:opacity .8s ease;
}

.hero-intro.fade-out{opacity:0;pointer-events:none;}

body.loading .navbar,
body.loading .hero__text,
body.loading .hero__actions,
body.loading .typewriter-line{opacity:0;}

@media (prefers-reduced-motion:reduce){
  .hero-intro{display:none !important;}
}

@media (max-width:768px){
  .hero-intro{display:none;}
}