/* El ambiente: el cielo que cambia con el scroll, la silueta de la ciudad y el grano.
   Parte de styles/ — se cargan en orden desde index.html. */

.sky { position: fixed; inset: 0; z-index: -3; overflow: hidden; }

/* translateZ(0): cada capa se rasteriza una vez y el resto del scroll sólo se
   recompone. Sin esto, un degradado del tamaño de la pantalla se vuelve a
   pintar en cada cuadro. */
.sky__layer {
  position: absolute; inset: 0;
  will-change: opacity;
  transform: translateZ(0);
}

/* 1 · sol todavía arriba, oro pálido sobre el horizonte */
.sky__layer--oro {
  opacity: 1;
  background:
    radial-gradient(120% 80% at 50% 88%, #ffd27a 0%, #f2b441 22%, #d97b3a 46%, #8e4a55 72%, #33325f 100%);
}
/* 2 · el sol tocando el agua */
.sky__layer--brasa {
  opacity: 0;
  background:
    radial-gradient(110% 75% at 50% 92%, #ffb347 0%, #e4622e 26%, #a83f5b 52%, #5b3170 76%, #221f4d 100%);
}
/* 3 · la hora morada */
.sky__layer--crepusculo {
  opacity: 0;
  background:
    radial-gradient(130% 80% at 50% 100%, #c2513f 0%, #7b3f6b 30%, #3b2c6b 58%, #1b2a5e 80%, #0d1130 100%);
}
/* 4 · ya es de noche */
.sky__layer--noche {
  opacity: 0;
  background:
    radial-gradient(140% 90% at 50% 104%, #2a2350 0%, #141a3e 30%, #0b0d1f 62%, #07080f 100%);
}

.sky__stars {
  position: absolute; inset: 0; opacity: 0;
  transform: translateZ(0);
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 31% 42%, #ffe9c4, transparent),
    radial-gradient(1.6px 1.6px at 58% 12%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 74% 33%, #d9e6ff, transparent),
    radial-gradient(1.5px 1.5px at 88% 9%,  #fff, transparent),
    radial-gradient(1.2px 1.2px at 22% 61%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 46% 74%, #ffe9c4, transparent),
    radial-gradient(1px   1px   at 66% 55%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 92% 66%, #d9e6ff, transparent),
    radial-gradient(1.1px 1.1px at 8%  84%, #fff, transparent);
  background-size: 100% 100%;
}

/* El sol: baja con el scroll y se mete detrás de la ciudad */
.sky__sun {
  --d: min(46vmin, 400px);
  position: fixed;
  top: 22vh;
  left: 50%;
  width: var(--d);
  height: var(--d);
  margin-left: calc(var(--d) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, #fff7e0 0%, #ffd98a 38%, #f2b441 62%, rgb(228 98 46 / .55) 78%, transparent 79%);
  filter: blur(2px);
  will-change: transform, opacity;
}

/* La ciudad, siempre abajo. El dibujo lo genera tools/make-skyline.py y vive
   inline en index.html; aquí sólo se coloca y se le da el brillo a las luces. */
.skyline {
  position: fixed;
  inset: auto 0 0 0;
  height: clamp(150px, 26vh, 300px);
  z-index: -2;
  pointer-events: none;
}
.skyline svg { width: 100%; height: 100%; display: block; }

/* La ciudad es del hero de la portada y sólo de ahí.

   En las internas no cabe: el cielo está parado a una hora fija, así que la
   silueta nunca se apagaría, y esas páginas son cortas —el cierre acaba
   siempre dentro de la banda de edificios—. Se probó fija y también anclada
   al pie de la primera pantalla; en las dos el logo del cierre terminaba
   entre las ventanas. Lo que une las páginas es la hora del cielo, no esto. */
body[data-hora] .skyline { display: none; }

/* Las ventanas son de un blanco cálido con un halo mínimo: sin él se ven como
   rectángulos pegados; con él, como luces encendidas a lo lejos. */
.skyline__luces { filter: drop-shadow(0 0 2px rgb(255 236 190 / .55)); }

/* Grano: los carteles están impresos, la pantalla también */
.grain {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none; opacity: .055; mix-blend-mode: overlay;
  /* La textura no cambia nunca: que se rasterice una vez y se quede en su
     propia capa. La mezcla sigue costando, pero al menos no se re-dibuja. */
  transform: translateZ(0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Con "menos movimiento" activado no hay atardecer: se entrega la noche fija. */
@media (prefers-reduced-motion: reduce) {
  .sky__layer--noche { opacity: 1; }
  .sky__stars { opacity: .5; }
  .sky__sun { display: none; }
}