/**
 * Flat graph fields for dark homepage sections.
 * Each canvas lives inside its section so runners never cross light surfaces.
 */

body.sc-landing-page > .sc-grid-lights-canvas {
  display: none;
}

body.sc-landing-page .sc-has-flat-runners {
  position: relative;
  isolation: isolate;
}

.sc-flat-runner-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.52;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.sc-flat-runner-field::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 74% 46%, transparent 0 28%, rgba(3, 9, 19, 0.24) 72%);
  content: "";
}

.sc-flat-runner-field__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#sc-hero .sc-flat-runner-field {
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 38%, #000 100%);
}

#sc-stats .sc-flat-runner-field,
#sc-partners .sc-flat-runner-field {
  opacity: 0.34;
}

#sc-quicklinks .sc-flat-runner-field {
  opacity: 0.44;
  mix-blend-mode: screen;
}

@media (max-width: 767px) {
  .sc-flat-runner-field {
    opacity: 0.32;
  }

  #sc-hero .sc-flat-runner-field {
    opacity: 0.14;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-flat-runner-field {
    opacity: 0.22;
  }
}