/* ============================================================
   94 — лучи между перками и перехватом.

   Геометрию считает js/connectors.js по числам из Figma
   (`UI / IMG / Lines`, node 2:48645). Здесь только вид и слой.
   ============================================================ */

.cnx {
  position: absolute;
  left: 0;
  display: block;
  /* Слой лежит ЗА блоками: в макете вершина лучей спрятана внутри бенто,
     а сами лучи проходят под карточкой перехвата. `-1` внутри стекового
     контекста #page уводит их за его содержимое, но оставляет над
     шейдером, который живёт снаружи. */
  z-index: -1;
  overflow: hidden;          /* луч уходит за кромку слоя, а не кончается на ней */
  pointer-events: none;
}

/* Прозрачность из макета стоит на группе, а не на обводке: у линейки
   внизу она своя, полная. */
.cnx-rays {
  opacity: 0.24;
}

.cnx-rays line {
  stroke: #EAEAEA;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

.cnx-rule {
  stroke: #EAEAEA;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
}

/* Слой работает на всех ширинах: геометрия задана долями ширины
   контента, а верхний якорь на мобильной раскладке подменяется
   колонкой карточек. Прятать нечего. */