/* ThreeUI-inspired fields: decoration only, with the original content intact. */
.has-particle-field {
  position: relative;
  isolation: isolate;
}

.company-particle-field {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  contain: strict;
}

.company-particle-field--focus,
.company-particle-field--orbit {
  /* Only perimeter light reaches screenshots; data and captions remain clear. */
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 52%, #000 78%);
  mask-image: radial-gradient(ellipse at center, transparent 52%, #000 78%);
}

.company-particle-field--growth {
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 15%, #000 73%);
  mask-image: radial-gradient(ellipse at center, transparent 15%, #000 73%);
}

.has-particle-field[data-particle-field="relations"]:not([data-particle-fallback]) .relationship-orbit {
  opacity: .25;
}

.has-particle-field[data-particle-field="relations"] .relationship-center,
.has-particle-field[data-particle-field="relations"] .relationship-chip {
  z-index: 3;
}

.company-particle-field--relations {
  z-index: 1;
}

.company-particle-field--workflow {
  opacity: .84;
}

.has-particle-field[data-particle-field="method"],
.has-particle-field[data-particle-field="horizon"] {
  overflow: clip;
}

.has-particle-field[data-particle-field="method"] > :not(canvas),
.has-particle-field[data-particle-field="horizon"] > :not(canvas),
.has-particle-field[data-particle-field="converge"] > :not(canvas) {
  position: relative;
  z-index: 1;
}

.company-particle-field--method,
.company-particle-field--horizon,
.company-particle-field--converge {
  z-index: 0;
}

.company-particle-field--horizon {
  -webkit-mask-image: linear-gradient(90deg, transparent 43%, #000 74%);
  mask-image: linear-gradient(90deg, transparent 43%, #000 74%);
}

.company-particle-field--converge {
  opacity: .95;
  -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 78%);
  mask-image: linear-gradient(180deg, transparent 40%, #000 78%);
}

.company-particle-field[hidden],
[data-particle-fallback] > .company-particle-field {
  display: none;
}

@media (max-width: 700px) {
  .company-particle-field--horizon {
    opacity: .58;
    -webkit-mask-image: linear-gradient(90deg, transparent 61%, #000 94%);
    mask-image: linear-gradient(90deg, transparent 61%, #000 94%);
  }

  .company-particle-field--method {
    opacity: .55;
  }

  .company-particle-field--converge {
    -webkit-mask-image: linear-gradient(180deg, transparent 65%, #000 95%);
    mask-image: linear-gradient(180deg, transparent 65%, #000 95%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .company-particle-field {
    display: none;
  }
}