/* ═══════════════════════════════════════════════════════════
   Nimboo Cloud — El cielo

   El fondo vivo de las pantallas de entrada. La idea es una sola:
   que se sienta como estar viendo el cielo, no como una pantalla
   con adornos.

   Como se consigue, y por que asi:

   - NADA se mueve rapido. El elemento mas veloz tarda 34
     segundos en cruzar. Un movimiento que se alcanza a seguir con
     el ojo distrae; uno que no, se siente como aire.

   - Hay TRES profundidades. Las nubes de atras son grandes,
     palidas y lentas; las de adelante, chicas, mas definidas y
     apenas mas rapidas. Esa diferencia es lo que da la sensacion
     de espacio, y es la misma razon por la que el cielo real se
     ve profundo.

   - El color es SIEMPRE el azul de la marca, en distintas
     opacidades. Nada de morados ni de degradados de otra familia.

   - Todo esta detras de un z-index 0 y sin captar el mouse. La
     forma nunca estorba al formulario.

   Quien pida menos movimiento en su sistema no ve nada de esto:
   al final del archivo se apaga completo.
   ═══════════════════════════════════════════════════════════ */

.cielo {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* ─── El aire ─────────────────────────────────────────────── */
/* Un lavado de azul muy tenue arriba, como la luz que entra por
   una ventana. Sin esto el fondo se ve plano y las nubes parecen
   pegadas encima. */

.cielo::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto;
  height: 70%;
  background:
    radial-gradient(60% 100% at 30% 0%, rgba(154, 197, 214, .13), transparent 70%),
    radial-gradient(50% 90% at 78% 8%, rgba(154, 197, 214, .09), transparent 72%);
  animation: cielo-respira 26s ease-in-out infinite;
}

@keyframes cielo-respira {
  0%, 100% { opacity: .75; transform: translate3d(0, 0, 0) scale(1); }
  50%      { opacity: 1;   transform: translate3d(0, 14px, 0) scale(1.05); }
}

/* ─── El claro del centro ─────────────────────────────────── */
/* El problema que resuelve: las nubes son del mismo azul que el
   logotipo, y al pasarle por detras lo hacen parecer que se
   borra. Bajarles la opacidad no alcanza, porque el estorbo no es
   la intensidad sino que compiten justo ahi.

   Asi que se lava el centro con blanco. Las nubes siguen
   cruzando toda la pantalla, pero al llegar al medio se
   desvanecen y el contenido queda siempre limpio. Es el mismo
   truco de un cielo real: cerca de la luz no se ve nube. */

.cielo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    46% 52% at 50% 46%,
    rgba(255, 255, 255, .96) 0%,
    rgba(255, 255, 255, .82) 42%,
    rgba(255, 255, 255, 0) 78%
  );
  pointer-events: none;
}

/* ─── Las nubes ───────────────────────────────────────────── */
/* Una nube no es un circulo. Se arma con tres bultos de distinto
   tamano en un mismo elemento, con dos sombras de caja, y se
   desenfoca fuerte. A ese nivel de blur el ojo no busca el borde,
   solo lee volumen. */

.nube {
  position: absolute;
  border-radius: 50%;
  background: rgba(154, 197, 214, .30);
  will-change: transform;
}

.nube::before,
.nube::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: inherit;
}

.nube::before {
  width: 62%;
  height: 78%;
  left: 6%;
  top: -34%;
}

.nube::after {
  width: 46%;
  height: 64%;
  right: 10%;
  top: -22%;
}

/* Fondo: enormes, casi invisibles, lentisimas */
.nube.es-fondo {
  filter: blur(46px);
  opacity: .42;
  animation: cruza-lento 96s linear infinite;
}

/* Medio */
.nube.es-media {
  filter: blur(30px);
  opacity: .34;
  animation: cruza-medio 68s linear infinite;
}

/* Frente: chicas, mas nitidas, un poco mas rapidas */
.nube.es-frente {
  filter: blur(18px);
  opacity: .26;
  animation: cruza-rapido 44s linear infinite;
}

/* El recorrido sale de la izquierda y termina fuera por la
   derecha. Se le suma una flotacion vertical con otro ritmo, para
   que el camino no se sienta una linea recta. */

@keyframes cruza-lento {
  from { transform: translate3d(-40vw, 0, 0); }
  to   { transform: translate3d(130vw, -26px, 0); }
}

