.earth-particle-field {
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: -1;
  display: block;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.9;
}

body.light-mode .earth-particle-field {
  opacity: 0.62;
}

.hero[data-earth-interactive="true"] {
  cursor: grab;
  touch-action: pan-y;
}

.hero[data-earth-interactive="true"].is-earth-dragging {
  cursor: grabbing;
}

.hero[data-earth-interactive="true"] a,
.hero[data-earth-interactive="true"] button {
  cursor: pointer;
}

.hero[data-earth-interactive="true"]:focus-visible {
  outline: 1px solid rgba(110, 205, 240, 0.62);
  outline-offset: -2px;
}

@media (max-width: 720px) {
  .earth-particle-field {
    opacity: 0.82;
  }
}