/* ============================================================================
   site/field.css — места, где живёт «поле» (site/field.js).

   Холст всегда лежит ПОД содержимым и никогда не перехватывает указатель:
   волну бьёт сам раздел, а ссылки и кнопки поверх должны работать как
   обычно. Поэтому pointer-events на холсте нет, а обработчик касания висит
   на разделе.

   Холст растворяется маской по ВСЕМ ЧЕТЫРЁМ краям. Причина простая: контекст
   WebGL заведён с alpha:false, то есть холст непрозрачен и красит туман до
   последнего пикселя. Где маска не доходит — там ровная кромка, и раздел
   читается как «сюда вставили картинку», а не «раздел так выглядит».

   Раньше маска гасила только верх («transparent 0, #000 26%, #000 100%»):
   низ оставался непрозрачным и упирался в светлую секцию полосой, а боков
   маска не касалась вовсе — волна обрубалась по левому и правому краю окна.
   ========================================================================== */

/* ─────────────── общий слой ─────────────── */

.has-field{ position:relative; isolation:isolate }

.field-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:0; pointer-events:none;
  /* Появление без рывка: первый кадр приезжает через кадр-два после
     разметки, и без этого раздел моргает зелёным. */
  opacity:0; transition:opacity .9s cubic-bezier(.22,1,.36,1);

  /* Две маски, пересечение. Механика описана один раз здесь, а каждое место
     ниже меняет только --mask-v и --mask-h — иначе набор из четырёх префиксов
     пришлось бы копировать в каждое правило и он бы разъехался.
     mask-composite:intersect — стандарт; -webkit-mask-composite:source-in —
     то же самое старым словарём WebKit, без него Safari складывает маски и
     гасит всё. */
  --mask-v:linear-gradient(to bottom,
    transparent 0, #000 22%, #000 74%, transparent 100%);
  --mask-h:linear-gradient(to right,
    transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-image:var(--mask-v), var(--mask-h);
          mask-image:var(--mask-v), var(--mask-h);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;   mask-size:100% 100%;
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.field-on .field-canvas{ opacity:1 }

/* Содержимое раздела — над холстом. Без этого текст оказывается под
   полем: холст вставлен первым ребёнком. */
/* Из правила исключена коробка фигуры: иначе поле поднимало бы `.fig` над
   содержимым — та же война слоёв, только в обратную сторону. */
.has-field > *:not(.field-canvas):not(.fig){ position:relative; z-index:1 }

/* ─────────────── шапки внутренних страниц ───────────────
   Поле гаснет ВНУТРИ шапки — и сверху, и снизу. Первым заходом холст
   свешивался в следующий блок, чтобы не было границы, но `overflow:hidden`
   срезал его ровной линией и получалось ровно то, чего избегали. Проще:
   ничего не свешиваем, а маску доводим до нуля к нижнему краю секции. */
.ptop.has-field{ overflow:hidden }
.ptop.has-field .field-canvas{
  /* Верхние сорок процентов шапки поле не занимает вовсе: там стоят заголовок
     страницы и лид, и гребень проходил ровно по их строкам. Рельеф начинается
     ПОД текстом и к низу секции сходит на нет. */
  --mask-v:linear-gradient(to bottom,
    transparent 0, #000 42%, #000 70%, transparent 99%);
}

/* ─────────────── цепочка над полем ───────────────
   Шаг, до которого волна уже дошла, светится. Это и есть довод раздела:
   одно событие докатилось до всех четырёх мест. */
.chain-i{ transition:border-color .3s var(--e-micro), background .3s var(--e-micro) }
.chain-i.is-lit{ border-color:var(--cta-edge, rgba(255,255,255,.4)) }
.chain-i.is-lit .chain-n{ background:var(--cta-soft, rgba(255,255,255,.12));
  border-color:var(--cta-edge, rgba(255,255,255,.4)); color:var(--cta) }

/* ─────────────── бережно ───────────────
   При «уменьшить движение» поле рисует один статичный кадр (это делает
   field.js), маска и слои остаются — раздел не разваливается. */
@media (prefers-reduced-motion: reduce){
  .field-canvas{ transition:none }
}

/* ─────────────── поле в липкой сцене «Показа» ───────────────
   Рельеф лежит ПОД телефоном и занимает нижнюю половину сцены: сверху там
   заголовок главы и сам телефон, и гребень на их строках убил бы контраст.
   Полоса намеренно высокая — маленький рельеф у нижней кромки читался
   полоской, а не далью.

   Сцена приколота (position:sticky) и обрезана по себе, поэтому холст
   гасим и сверху, и снизу: иначе на въезде и выезде раздела по всей ширине
   встаёт горизонтальная линия — та же беда, от которой .show-light спасает
   своя маска. */
.show-stage.has-field .field-canvas{
  --mask-v:linear-gradient(to bottom,
    transparent 0, #000 38%, #000 88%, transparent 100%);
  --mask-h:linear-gradient(to right, #000 0, #000 100%);
}