/*
 * SKY · the whole-page atmosphere (js/sky.js)
 * One long night behind everything: midnight at the top of the page,
 * a 70s dawn at the bottom. JS sets the gradient, the stars and the sun.
 */

.sky {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  /* fallback night if the script never runs */
  background: linear-gradient(180deg, #05041a 0%, #0b0926 40%, #161040 75%, #221956 100%);
}

.sky-grad,
.sky-stars,
.sky-sun {
  position: absolute;
  pointer-events: none;
}

.sky-grad {
  inset: 0;
  background: linear-gradient(180deg, #05041a 0%, #0b0926 40%, #161040 75%, #221956 100%);
}

.sky-stars {
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* The sun: a hard-banded 70s sunset disc that rises behind the footer hills. */
.sky-sun {
  left: 0;
  top: 0;
  width: var(--sky-sun-size, 640px);
  height: var(--sky-sun-size, 640px);
  border-radius: 50%;
  visibility: hidden;
  will-change: transform;
  background: radial-gradient(
    circle closest-side,
    #fffbe9 0%,
    #ffeab0 16%,
    #ffcf6a 32%,
    #f9a640 41%,
    rgba(255, 214, 150, 0.32) 41% 43.5%,
    rgba(244, 179, 60, 0.6) 43.5% 51%,
    rgba(255, 196, 120, 0.18) 51% 52.5%,
    rgba(236, 122, 44, 0.46) 52.5% 60%,
    rgba(255, 170, 120, 0.14) 60% 61.5%,
    rgba(204, 74, 43, 0.32) 61.5% 69%,
    rgba(255, 150, 120, 0.1) 69% 70.5%,
    rgba(168, 50, 90, 0.22) 70.5% 79%,
    rgba(168, 50, 90, 0.08) 79% 90%,
    rgba(168, 50, 90, 0) 100%
  );
}
.sky-sun.is-up {
  visibility: visible;
}

/*
 * Film grain on the sky only: a still noise tile (light and dark specks,
 * so it adds texture without lifting the blacks). No animation, no blend
 * mode, its own layer, so it is painted once and never again.
 */
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3 0 0 0 -1.55' result='w'/%3E%3CfeColorMatrix in='t' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 0 0 0 1.45' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='w'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  will-change: transform;
}