/* ══════════════════════════════════════════════════════════════════
   ЖИВОЕ НЕБО

   Фон не картинка, а сцена: звёздное поле медленно ползёт, а поверх него
   по очереди проступают гравюрные фигуры созвездий — каждая появляется
   не целиком, а прорисовывается полосой, будто её режут по меди прямо
   сейчас, держится и тает.

   Гравюры лежат в /const/*.webp с прозрачным фоном: альфа вытянута из
   яркости исходной картинки, поэтому у фигуры нет ни рамки, ни подложки.
   ══════════════════════════════════════════════════════════════════ */
.sky .constellations{
  position:absolute;inset:0;pointer-events:none;
  /* z-index обязателен. У .sky есть затемняющий ::after, а псевдоэлемент
     рисуется ПОВЕРХ обычных детей при равном z-index. По краям экрана его
     непрозрачность 90% — ровно там, где стоят фигуры, — и от гравюры
     оставалась десятая доля яркости. Со стороны это выглядело так, будто
     фон не поменялся вовсе. */
  z-index:1;
  /* НИКАКОГО opacity на этом слое: значение меньше единицы включает
     изоляцию группы, и mix-blend-mode детей перестаёт видеть страницу —
     чёрный фон гравюры остаётся чёрным прямоугольником. Приглушение
     живёт в анимации самой фигуры. */
}

.constel{
  position:absolute;aspect-ratio:1;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  /* Смешивание больше не нужно: фон гравюр по-настоящему прозрачен.
     screen считал по всей площади элемента, и край прямоугольника
     проступал на странице светлой рамкой. */
  will-change:opacity,mask-position,transform;

  /* Резец идёт сверху вниз: маска — узкая полоса проявления,
     размер 100% 300% даёт ей ход длиной в три высоты фигуры */
  --cut:linear-gradient(to bottom,#000 0 34%,rgba(0,0,0,.45) 41%,transparent 52%);
  -webkit-mask-image:var(--cut);mask-image:var(--cut);
  -webkit-mask-size:100% 300%;mask-size:100% 300%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;

  animation-name:constel-life,constel-cut,constel-drift;
  animation-duration:52s,19.5s,52s;
  animation-timing-function:linear,cubic-bezier(.35,.05,.3,1),linear;
  animation-fill-mode:both,both,both;
}

/* Жизнь фигуры: проступает, держится, тает */
@keyframes constel-life{
  0%{opacity:0}
  20%{opacity:.62}     /* проявление 10,4 с — втрое дольше прежних 3,4 */
  76%{opacity:.62}     /* стоит проявленной ~29 с */
  100%{opacity:0}      /* гаснет 12,5 с */
}
/* Резец: маска съезжает снизу вверх, открывая фигуру полосой */
@keyframes constel-cut{
  from{-webkit-mask-position:0 100%;mask-position:0 100%}
  to{-webkit-mask-position:0 0;mask-position:0 0}
}
/* Небо поворачивается: фигура за свою жизнь чуть уходит и подрастает */
@keyframes constel-drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(1.6vw,-1.1vh,0) scale(1.045)}
}

/* Браузер без mask-image покажет фигуру целиком — приём слабее, но цел */
@supports not (mask-image:linear-gradient(#000,#000)){
  .constel{-webkit-mask-image:none;mask-image:none}
}

@media(max-width:700px){
  /* На телефоне фигура занимает весь экран и спорит с текстом сильнее */
  .constel{animation-name:constel-life-dim,constel-cut,constel-drift}
  @keyframes constel-life-dim{
    0%{opacity:0}20%{opacity:.4}76%{opacity:.4}100%{opacity:0}
  }
}
@media (prefers-reduced-motion:reduce){
  .sky .constellations{display:none}
}