/* ============================================================================
   site/figures.css — КУДА ставится фигура (site/figures.js).

   Устройство, а не глазомер. Фигура никогда не может задеть текст, потому
   что она вынута из потока: `.fig` — абсолютная коробка с нулевым влиянием
   на раскладку и без ловли указателя. Сдвинуть, обжать или перекрыть
   соседей она физически не способна. Единственное, за чем надо следить, —
   чтобы коробку поставили в ЗАВЕДОМО пустую часть раздела; для этого ниже
   заготовлены места, а не свободные координаты.

   Холст ПРОЗРАЧНЫЙ (figures.js отдаёт альфу), поэтому фигура ложится на
   что угодно — на секцию, на стеклянную плиту, на светлую бумагу. Маска
   ниже осталась только страховкой: она подрезает фигуру, если коробка
   оказалась теснее, чем фигура, — чтобы край не рубился прямой линией.
   Прямоугольника от самого холста больше нет и лечить его не нужно.
   ========================================================================== */

.has-figure{ position:relative; isolation:isolate }
/* Содержимое раздела — НАД фигурой. Без этого текст оказывается под ней:
   коробка вставлена первым ребёнком.

   Из правила ИСКЛЮЧЁН холст поля. Когда в одном разделе живут и поле, и
   фигура (липкая сцена «Показа» — как раз такой), это правило подхватывало
   `.field-canvas` и поднимало его на z-index:1 вместе с position:relative.
   Поле переставало быть фоном, вставало над содержимым и закрывало главу
   целиком: на экране оставался один рельеф. Два слоя обязаны знать друг о
   друге, иначе каждый считает себя единственным. */
.has-figure > *:not(.fig):not(.field-canvas){ position:relative; z-index:1 }

.fig{
  position:absolute; z-index:0; pointer-events:none; overflow:hidden;
  /* Ничего не наследуем от раздела: коробка — окно, а не элемент вёрстки. */
  margin:0; padding:0; border:0;
}

.fig canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transition:opacity 1s cubic-bezier(.22,1,.36,1);

  /* Механика масок описана один раз здесь; места ниже меняют только
     --fmask-v и --fmask-h. Копировать четыре префикса в каждое правило —
     верный способ развалить их при первой же правке.
     mask-composite:intersect — стандарт, -webkit-mask-composite:source-in —
     то же самое старым словарём WebKit: без него Safari складывает маски. */
  --fmask-v:linear-gradient(to bottom,
    transparent 0, #000 7%, #000 93%, transparent 100%);
  --fmask-h:linear-gradient(to right,
    transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image:var(--fmask-v), var(--fmask-h);
          mask-image:var(--fmask-v), var(--fmask-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;
}
.fig.is-on canvas{ opacity:1 }

/* ─────────────── заготовленные места ───────────────
   Проценты, а не пиксели: раздел растёт вместе с окном, и коробка обязана
   расти с ним, иначе на широком мониторе фигура уезжает в угол. */

/* Правая половина раздела. Для шапок, где текст стоит слева и упирается в
   свою колонку: «Восемь модулей», хвосты с ограниченной шириной строки. */
.fig-half-r{ inset:0 0 0 auto; width:42% }

/* Правый верхний угол — квадратом. Для разделов, где под текстом сразу
   идут карточки и низ занят. */
.fig-corner-r{ inset:0 0 auto auto; width:32%; height:78% }

/* Полоса по низу во всю ширину. Для разделов, где текст и карточки стоят
   сверху, а внизу остаётся воздух. */
.fig-band{ inset:auto 0 0 0; height:46% }

/* Вставка справа ВНУТРИ стеклянной плиты хвоста: строка там обрезана по
   56ch, поэтому правая треть плиты пуста при любой ширине окна. */
.fig-inset-r{ inset:6% 3% 6% auto; width:34% }

/* Левый край. Нужен ради разнобоя: девять фигур подряд у правого края
   читаются шаблоном, а не находкой. */
.fig-half-l{ inset:0 auto 0 0; width:40% }

/* ─────────────── полосы во всю ширину ───────────────
   Для длинного росчерка («Лента»). Ставятся ПРЯМО В СЕКЦИЮ, а не в .wrap:
   росчерк должен уходить за края окна, а .wrap обрезан по 1400 и с полями.

   Высота полосы повторяет собственный отступ секции — `clamp(72px,9vw,150px)`,
   тот же, что у `.sect{ padding-block }`. Это не совпадение и не подбор на
   глаз: отступ секции пуст по определению, поэтому росчерк в нём физически
   не может встретиться с текстом ни при какой ширине окна. */
.fig-wide-t{ inset:0 0 auto 0; height:clamp(72px,9vw,150px) }
.fig-wide-b{ inset:auto 0 0 0; height:clamp(72px,9vw,150px) }

/* Росчерк УХОДИТ ЗА КРАЙ, а не гаснет у него. Горизонтальной маски здесь
   нет намеренно: лента должна обрываться кромкой окна так, будто снаружи
   она продолжается. Затухание по бокам читалось обратным — «лента
   кончилась, приехали», и раздел от этого замыкался вместо того, чтобы
   открываться. Гасим только по вертикали: там кромка холста и правда есть. */
.fig-wide-t canvas,
.fig-wide-b canvas,
.fig-wide canvas{
  --fmask-h:linear-gradient(to right, #000 0, #000 100%);
}

/* Росчерк во всю секцию — только для ТЁМНЫХ разделов, где текст занимает
   левую треть, а лента тонкая и проходит мимо него. На светлой бумаге так
   нельзя: дымчатое стекло под чёрным заголовком съедает его читаемость. */
.fig-wide{ inset:0 }

/* ─────────────── бережно ───────────────
   Фигур нет на узких экранах. Это не экономия, а честность: в одну колонку
   пустот не остаётся вовсе, и любая коробка легла бы на текст. Плюс марш
   по лучу — самое дорогое, что может быть на странице, а телефон слабее
   всех. Выключает их figure-mount.js, здесь — на случай, если разметка
   приехала без него. */
@media (max-width:900px){
  .fig{ display:none }
}
@media (prefers-reduced-motion: reduce){
  .fig canvas{ transition:none }
}