/* ═══════════════════════════════════════════════════════════
   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); }
}

/* ─── Sin claro del centro ────────────────────────────────
   Aqui hubo un lavado blanco enorme en el medio, para que las
   nubes no le pasaran por detras al logotipo y al texto.
   Funcionaba, pero al quitar la tarjeta del login se volvio el
   protagonista: Adriano dijo el 11 agosto 2026 que ya casi no
   veia las nubes.

   Su propuesta es mejor que agrandar o encoger el destello:
   subir el contraste de las nubes y dejar que el fondo casi
   blanco haga el trabajo. Asi el cielo se ve de verdad y el
   texto, que va en negro y en un azul con cuerpo, se lee encima
   sin necesidad de taparlo.

   Si algun dia vuelve a hacer falta, era un radial-gradient
   sobre .cielo::after. Pero conviene pensarlo dos veces: un
   destello que tapa el fondo animado es admitir que el fondo
   estorba, y entonces sobra el fondo, no falta el destello. */

/* ─── 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, .42);
  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); }
}

/* ─── Sin barrido de luz ──────────────────────────────────
   Aqui vivia un barrido diagonal blanco, muy amplio y muy lento,
   que cruzaba la pantalla en dos minutos. La idea era que el
   fondo nunca se sintiera una imagen congelada.

   Con la tarjeta blanca del login encima no se notaba. Al
   quitarla se volvio visible, y en modo oscuro se ve peor
   todavia: una franja blanca en diagonal sobre un fondo negro,
   que es exactamente lo que Adriano fotografio el 11 agosto
   2026. Y tenia razon: parece un defecto, no un efecto.

   Se quito. Las nubes ya se mueven; el fondo no necesita una
   segunda cosa moviendose encima. */

/* ─── 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;
  }
}