/* Общий фон сайта Kora — вместо пустого чёрного.
   Та же сетка из точек, что на первом экране главной (шаг 30 px), к краям
   тает; по ней медленно плывут два мягких пятна света, и в ритме
   сердцебиения Коры (раз в 4,8 с — каждый второй удар) от центра
   расходится едва заметное кольцо пульса. Только CSS: без скриптов,
   на телефоне не нагружает. Подключается на каждой странице:
     <link rel="stylesheet" href="/ambient.css">
     <div class="kora-ambient" aria-hidden="true"><i></i><i></i><b></b></div>
   Слой стоит за всем содержимым (z-index:-1) — фон body у страниц
   переходит на холст, поэтому слой виден поверх него. */

.kora-ambient{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
}
/* сетка точек, тающая к краям */
.kora-ambient::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(242,241,237,.10) 1px, transparent 1.3px);
  background-size:30px 30px;background-position:15px 15px;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 45%, #000 20%, rgba(0,0,0,.35) 60%, transparent 92%);
          mask-image:radial-gradient(ellipse 85% 75% at 50% 45%, #000 20%, rgba(0,0,0,.35) 60%, transparent 92%);
}
/* «плата»: дорожки как на схеме продуктов, по некоторым изредка бежит свет
   (circuit.svg генерирует tools/make_circuit_bg.py). В центре, где текст,
   почти не видна, к краям проявляется. На телефоне — без анимации. */
.kora-ambient::after{
  content:"";position:absolute;inset:0;
  background-image:url(/circuit.svg);background-size:720px 720px;background-position:50% 0;
  -webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 45%, rgba(0,0,0,.28) 0%, rgba(0,0,0,.55) 45%, #000 85%);
          mask-image:radial-gradient(ellipse 70% 62% at 50% 45%, rgba(0,0,0,.28) 0%, rgba(0,0,0,.55) 45%, #000 85%);
}
@media (max-width:700px){
  .kora-ambient::after{background-image:url(/circuit-static.svg);background-size:560px 560px;opacity:.8}
}
/* два мягких пятна света медленно перетекают */
.kora-ambient i{
  position:absolute;border-radius:50%;filter:blur(60px);
  animation:koraDrift 34s ease-in-out infinite alternate;
}
.kora-ambient i:nth-child(1){
  width:62vmax;height:52vmax;right:-18vmax;top:-20vmax;
  background:radial-gradient(circle, rgba(242,241,237,.075), transparent 68%);
}
.kora-ambient i:nth-child(2){
  width:58vmax;height:48vmax;left:-20vmax;bottom:-22vmax;
  background:radial-gradient(circle, rgba(170,178,196,.06), transparent 68%);
  animation-duration:41s;animation-delay:-14s;
}
@keyframes koraDrift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-6vmax,5vmax) scale(1.12)}
  100%{transform:translate(4vmax,-3vmax) scale(.94)}
}
/* кольцо пульса из центра: тонкая окружность, расширяется и гаснет */
.kora-ambient b{
  position:absolute;left:50%;top:45%;width:24vmax;height:24vmax;margin:-12vmax 0 0 -12vmax;
  border-radius:50%;border:1px solid rgba(242,241,237,.10);
  opacity:0;transform:scale(.2);
  animation:koraRing 4.8s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes koraRing{
  0%{opacity:0;transform:scale(.2)}
  8%{opacity:1}
  70%{opacity:0;transform:scale(4.2)}
  100%{opacity:0;transform:scale(4.2)}
}
@media (prefers-reduced-motion: reduce){
  .kora-ambient i,.kora-ambient b{animation:none}
  .kora-ambient b{display:none}
  .kora-ambient::after{background-image:url(/circuit-static.svg)}
}
@media print{.kora-ambient{display:none}}