.logos-background {
  position: absolute;
  inset: 0;
  z-index: var(--logos-z-background);
  overflow: hidden;
  pointer-events: none;
}

.logos-background__base,
.logos-background__gradient,
.logos-background__grid,
.logos-background__mesh,
.logos-background__noise,
.logos-background__vignette {
  position: absolute;
  inset: 0;
}

.logos-background__base {
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fdfa 48%,
      #eef9f4 100%
    );
}

.logos-background__gradient {
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(75, 239, 180, 0.15),
      transparent 31%
    ),
    radial-gradient(
      circle at 79% 24%,
      rgba(98, 223, 240, 0.09),
      transparent 25%
    ),
    radial-gradient(
      circle at 17% 70%,
      rgba(0, 201, 133, 0.08),
      transparent 29%
    );
}

.logos-background__grid {
  opacity: 0.28;
  background-image:
    linear-gradient(
      rgba(0, 95, 67, 0.085) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0, 95, 67, 0.085) 1px,
      transparent 1px
    );
  background-size:
    clamp(3.4rem, 5vw, 5.6rem)
    clamp(3.4rem, 5vw, 5.6rem);
  mask-image:
    radial-gradient(
      ellipse at center,
      black 0%,
      rgba(0, 0, 0, 0.6) 45%,
      transparent 82%
    );
}

.logos-background__mesh {
  opacity: 0.25;
}

.logos-background__mesh-line {
  position: absolute;
  display: block;
  height: 1px;
  width: 65vw;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0, 201, 133, 0.34),
      transparent
    );
  transform-origin: center;
}

.logos-background__mesh-line--one {
  top: 28%;
  left: -12%;
  transform: rotate(15deg);
}

.logos-background__mesh-line--two {
  top: 61%;
  right: -13%;
  transform: rotate(-13deg);
}

.logos-background__mesh-line--three {
  top: 47%;
  left: 20%;
  width: 54vw;
  opacity: 0.5;
  transform: rotate(-4deg);
}

.logos-background__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(6rem);
}

.logos-background__glow--core {
  left: 50%;
  top: 43%;
  width: min(54vw, 53rem);
  height: min(45vw, 42rem);
  background: rgba(0, 201, 133, 0.11);
  transform: translate(-50%, -50%);
}

.logos-background__glow--right {
  right: -16rem;
  top: -11rem;
  width: 35rem;
  height: 35rem;
  background: rgba(98, 223, 240, 0.09);
}

.logos-background__glow--left {
  left: -16rem;
  bottom: -13rem;
  width: 38rem;
  height: 38rem;
  background: rgba(0, 201, 133, 0.09);
}

.logos-background__orbit {
  position: absolute;
  left: 50%;
  top: 44%;
  border:
    1px solid rgba(0, 201, 133, 0.08);
  border-radius: 50%;
  transform:
    translate(-50%, -50%);
}

.logos-background__orbit::before,
.logos-background__orbit::after {
  content: "";
  position: absolute;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: rgba(0, 201, 133, 0.55);
  box-shadow:
    0 0 1rem rgba(0, 201, 133, 0.35);
}

.logos-background__orbit::before {
  top: 18%;
  left: 13%;
}

.logos-background__orbit::after {
  right: 10%;
  bottom: 22%;
}

.logos-background__orbit--outer {
  width: min(75vw, 72rem);
  aspect-ratio: 1.8;
}

.logos-background__orbit--middle {
  width: min(57vw, 55rem);
  aspect-ratio: 1.75;
}

.logos-background__orbit--inner {
  width: min(38vw, 36rem);
  aspect-ratio: 1.7;
}

.logos-background__noise {
  opacity: 0.095;
  mix-blend-mode: multiply;
}

.logos-background__noise img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logos-background__vignette {
  box-shadow:
    inset 0 0 13rem rgba(0, 65, 45, 0.05);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.62),
      transparent 18%,
      transparent 78%,
      rgba(237, 248, 243, 0.5)
    );
}