css/componentes/cielo.css

/* Cielo — fondo permanente. No desaparece al entrar en la carta:
   queda detrás. Las estrellas las genera js/cielo.js y las escribe
   en --estrellas-lejanas / --estrellas-cercanas. */

.cielo {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background:
    var(--fondo-velo-bajo),
    var(--fondo-velo-alto),
    var(--fondo-velo-rosa),
    var(--fondo-umbral);
}

.cielo__capa {
  position: absolute;
  top: 0; left: 0;
  border-radius: var(--r-circulo);
  transition: filter var(--t-lento) var(--curva-calma);
}

.cielo__capa--lejana {
  width: var(--cielo-estrella-lejana);
  height: var(--cielo-estrella-lejana);
  box-shadow: var(--estrellas-lejanas, none);
  animation: gira-fondo var(--cielo-deriva) linear infinite alternate;
}

.cielo__capa--cercana {
  width: var(--cielo-estrella-cercana);
  height: var(--cielo-estrella-cercana);
  box-shadow: var(--estrellas-cercanas, none);
  animation: parpadeo var(--t-parpadeo) var(--curva-calma) infinite,
             gira-cerca var(--cielo-deriva-cercanas) linear infinite alternate;
}

@keyframes parpadeo {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* El giro de la bóveda. El eje está fuera de la pantalla, por debajo, así que
   lo que se ve es un arco lento y no un desplazamiento recto. Va en `alternate`
   (ida y vuelta) para que no haya salto al reiniciar el ciclo. */
.cielo__capa { transform-origin: var(--cielo-eje-x) var(--cielo-eje-y); }

@keyframes gira-fondo {
  from { transform: rotate(calc(var(--cielo-giro) * -1)); }
  to   { transform: rotate(var(--cielo-giro)); }
}

@keyframes gira-cerca {
  from { transform: rotate(var(--cielo-giro-cercanas)); }
  to   { transform: rotate(calc(var(--cielo-giro-cercanas) * -1)); }
}

.cielo__horizonte {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--cielo-horizonte-alto);
  background: var(--cielo-horizonte);
}

/* Durante el aplicar el cielo se aviva un poco. Sutil, no espectacular. */
.app[data-fase="aplicando"] .cielo__capa {
  filter: brightness(var(--aplicando-cielo-intensidad));
}