@keyframes cruza-medio {
  from { transform: translate3d(-45vw, 0, 0); }
  to   { transform: translate3d(135vw, 22px, 0); }
}

@keyframes cruza-rapido {
  from { transform: translate3d(-35vw, 0, 0); }
  to   { transform: translate3d(140vw, -18px, 0); }
}

/* ─── La luz ──────────────────────────────────────────────── */
/* Un barrido diagonal amplisimo y casi invisible, como cuando el
   sol se mueve detras de una ventana. Tarda dos minutos en pasar.
   Nadie lo va a ver moverse, y ese es el punto: lo que hace es
   que el fondo nunca se sienta una imagen congelada. */

.cielo-luz {
  position: absolute;
  inset: -30%;
  background: linear-gradient(
    102deg,
    transparent 34%,
    rgba(255, 255, 255, .55) 47%,
    rgba(214, 233, 241, .42) 53%,
    transparent 66%
  );
  animation: luz-barre 120s ease-in-out infinite;
}

@keyframes luz-barre {
  0%, 100% { transform: translate3d(-28%, -10%, 0) rotate(0deg); opacity: .5; }
  50%      { transform: translate3d(26%, 8%, 0) rotate(3deg); opacity: .9; }
}

/* ─── El polvo ────────────────────────────────────────────── */
/* Puntitos casi imperceptibles que suben muy despacio. Le quitan
   al fondo la sensacion de imagen fija. */

.cielo-polvo {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 78%, rgba(154, 197, 214, .34) 1.2px, transparent 1.6px),
    radial-gradient(circle at 63% 88%, rgba(154, 197, 214, .26) 1.4px, transparent 1.8px),
    radial-gradient(circle at 84% 62%, rgba(154, 197, 214, .28) 1px, transparent 1.4px),
    radial-gradient(circle at 34% 44%, rgba(154, 197, 214, .2) 1.2px, transparent 1.6px),
    radial-gradient(circle at 92% 24%, rgba(154, 197, 214, .24) 1px, transparent 1.4px);
  background-size: 100% 100%;
  animation: polvo-sube 34s linear infinite;
}

@keyframes polvo-sube {
  from { transform: translate3d(0, 3vh, 0); opacity: 0; }
  12%  { opacity: .85; }
  88%  { opacity: .85; }
  to   { transform: translate3d(0, -8vh, 0); opacity: 0; }
}

/* ─── Parallax con el mouse ───────────────────────────────── */
/* Lo mueve cielo.js. Muy poco, tres o cuatro pixeles: se siente
   sin que nadie lo note, que es justo el punto. */

.cielo-capa {
  position: absolute;
  inset: -6%;
  transition: transform 1.4s cubic-bezier(.16, 1, .3, 1);
}

/* ─── El logotipo flota ───────────────────────────────────── */
/* Tres pixeles, arriba y abajo, en nueve segundos. No se ve
   moverse: se siente que esta suspendido, que es lo que hace una
   nube. Se aplica despues de la entrada, para que no peleen. */

.flota {
  animation: flota-suave 9s ease-in-out 1s infinite;
}

@keyframes flota-suave {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -3px, 0); }
}

/* ─── Entrada ─────────────────────────────────────────────── */
/* Lo que esta encima del cielo aparece de abajo hacia arriba, en
   orden. Se siente que la pantalla se arma, no que se prende. */

.sube {
  animation: sube-y-aparece .7s cubic-bezier(.16, 1, .3, 1) both;
}

.sube-1 { animation-delay: .05s; }
.sube-2 { animation-delay: .14s; }
.sube-3 { animation-delay: .23s; }
.sube-4 { animation-delay: .32s; }
.sube-5 { animation-delay: .41s; }

@keyframes sube-y-aparece {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ─── Respeto por quien no quiere movimiento ──────────────── */
/* No es un detalle de cortesia: a algunas personas el movimiento
   en pantalla les provoca mareo de verdad. El fondo se queda,
   quieto, y todo lo demas aparece sin viaje. */

@media (prefers-reduced-motion: reduce) {
  .cielo::before,
  .nube,
  .cielo-luz,
  .cielo-polvo {
    animation: none !important;
  }

  .cielo-capa { transition: none !important; }

  .sube,
  .flota {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}