.hero-visual .orbit-node {
  --orbit-radius: 190px;
  --orbit-start: 0deg;
  position: absolute;
  left: 50%;
  top: 45%;
  width: 0;
  height: 0;
  z-index: 2;
  animation: orbit-spin 28s linear infinite;
  will-change: transform;
}

.hero-visual .orbit-node .float-card {
  position: absolute;
  inset: auto;
  width: max-content;
  min-width: 150px;
  background: rgba(15, 40, 65, .94);
  border: 1px solid rgba(255, 255, 255, .15);
  transform: translateX(var(--orbit-radius)) translate(-50%, -50%) rotate(calc(0deg - var(--orbit-start)));
  animation: orbit-counter-spin 28s linear infinite;
  will-change: transform;
}

.hero-visual .card-one { --orbit-start: -145deg; }
.hero-visual .card-two { --orbit-start: -5deg; }
.hero-visual .card-three { --orbit-start: 105deg; }

.hero-visual:hover .orbit-node,
.hero-visual:hover .orbit-node .float-card {
  animation-play-state: paused;
}

@keyframes orbit-spin {
  from { transform: rotate(var(--orbit-start)); }
  to { transform: rotate(calc(var(--orbit-start) + 360deg)); }
}

@keyframes orbit-counter-spin {
  from { transform: translateX(var(--orbit-radius)) translate(-50%, -50%) rotate(calc(0deg - var(--orbit-start))); }
  to { transform: translateX(var(--orbit-radius)) translate(-50%, -50%) rotate(calc(-360deg - var(--orbit-start))); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual .orbit-node,
  .hero-visual .orbit-node .float-card {
    animation: none;
  }
}