Comet Trail

<!-- Comet Trail Loader -->
<div class="nuda-comet-trail-loader" role="status" aria-label="Loading">
  <div class="nuda-comet-trail-loader__orbit"></div>
</div>

/* Comet Trail Loader
   An orbiting comet head with a fading conic-gradient tail.
   Customize: --comet-color, --comet-size */

.nuda-comet-trail-loader {
  --comet-color: #e4ff54;
  --comet-size: 44px;
  position: relative;
  width: var(--comet-size);
  height: var(--comet-size);
}

.nuda-comet-trail-loader__orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(228, 255, 84, 0.05) 200deg,
    rgba(228, 255, 84, 0.5) 320deg,
    var(--comet-color) 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  animation: nuda-comet-trail 1.4s linear infinite;
  will-change: transform;
}

.nuda-comet-trail-loader__orbit::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  background: var(--comet-color);
  border-radius: 50%;
  box-shadow: 0 0 8px 2px rgba(228, 255, 84, 0.6);
}

@keyframes nuda-comet-trail {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-comet-trail-loader__orbit { animation: none; opacity: 0.6; }
}