/* =========================================================================
   ФОНЫ СТРАНИЦЫ

   До этого файла у страницы не было ни одного собственного слоя: сплошная
   заливка `--color-ink` от шапки до подвала, доставшаяся из архива. Из-за
   неё карточки, калькулятор и разделы лежали на одном и том же листе, и
   глазу не за что было зацепиться при прокрутке — всё выглядело одной
   бесконечной плоскостью.

   ЧТО СДЕЛАНО И ПОЧЕМУ ИМЕННО ТАК

   1. Свет — отдельным слоем на body::before, приклеенным к экрану.

      Не на самом body и не фоном секций. Причина техническая: фон,
      прибитый к экрану через `background-attachment: fixed`, заставляет
      браузер перерисовывать его на каждый кадр прокрутки, и на телефоне
      это видно рывками. Отдельный слой с `position: fixed` браузер
      выносит на свою композиторскую поверхность и при прокрутке не
      трогает вовсе.

   2. Зерно, а НЕ гравюра. Первой попыткой была та же штриховка, что на
      карточках, только бледнее. Ошибка: карточка лежит на странице, и
      если материал у них один, предмет перестаёт отделяться от фона —
      две штриховки одного угла складываются в рябь. Страница должна быть
      воздухом, а не поверхностью, поэтому здесь шум без периода.

   3. Полосы разделов. Соседние секции получают чуть разный тон, и при
      прокрутке видно, что ты движешься, а не стоишь на месте. Разница
      маленькая нарочно: полосатая страница читается как таблица.

   4. Виньетка по краям экрана. Тот же приём, что на карточках, только
      мягче: она собирает внимание к середине и прячет то, что колонки
      не доходят до краёв на широком мониторе.

   ЧЕГО ЗДЕСЬ НЕТ

   Точечной сетки — самый заезженный фон в вебе, читается как «фактуру не
   выбирали». И гравюры: она занята карточками, см. пункт 2.
   ========================================================================= */

/* ---------- слой света: приклеен к экрану, не прокручивается ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    /* тёплый акцент справа сверху — оттуда же, откуда светит на карточки */
    radial-gradient(58% 42% at 88% -4%,
      color-mix(in srgb, var(--color-neon) 13%, transparent) 0%,
      transparent 70%),
    /* холодный подсвет слева снизу: два источника разной температуры
       дают глубину, один даёт заливку */
    radial-gradient(52% 46% at -6% 92%,
      color-mix(in srgb, var(--color-h2c) 8%, transparent) 0%,
      transparent 72%),
    /* виньетка */
    radial-gradient(120% 90% at 50% 32%,
      transparent 0%, transparent 46%,
      color-mix(in srgb, #000 48%, transparent) 100%);
}

/* ---------- слой зерна ----------
   НЕ гравюра. Гравюра уже стоит на карточках, и вторая такая же под ними
   даёт рябь: две штриховки одного угла складываются в муар, а разного —
   спорят друг с другом. Страница и предмет на ней не могут быть сделаны
   из одного материала.

   Здесь плёночное зерно — шум без периода. Глазу не за что зацепиться,
   поэтому оно не читается узором вообще: работает как воздух, а не как
   поверхность. И заодно убирает полосы, которые большие градиенты дают
   на восьмибитных экранах.

   Прокручивается вместе со страницей: зерно, стоящее на месте, пока едет
   содержимое, читается как грязь на стекле. */
body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28#n%29' opacity='.42'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Слои лежат под содержимым, поэтому у body должна быть точка отсчёта для
   absolute и своя глубина стопки. */
body {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-block) 22%, var(--color-ink)) 0%,
      var(--color-ink) 34%,
      var(--color-ink) 76%,
      color-mix(in srgb, var(--color-ink-2) 70%, var(--color-ink)) 100%)
    fixed;
}

/* ---------- полосы разделов ----------
   Чётные секции чуть глубже нечётных. Разница на пределе заметности: её
   не разглядывают, её чувствуют при прокрутке. */
.sheet:nth-of-type(even) {
  /* Не сплошная заливка, а градиент с растворёнными краями: сплошная
     давала две резкие горизонтальные ступени цвета — сверху и снизу
     полосы, — и они читались границами коробки, а не сменой тона. */
  background:
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, #000 18%, transparent) 14%,
      color-mix(in srgb, #000 18%, transparent) 86%,
      transparent 100%);
}

/* Линия между разделами уже есть в base.css (`border-top`), но на новом
   фоне она тонет. Добавляем над ней световую кромку — так граница
   читается как стык двух поверхностей, а не как случайная черта. */
.sheet {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-bone) 4%, transparent);
}

/* ---------- первый экран ----------
   Своего свечения у него больше нет, и это исправление, а не упрощение.

   Стояло `.hero::before` с радиальными пятнами. Псевдоэлемент лежит в
   коробке первого экрана, а коробка эта — колонка содержимого с чёткими
   краями: градиент внутри неё обрывался ровно по её границе. Получался
   светлый прямоугольник шириной с колонку — то есть нарисованная рамка
   вокруг первого экрана, которой никто не просил.

   Мягкое пятно, обрезанное по прямой, всегда читается прямоугольником.
   Свет обязан жить на слое во весь экран, где ему нечем обрезаться, —
   он там уже есть, выше. */

/* ---------- шапка и лента ----------
   Шапка стоит на прокручиваемом фоне и должна оставаться читаемой, когда
   под неё уезжает светлое место. Размытие вместо непрозрачной заливки:
   заливка отрезала бы шапку от страницы полосой другого цвета. */
.nav {
  background: color-mix(in srgb, var(--color-ink) 72%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
          backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-bone) 6%, transparent);
}

.tape {
  background: color-mix(in srgb, var(--color-ink-2) 82%, transparent);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

/* ---------- подвал ----------
   Уходит в темноту: конец страницы должен читаться концом. */
.foot {
  background:
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, #000 32%, transparent) 100%);
}

/* ---------- бережно к тем, кто просил меньше движения ----------
   Приклеенные к экрану фоны — это движение относительно содержимого.
   Человеку, у которого в системе стоит «уменьшить анимацию», оно мешает
   так же, как анимация. */
@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll; }
  body::before { position: absolute; }
}