/* ЗВЁЗДЫ И СВЕЧЕНИЕ — то, что лежит под всем остальным.

   Три слоя, снизу вверх:
     1. растяжка фона: светлое голубое пятно посередине, тьма к краям;
     2. звёздное поле — оно медленно плывёт и мерцает;
     3. нейронная сеть на canvas — она отзывается на палец,
        рисует её js/нейроны.js.

   Почему звёзды сделаны фоном, а не на том же canvas: они должны
   плыть медленно и одинаково, это умеет обычная анимация, и она
   не занимает процессор телефона. Сеть живёт быстро и реагирует
   на касание — вот ей canvas и нужен. Разделив их, мы платим
   за движение только там, где без него нельзя.

   Все три слоя прибиты к окну (fixed), а не к странице: при
   прокрутке небо остаётся на месте, как и должно быть у неба. */

.небо{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  /* Свечение поверх растяжки — то самое «светло-светло-голубое».
     Читать по нему не надо, поэтому яркости здесь можно больше,
     чем самой заливке фона. */
  background:
    radial-gradient(62% 38% at 50% 9%,
      rgba(178,228,250,.34) 0%, rgba(96,168,218,.20) 28%,
      rgba(24,74,128,.10) 52%, transparent 76%);
}

/* Звёздное поле. inset:-12% — чтобы при сдвиге не оголялся край. */
.звёзды{
  position:fixed;
  inset:-12%;
  z-index:0;
  pointer-events:none;
  background-image:
    radial-gradient(1.1px 1.1px at 93.0% 39.7%,rgba(255,255,255,0.36),transparent),
    radial-gradient(1.6px 1.6px at 11.0% 58.1%,rgba(232,242,255,0.34),transparent),
    radial-gradient(1.3px 1.3px at 42.1% 24.6%,rgba(255,246,222,0.35),transparent),
    radial-gradient(1.6px 1.6px at 13.9% 22.9%,rgba(255,255,255,0.65),transparent),
    radial-gradient(1.3px 1.3px at 6.8% 22.7%,rgba(232,242,255,0.49),transparent),
    radial-gradient(1.0px 1.0px at 53.9% 56.9%,rgba(232,242,255,0.38),transparent),
    radial-gradient(1.6px 1.6px at 63.3% 37.5%,rgba(255,255,255,0.65),transparent),
    radial-gradient(1.6px 1.6px at 21.8% 67.7%,rgba(255,246,222,0.77),transparent),
    radial-gradient(1.3px 1.3px at 58.2% 45.4%,rgba(214,236,255,0.46),transparent),
    radial-gradient(1.0px 1.0px at 69.1% 24.9%,rgba(214,236,255,0.62),transparent),
    radial-gradient(1.1px 1.1px at 72.0% 29.2%,rgba(255,255,255,0.39),transparent),
    radial-gradient(1.3px 1.3px at 17.8% 34.5%,rgba(255,246,222,0.56),transparent),
    radial-gradient(2.0px 2.0px at 9.5% 55.7%,rgba(214,236,255,0.52),transparent),
    radial-gradient(1.1px 1.1px at 59.1% 57.8%,rgba(255,246,222,0.36),transparent),
    radial-gradient(0.9px 0.9px at 92.7% 47.5%,rgba(255,255,255,0.36),transparent),
    radial-gradient(2.0px 2.0px at 31.7% 57.6%,rgba(255,246,222,0.49),transparent),
    radial-gradient(1.3px 1.3px at 87.2% 35.0%,rgba(255,246,222,0.53),transparent),
    radial-gradient(1.6px 1.6px at 13.2% 6.8%,rgba(214,236,255,0.40),transparent),
    radial-gradient(1.0px 1.0px at 40.2% 90.8%,rgba(255,246,222,0.37),transparent),
    radial-gradient(1.3px 1.3px at 40.6% 28.2%,rgba(232,242,255,0.80),transparent),
    radial-gradient(1.6px 1.6px at 28.7% 41.7%,rgba(214,236,255,0.72),transparent),
    radial-gradient(1.3px 1.3px at 93.9% 15.8%,rgba(232,242,255,0.41),transparent),
    radial-gradient(2.0px 2.0px at 24.4% 48.5%,rgba(232,242,255,0.47),transparent),
    radial-gradient(0.9px 0.9px at 16.0% 53.4%,rgba(214,236,255,0.87),transparent),
    radial-gradient(2.0px 2.0px at 84.5% 94.1%,rgba(255,255,255,0.58),transparent),
    radial-gradient(2.0px 2.0px at 78.6% 39.5%,rgba(255,246,222,0.55),transparent),
    radial-gradient(1.3px 1.3px at 62.9% 7.1%,rgba(255,255,255,0.89),transparent),
    radial-gradient(1.3px 1.3px at 17.6% 34.3%,rgba(255,255,255,0.38),transparent),
    radial-gradient(1.6px 1.6px at 16.5% 10.9%,rgba(214,236,255,0.68),transparent),
    radial-gradient(0.9px 0.9px at 85.9% 61.2%,rgba(232,242,255,0.69),transparent),
    radial-gradient(1.1px 1.1px at 59.8% 47.5%,rgba(255,255,255,0.81),transparent),
    radial-gradient(1.3px 1.3px at 48.1% 31.6%,rgba(232,242,255,0.38),transparent),
    radial-gradient(1.1px 1.1px at 73.1% 47.9%,rgba(232,242,255,0.62),transparent),
    radial-gradient(1.0px 1.0px at 93.3% 52.8%,rgba(232,242,255,0.72),transparent),
    radial-gradient(0.9px 0.9px at 74.8% 30.2%,rgba(255,255,255,0.72),transparent),
    radial-gradient(1.1px 1.1px at 51.8% 90.0%,rgba(214,236,255,0.77),transparent),
    radial-gradient(1.6px 1.6px at 54.0% 50.3%,rgba(232,242,255,0.68),transparent),
    radial-gradient(1.0px 1.0px at 79.4% 81.2%,rgba(232,242,255,0.44),transparent),
    radial-gradient(1.3px 1.3px at 36.1% 3.8%,rgba(255,255,255,0.78),transparent),
    radial-gradient(1.3px 1.3px at 26.9% 68.9%,rgba(214,236,255,0.58),transparent),
    radial-gradient(2.0px 2.0px at 96.9% 94.6%,rgba(214,236,255,0.37),transparent),
    radial-gradient(0.9px 0.9px at 23.8% 20.3%,rgba(232,242,255,0.60),transparent),
    radial-gradient(1.6px 1.6px at 82.7% 48.0%,rgba(214,236,255,0.78),transparent),
    radial-gradient(0.9px 0.9px at 82.1% 12.8%,rgba(255,246,222,0.77),transparent),
    radial-gradient(1.0px 1.0px at 47.9% 18.5%,rgba(214,236,255,0.37),transparent),
    radial-gradient(2.0px 2.0px at 40.0% 40.3%,rgba(255,255,255,0.74),transparent);
  animation:плывут 150s linear infinite, мерцают 9s ease-in-out infinite alternate;
}
@keyframes плывут{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-5%,3%,0)}
}
@keyframes мерцают{
  from{opacity:.72}
  to{opacity:1}
}

/* Нейронная сеть. Прозрачна для касаний: палец должен долетать
   до кнопок под ней, а её слушает сам js/нейроны.js на окне. */
.нейроны{
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* Виньетка прижимает края: без неё звёзды у самой рамки экрана
   спорят с текстом, а середина не читается как середина */
.виньетка{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(76% 64% at 50% 38%,
    transparent 44%, rgba(2,7,13,.42) 74%, rgba(2,7,13,.86) 100%);
}

/* Содержимое лежит поверх неба */
.оболочка{position:relative;z-index:2}

/* Кому движение мешает — тот выключил его в настройках телефона.
   Небо остаётся, шевелиться перестаёт. */
@media (prefers-reduced-motion:reduce){
  .звёзды{animation:none;opacity:.85}
}