/* ============================================================
   ПЕРЕПЛЁТ — то, что видно МЕЖДУ залами.

   Зачем он появился (2026-08-29). Залы притушены на стыках: пока
   комната занимает меньше половины экрана, её прозрачность нулевая.
   Между двумя залами из-за этого получался голый чёрный экран на
   пол-оборота колеса, и переход читался как «свет выключили и снова
   включили» — резко и темно. Владелец так и сказал: «переходы очень
   резкие… чтобы было не так темно».

   Лечение — не гасить залы слабее (тогда они наезжают друг на друга),
   а положить ПОД них постоянный слой, который виден ровно в проёмах.
   Это несущий переплёт музея: латунные нити, сходящиеся в перспективе,
   с узелками на пересечениях. Между залами посетитель видит не пустоту,
   а конструкцию здания — коридор, по которому он идёт дальше.

   Чем нарисовано и почему именно так:
     · только градиенты, ни одного filter и blur — они пересчитываются
       каждый кадр и роняют прокрутку (см. `no-filter-in-frame-loop`);
     · слой прибит к окну (position: fixed) и не участвует в раскладке
       страницы: браузер рисует его один раз и дальше только двигает;
     · движение — одна переменная --weave-y, её пишет motion.js тем же
       способом, что швы пола: параллаксом, медленнее самих залов.

   Правит этот файл только оформление переплёта. Цвета зала, стены и
   пола живут в museum.css, переменные — в base.css.
   ============================================================ */

.weave {
  position: fixed;
  inset: -12vh 0 -12vh 0;      /* запас сверху и снизу: слой едет параллаксом */
  z-index: 0;
  pointer-events: none;
  overflow: hidden;

  /* Основа. Раньше между залами был --ink (#07060a) — почти абсолютная
     чернота. Здесь тёплый графит со светом сверху: тот же музей, только
     дежурное освещение. Читается как «между залами», а не «конец сайта». */
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 214, 168, .13), transparent 64%),
    radial-gradient(90% 62% at 50% 112%, rgba(198, 150, 96, .10), transparent 68%),
    linear-gradient(180deg, #1d1914 0%, #171310 46%, #120f0e 100%);
}

/* Нити переплёта. Три семейства линий под 60° друг к другу дают
   треугольную сеть — так вяжут настоящие фермы перекрытий, и так же
   устроена паутина. Каждая нить в один пиксель: сеть должна угадываться,
   а не лезть в глаза. */
.weave__net {
  position: absolute;
  left: -30%; right: -30%; top: -20%; bottom: -20%;
  background-image:
    repeating-linear-gradient( 60deg, rgba(201, 165, 107, .17) 0 1px, transparent 1px 132px),
    repeating-linear-gradient(-60deg, rgba(201, 165, 107, .15) 0 1px, transparent 1px 132px),
    repeating-linear-gradient(  0deg, rgba(201, 165, 107, .09) 0 1px, transparent 1px 132px);
  /* Перспектива: сеть уходит вглубь, а не лежит плоскими обоями.
     Наклон небольшой — при большом нити на дальнем краю сливаются
     в сплошную заливку. */
  transform: translate3d(0, var(--weave-y, 0px), 0) perspective(900px) rotateX(18deg);
  transform-origin: 50% 30%;
  /* Края гасим, иначе видно, где слой кончается. */
  -webkit-mask-image: radial-gradient(120% 86% at 50% 42%, #000 34%, transparent 92%);
          mask-image: radial-gradient(120% 86% at 50% 42%, #000 34%, transparent 92%);
}

/* Узелки на пересечениях нитей. Шаг вдвое реже самой сети: если ставить
   узел в каждое пересечение, получается точечный ковёр вместо каркаса. */
.weave__knots {
  position: absolute;
  inset: -20%;
  background-image: radial-gradient(circle at 50% 50%, rgba(255, 214, 168, .34) 0 1.3px, transparent 1.8px);
  background-size: 264px 152px;
  transform: translate3d(0, calc(var(--weave-y, 0px) * 1.25), 0);
  -webkit-mask-image: radial-gradient(100% 74% at 50% 44%, #000 20%, transparent 86%);
          mask-image: radial-gradient(100% 74% at 50% 44%, #000 20%, transparent 86%);
}

/* Дежурная лампа проёма: пятно тёплого света посреди перехода, чтобы
   в самой глухой точке между залами было куда смотреть. Не мигает и не
   анимируется — движется только вместе со слоем. */
.weave__lamp {
  position: absolute;
  left: 50%; top: 42%;
  width: min(760px, 72vw);
  height: min(520px, 52vh);
  translate: -50% -50%;
  background: radial-gradient(closest-side at 50% 50%, rgba(255, 206, 152, .22), transparent 78%);
  transform: translate3d(0, calc(var(--weave-y, 0px) * .6), 0);
}

/* Пыль в луче — те же градиентные точки, что и узелки, но реже, мельче
   и холоднее. Даёт объём проёму: свет становится видимым. */
.weave__motes {
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 235, 210, .18) 0 1px, transparent 1.4px),
    radial-gradient(circle at 50% 50%, rgba(206, 200, 214, .08) 0 1px, transparent 1.4px);
  background-size: 197px 143px, 311px 229px;
  background-position: 0 0, 84px 61px;
  transform: translate3d(0, calc(var(--weave-y, 0px) * 1.6), 0);
}

/* Ниже 900 px переплёт упрощается: на телефоне залы идут лентой, длинных
   проёмов между ними нет, а лишние слои там дороже всего. */
@media (max-width: 900px) {
  .weave__net { background-image:
    repeating-linear-gradient( 60deg, rgba(201, 165, 107, .07) 0 1px, transparent 1px 148px),
    repeating-linear-gradient(-60deg, rgba(201, 165, 107, .06) 0 1px, transparent 1px 148px); }
  .weave__knots, .weave__motes { display: none; }
}

/* Человеку, который отключил анимации, переплёт остаётся — он не мигает
   и не движется сам по себе; motion.js просто не будет писать --weave-y. */

/* Переплёт лежит под содержимым музея. Своего z-index у main не было —
   без этой строки залы и переплёт оказались бы в одной плоскости, и кто
   кого перекроет, решал бы порядок в разметке. Строка живёт здесь, а не
   в base.css, потому что она часть механики слоя.

   ⚠️ Правка 2026-09-05. Раньше в этом правиле рядом с main стояли .topbar,
   .plan, .door и #callme — и `position: relative` перебивал их собственный
   `position: fixed` из museum.css. Верхняя панель, полоса плана этажа и
   кнопка связи переставали быть прибитыми к экрану и уезжали вместе со
   страницей. Им эта строка и не нужна: у них свои z-index (40 и 30),
   и они всяко выше переплёта. Правило оставлено ровно для main. */
main { position: relative; z-index: 1; }