/* ============================================================
   Небо FL360 — закат с эшелона 11 км.

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

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

   Подключается поверх styles.css классом .sky--fl360 на блоке .sky.
   Геометрия и рельеф облаков лежат в текстурах, цвет света задаёт
   CSS: так солнце двигается по горизонтали одной переменной.
   ============================================================ */

/* Подъём горизонта нужен анимируемым, а нерегистрированная переменная
   не интерполируется: без @property такт «небо отвечает» просто не сыграет */
@property --fl-lift {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

.sky--fl360 {
  --fl-base: 74%; /* линия горизонта по высоте экрана */
  --fl-lift: 0%;  /* подъём зари в момент выписки талона */
  --fl-h: calc(var(--fl-base) - var(--fl-lift));
  --fl-sun: 62%;  /* солнце по горизонтали */
  background: #0b0f1a;
}

/* ---------- Слоистая атмосфера ---------- */
/* Слой кончается ровно на линии горизонта, поэтому стопы заданы в долях
   неба, а не экрана: сдвинули --fl-h - вся лесенка уехала следом. Когда
   стопы были прибиты к процентам экрана, на телефоне соломенная полоса
   отрывалась от горизонта и ложилась поперёк текста.
   Стопы редкие наверху и вплотную у кромки: так и устроено рассеяние. */
.fl__air {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--fl-h);
  background:
    radial-gradient(72% 30% at 24% 8%, rgba(30, 70, 150, 0.14), transparent 72%),
    linear-gradient(180deg,
      #000104 0%,
      #000309 13.5%,
      #010718 28.4%,
      #031030 43.2%,
      #05194a 56.8%,
      #082663 68.9%,
      #0b3379 79.1%,
      #0f4390 86.5%,
      #1a5aa0 91.9%,
      #3a7db0 94.2%,
      #79a4b6 96.2%,
      #bdb9a8 97.4%,
      #e6d3a4 98.3%,
      #dfae72 98.9%,
      #cf8a4a 99.3%,
      #c05a2e 99.62%,
      #dd4620 99.88%,
      #9e2a17 100%);
}

/* Ниже кромки воздух другой: тёплая дымка сразу гаснет в холодную мглу */
.fl__ground {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--fl-h);
  bottom: 0;
  background: linear-gradient(180deg,
    #6b5a5e 0%,
    #55545f 4%,
    #4a5165 10%,
    #333a52 27%,
    #22283c 46%,
    #151a2a 73%,
    #0b0f1a 100%);
}

/* ---------- Звёзды ---------- */
/* Поле статичное и плотное, мерцает только слой из page.js. Обе маски
   одинаковы: к кобальту звёзды тонут, у горизонта их нет совсем. */
.fl__stars,
.sky--fl360 .sky__stars {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 32%, rgba(0, 0, 0, 0.45) 50%, transparent 62%);
  mask-image: linear-gradient(180deg, #000 0%, #000 32%, rgba(0, 0, 0, 0.45) 50%, transparent 62%);
}
.fl__stars {
  position: absolute;
  inset: 0;
  background: url("fl360-stars.svg") repeat;
  background-size: 1600px 1000px;
  opacity: 0.92;
}

/* ---------- Перистые ---------- */
/* На высоте над горизонтом остаются только едва различимые полосы
   дымки. Форму даёт маска, цвет — градиент под ней. */
.fl__cirrus {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--fl-h);
  overflow: hidden;
}
.fl__cirrus i {
  position: absolute;
  left: -34%;
  width: 168%;
  height: 12%;
  -webkit-mask: url("fl360-cirrus.png") repeat-x center / 58% 100%;
  mask: url("fl360-cirrus.png") repeat-x center / 58% 100%;
  will-change: transform;
}
.fl__cirrus i:nth-child(1) {
  top: 54%;
  background: linear-gradient(90deg, rgba(120, 160, 200, 0), rgba(150, 186, 214, 0.6) 46%, rgba(120, 158, 196, 0.2));
  opacity: 0.22;
  animation: fl-cirrus 300s linear infinite;
}
.fl__cirrus i:nth-child(2) {
  top: 65%;
  height: 7%;
  background: linear-gradient(90deg, rgba(198, 190, 168, 0.1), rgba(226, 214, 180, 0.7) 52%, rgba(200, 186, 158, 0.2));
  opacity: 0.34;
  animation: fl-cirrus 210s linear infinite reverse;
}
@keyframes fl-cirrus {
  to { transform: translateX(-58%); }
}

/* ---------- Облачная палуба ---------- */
/* Плоскость наклонена перспективой, поэтому у горизонта текстура
   сжимается сама, как настоящая палуба в восьми километрах внизу.
   Текстура едет вниз по плоскости: мы летим над ней вперёд.
   Ярусов два. Верхний крупнее и идёт вдвое быстрее, потому что он
   ближе к нам: разница скоростей и даёт объём вместо плоской наклейки. */
.fl__deck {
  position: absolute;
  left: -55%;
  right: -55%;
  top: var(--fl-h);
  bottom: -6%;
  overflow: hidden;
  perspective: clamp(320px, 40vw, 560px);
  perspective-origin: var(--fl-sun) 0%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 58%, rgba(0, 0, 0, 0.28) 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 58%, rgba(0, 0, 0, 0.28) 84%, transparent 100%);
}
.fl__deck > i {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 300%;
  transform-origin: 50% 0%;
  /* Чем положе плоскость, тем крупнее ближние гряды: при 76 градусах
     палуба под ногами читалась как морские волны, а не как облака */
  transform: rotateX(79.5deg);
  overflow: hidden;
}
.fl__deck b {
  position: absolute;
  left: 0;
  right: 0;
  top: -820px;
  bottom: -820px;
  background: url("fl360-deck.jpg") repeat;
  background-size: 820px 820px;
  animation: fl-fly 190s linear infinite;
}
/* Сдвиг ровно на одну плитку: цикл замыкается без стыка */
@keyframes fl-fly {
  to { transform: translate3d(0, 820px, 0); }
}

