/* Поднимаем контент и задаём переменные ТУТ */
#allrecords {
  position: relative;
  z-index: 2;

  /* переменные, которые будет менять JS */
  --x: 50vw;
  --y: 50vh;

  /* настройки эффекта */
  --radius: 220px;
  --feather: 160px;
}

/* Чертёжный слой между фоном и контентом */
#allrecords::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;

background-image: var(--bp-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* ВАЖНО: здесь НЕТ --x/--y, мы только используем их */
  -webkit-mask-image: radial-gradient(
    circle at var(--x) var(--y),
    rgba(0,0,0,1) 0px,
    rgba(0,0,0,1) calc(var(--radius) - var(--feather)),
    rgba(0,0,0,0) var(--radius)
  );
  mask-image: radial-gradient(
    circle at var(--x) var(--y),
    rgba(0,0,0,1) 0px,
    rgba(0,0,0,1) calc(var(--radius) - var(--feather)),
    rgba(0,0,0,0) var(--radius)
  );

  opacity: 0.60;
  mix-blend-mode: multiply; /* если “грязнит” — удали строку */
}

/* Чтобы фон блоков не перекрывал чертёж */
.t-rec,
.t-records,
.t-cover,
.t396,
.t-container,
.t-col,
.t-cell,
.t-bgimg,
.t-bg,
.t-site,
.t-body {
  background-color: transparent !important;
}

/* На телефонах выключаем */
@media (hover: none) and (pointer: coarse) {
  #allrecords::before { display: none; }
}