/* Cielo de la landing (intro-cielo.js): nubes planas de día y, de noche, el mismo cielo de Actividad.
   Todo va detrás del contenido y nunca recibe clics. Sin JS o sin el motor, la landing queda como siempre. */

/* ---------- nubes ---------- */
/* El contenido de "Cómo funciona" y de los laboratorios no estaba posicionado: así queda por encima de las nubes. */
html.cielo-on .how>.wrap,html.cielo-on .lab>.wrap{position:relative}
/* Aparecen despacio cuando el script las suma: no saltan a la vista. */
.cielo-nubes{position:absolute;inset:0;overflow:clip;pointer-events:none;contain:strict;opacity:0;transition:opacity 1.4s ease}
.cielo-nubes.is-in{opacity:1}
.cielo-ocaso{position:absolute;inset:0}
.nube{position:absolute;display:block}
.nube>span{display:block}
.nube-fondo{position:absolute;inset:0}
.nube svg{display:block;width:100%;height:auto;overflow:visible}
.nube .c{fill:var(--n-cuerpo)}
.nube .l{fill:var(--n-luz)}
.nube .f{fill:var(--n-fondo)}
.nube .m{fill:var(--n-panza)}
/* Un tono por hora del día: casi blancas, con un toque del cielo de cada sección. Más claras que el cielo: el texto sólo gana contraste. */
.cielo-nubes[data-cielo="alba"]{--n-cuerpo:#D9E6F0;--n-luz:#F7FAFD;--n-fondo:#E6EEF5}
.cielo-nubes[data-cielo="manana"]{--n-cuerpo:#E1EAEF;--n-luz:#FFFFFF;--n-fondo:#EDF2F4}
.cielo-nubes[data-cielo="mediodia"]{--n-cuerpo:#E7EAE1;--n-luz:#FFFFFD;--n-fondo:#F1F3EC}
.cielo-nubes[data-cielo="tarde"]{--n-cuerpo:#F4D8BC;--n-luz:#FFF7EC;--n-fondo:#FAE7D3}
/* Atardecer: las mismas nubes en durazno, con la panza rosada y el borde de abajo encendido por el sol que se pone. */
.cielo-nubes[data-cielo="ocaso"]{--n-cuerpo:#FFD99C;--n-panza:#E89A92;--n-luz:#F9C6A6;--n-fondo:#E5AAB0}
/* Mouse en escritorio: las capas de las nubes a la vista se mueven sin repintar. */
.cielo-nubes.is-vivo .nube>span{will-change:transform}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* Con scroll las nubes quedan un poco atrás del contenido, como si estuvieran lejos. Lo resuelve el navegador, sin JS. */
    .nube{animation:nube-lejos linear both;animation-timeline:view()}
    /* Al atardecer se apagan mientras el sol baja detrás de los edificios (el sol sigue el mismo recorrido). */
    .cielo-ocaso{animation:nube-ocaso linear both;animation-timeline:view()}
  }
}
/* Sólo en escritorio, una deriva lenta (~1 px/s) en escalones de una décima de píxel: no se notan y el compositor
   redibuja ~15 veces por segundo en vez de 60. En el celular quedan quietas: el dedo es para scrollear. */
@media (prefers-reduced-motion:no-preference) and (min-width:980px){
  .nube{animation:nube-deriva var(--n-dur,80s) steps(640,jump-none) var(--n-del,0s) infinite alternate}
  .cielo-nubes:not(.is-visible) .nube{animation-play-state:paused}
  @supports (animation-timeline:view()){
    .nube{animation:nube-deriva var(--n-dur,80s) steps(640,jump-none) var(--n-del,0s) infinite alternate,nube-lejos linear both;animation-timeline:auto,view()}
    .cielo-nubes:not(.is-visible) .nube{animation-play-state:paused,running}
  }
}
@keyframes nube-deriva{from{translate:calc(var(--n-amp,28px) * -1) 0}to{translate:var(--n-amp,28px) 0}}
@keyframes nube-lejos{from{transform:translate3d(0,calc(var(--n-k,24px) * -1),0)}to{transform:translate3d(0,var(--n-k,24px),0)}}
@keyframes nube-ocaso{0%,36%{opacity:1}74%,100%{opacity:0}}

/* ---------- noche ---------- */
/* Desde la base de los edificios hasta el pie: lo de arriba queda recortado. Adentro, una vista pegada a la pantalla
   (sticky) con las estrellas: el borde con el atardecer lo mueve el navegador al scrollear, nunca llega tarde. */
.cielo-noche{position:absolute;left:0;right:0;top:0;z-index:0;overflow:clip;pointer-events:none}
/* El borde con los edificios se funde: arriba el mismo azul de su base, sin el escalón del velo y las estrellas. */
.cielo-noche::after{content:"";position:absolute;left:0;right:0;top:0;height:140px;
  background:linear-gradient(to bottom,#1D1A3A,rgba(29,26,58,.62) 38%,rgba(29,26,58,.2) 72%,rgba(29,26,58,0))}
.cielo-noche-in{position:absolute;left:0;right:0;top:-100vh;top:-100lvh;bottom:-100vh;bottom:-100lvh}
.cielo-vista{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;opacity:0}
/* Detrás de las estrellas, el mismo velo de vía láctea en diagonal que Actividad, apenas visible. */
.cielo-estrellas{position:absolute;inset:0;display:block;width:100%;height:100%;
  background:linear-gradient(to bottom right,transparent 30%,rgba(196,202,240,.028) 40%,rgba(176,156,244,.045) 48%,rgba(196,202,240,.026) 56%,transparent 66%)}
/* Luna creciente fina con luz cenicienta y un halo frío: la misma de Actividad y del estudio. Desde 1400 px, en el margen
   libre al costado del contenido: sube con la noche desde 48 px debajo del borde y se queda pegada a la pantalla (sticky;
   intro-cielo.js la apaga antes de que un texto o una tarjeta le pase por encima). Más angosto no hay margen: queda junto
   al título de "Trabajos reales" y se va con él. Nunca asoma cortada por el borde. */
.cielo-luna{--moon-size:38px;position:sticky;z-index:1;display:block;top:max(96px,15vh);top:max(96px,15lvh);width:var(--moon-size);height:var(--moon-size);
  margin:48px max(20px,calc((100vw - 1180px) / 2 - 56px)) 0 auto;opacity:0;transform:translate3d(var(--moon-x,0px),var(--moon-y,0px),0);will-change:transform}
@media (max-width:1399px){.cielo-luna{position:absolute;margin:0;top:calc(100vh + 56px);top:calc(100lvh + 56px);right:max(40px,calc((100vw - 1180px) / 2 + 40px))}}
.cielo-luna::before{content:"";position:absolute;inset:calc(var(--moon-size) * -2.4);border-radius:50%;background:radial-gradient(circle,rgba(200,208,255,.075) 0,rgba(200,208,255,.03) 32%,rgba(200,208,255,0) 68%)}
.cielo-luna::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 31% 35%,rgba(214,222,255,.085) 0 calc(var(--moon-size) * .445),#F5F0DE calc(var(--moon-size) * .477));
  filter:drop-shadow(0 0 3px rgba(255,240,214,.4)) drop-shadow(0 0 16px rgba(166,172,200,.24));transform:rotate(-14deg)}
/* En el celular, a la altura de "Trabajos reales", arriba del título; el halo más corto para que no lo recorte el borde. */
@media (max-width:699px){.cielo-luna{--moon-size:24px;top:calc(100vh + 22px);top:calc(100lvh + 22px);right:16px}.cielo-luna::before{inset:calc(var(--moon-size) * -1.1)}}
/* Con el cielo nuevo, las estrellas en CSS de cada sección se van; la foto del cierre queda por encima del cielo. */
html.cielo-noche-on .night::before,html.cielo-noche-on .night::after{content:none}
html.cielo-noche-on .finale>.finale-house{z-index:1}
/* Alto contraste: ni nubes ni canvas, que no se adaptan a los colores forzados. */
@media (forced-colors:active){.cielo-nubes,.cielo-noche{display:none}}