.services-console__field[data-magnetic-ready="true"] {
  cursor: crosshair;
}

.services-console__orbit,
.services-console__disc,
.services-console__word {
  --services-magnetic-x: 0px;
  --services-magnetic-y: 0px;
  --services-magnetic-rotation: 0deg;
}

.services-console__orbit,
.services-console__disc {
  transform:
    translate(
      calc(-50% + var(--services-magnetic-x)),
      calc(-50% + var(--services-magnetic-y))
    )
    rotate(var(--services-magnetic-rotation));
}

.services-console__axis {
  --services-magnetic-x: 0px;
  --services-magnetic-y: 0px;
  transform: translate3d(
    var(--services-magnetic-x),
    var(--services-magnetic-y),
    0
  );
}

.services-console__word {
  transform:
    translate3d(
      var(--services-magnetic-x),
      var(--services-magnetic-y),
      0
    )
    rotate(var(--services-magnetic-rotation));
}

.services-console__field[data-magnetic-active="true"]
  :is(
    .services-console__orbit,
    .services-console__disc,
    .services-console__axis,
    .services-console__word
  ) {
  will-change: transform;
}

@media (hover: none), (pointer: coarse) {
  .services-console__field {
    cursor: default;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-console__field {
    cursor: default;
  }

  .services-console__orbit,
  .services-console__disc,
  .services-console__axis,
  .services-console__word {
    transform: none;
    will-change: auto;
  }

  .services-console__orbit,
  .services-console__disc {
    transform: translate(-50%, -50%);
  }
}