.fl__deck--hi b {
  top: -1480px;
  bottom: -1480px;
  background-image: url("fl360-deck2.png");
  background-size: 1480px 1480px;
  opacity: 0.72;
  animation: fl-fly-hi 96s linear infinite;
}
@keyframes fl-fly-hi {
  to { transform: translate3d(0, 1480px, 0); }
}

/* Ближние облака на закате уже в тени Земли: свет остаётся только
   тонкой кромкой у горизонта. Заодно снимает пестроту под формой. */
.fl__shade {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--fl-h);
  bottom: 0;
  background:
    radial-gradient(46% 26% at var(--fl-sun) 0%, rgba(214, 104, 60, 0.2), transparent 70%),
    linear-gradient(180deg,
      rgba(150, 70, 46, 0.16) 0%,
      rgba(50, 54, 78, 0.2) 5%,
      rgba(13, 16, 38, 0.3) 12%,
      rgba(12, 14, 36, 0.48) 26%,
      rgba(11, 13, 34, 0.74) 58%,
      rgba(9, 11, 28, 0.9) 100%);
}

/* ---------- Кромка горизонта ---------- */
/* Мягкое свечение зари над кромкой. Резких горизонтальных прожилок
   здесь быть не должно: на экране они читаются как жалюзи. */
.fl__glow {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--fl-h) - 6.5%);
  height: 8.5%;
  background: radial-gradient(66% 86% at var(--fl-sun) 92%, rgba(255, 202, 146, 0.2), transparent 76%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 62%, #000 90%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 62%, #000 90%, transparent);
}

/* Дымка ровно на линии горизонта: край палубы растворяется в воздухе */
.fl__haze {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--fl-h) - 5%);
  height: 6.4%;
  mix-blend-mode: screen;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(96, 78, 52, 0.2) 58%,
    rgba(150, 66, 32, 0.28) 84%,
    transparent 100%);
  filter: blur(9px);
}

/* Зерно: без него длинный вертикальный градиент полосит на 8-битных экранах */
.fl__grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Телефон ---------- */
body.is-issued .sky--fl360 { --fl-base: 88%; }

@media (max-width: 700px) {
  /* Экран узкий и высокий: горизонт ниже, иначе половину кадра
     занимает пустая синь над головой */
  .sky--fl360 { --fl-base: 79%; --fl-sun: 58%; }
  .fl__deck > i { transform: rotateX(79deg); }
  .fl__stars { background-size: 1100px 700px; }

  /* Наклонённый слой в три экрана высотой браузер телефона пересчитывает
     каждый кадр: отсюда рывки и разрывы плиток. Верхний ярус убираем,
     нижний останавливаем - фактура остаётся, счёт прекращается. */
  .fl__deck--hi { display: none; }
  .fl__deck b { animation: none; }
  .fl__deck > i { height: 190%; }
}

@media (prefers-reduced-motion: reduce) {
  .fl__deck b,
  .fl__deck--hi b,
  .fl__cirrus i:nth-child(1),
  .fl__cirrus i:nth-child(2) { animation: none; }
}

/* ---------- Такт 6: небо отвечает на выписанный талон ----------
   Мир отзывается на событие: заря разгорается, поднимается и садится
   обратно. Движение обязано быть на пределе заметности - громче значит
   получить мигающий фон под текстом. */
body.is-issued .sky--fl360 { animation: fl-answer 2.4s var(--ease-out) 2.2s both; }
@keyframes fl-answer {
  0%, 100% { --fl-lift: 0%; }
  45%      { --fl-lift: 1.4%; }
}
body.is-issued .fl__glow { animation: fl-answer-glow 2.4s var(--ease-out) 2.2s both; }
@keyframes fl-answer-glow {
  0%, 100% { filter: brightness(1); transform: scaleY(1); }
  45%      { filter: brightness(1.55); transform: scaleY(1.22); }
}
.fl__glow { transform-origin: 50% 100%; }
body.is-issued .fl__haze { animation: fl-answer-haze 2.4s var(--ease-out) 2.2s both; }
@keyframes fl-answer-haze {
  0%, 100% { filter: blur(9px) brightness(1); }
  45%      { filter: blur(9px) brightness(1.5); }
}
body.is-issued .fl__stars { animation: fl-answer-stars 2.4s var(--ease-out) 2.2s both; }
@keyframes fl-answer-stars {
  0%, 100% { opacity: 0.92; }
  45%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body.is-issued .sky--fl360,
  body.is-issued .fl__glow,
  body.is-issued .fl__haze,
  body.is-issued .fl__stars { animation: none; }
}

/* ---------- Подстраницы: только воздух ----------
   Замерено: герои подстраниц кончаются на 336-747 пикселях, а контент
   начинается всего через 56 после них. Уложить кромку заката в такой зазор
   нельзя ни на одной общей высоте, а при закреплённом небе строки просто
   ездили бы сквозь светлую полосу.
   Поэтому закат и облачная палуба остаются главной и брони, а здесь от неба
   берётся только воздух: чёрный верх, кобальт к низу, звёзды и перистые.
   Кромка уведена за нижний край (--fl-base больше ста процентов), и ни одна
   строка на светлое не попадает. Палуба заодно не грузится: минус 470 КБ. */
.pg.dark { background: #0b0f1a; }