Newton Cradle

<!-- Newton Cradle Loader -->
<div class="nuda-newton-cradle" role="status" aria-label="Loading">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

/* Newton Cradle Loader
   Pendulum ball physics animation (Newton's cradle).
   Customize: --cradle-color, --cradle-ball-size, --cradle-string-color */

.nuda-newton-cradle {
  --cradle-color: #818cf8;
  --cradle-ball-size: 10px;
  --cradle-string-color: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: flex-start;
  gap: 0;
  height: 48px;
  padding: 8px 16px;
}

.nuda-newton-cradle span {
  display: block;
  width: calc(var(--cradle-ball-size) + 2px);
  height: 40px;
  border-top: 2px solid var(--cradle-string-color);
  position: relative;
  transform-origin: top center;
}

.nuda-newton-cradle span::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: var(--cradle-ball-size);
  height: var(--cradle-ball-size);
  background: var(--cradle-color);
  border-radius: 50%;
  transform: translateX(-50%);
}

.nuda-newton-cradle span:first-child {
  animation: nuda-newton-right 1.2s ease-in-out infinite;
  will-change: transform;
}

.nuda-newton-cradle span:last-child {
  animation: nuda-newton-left 1.2s ease-in-out infinite;
  will-change: transform;
}

@keyframes nuda-newton-left {
  0%, 50% { transform: rotate(0deg); }
  25%     { transform: rotate(-30deg); }
}

@keyframes nuda-newton-right {
  0%, 50% { transform: rotate(0deg); }
  75%     { transform: rotate(30deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-newton-cradle span:first-child,
  .nuda-newton-cradle span:last-child {
    animation: none;
  }
}