Comet Trail

<!-- Comet Trail -->
<div class="nuda-comet" role="img" aria-label="Comet trail">
  <span class="nuda-comet__head"></span>
  <span class="nuda-comet__head nuda-comet__head--b"></span>
</div>

/* Comet Trail
   Glowing dot with a streaked tail flying across.
   Customize: --comet-color, container size. */

.nuda-comet {
  --comet-color: #e4ff54;
  position: relative;
  width: 100%;
  max-width: 240px;
  height: 100px;
  overflow: hidden;
  border-radius: 8px;
  background: radial-gradient(ellipse at 30% 80%, rgba(228, 255, 84, 0.06), transparent 60%);
}

.nuda-comet__head {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 8px var(--comet-color),
    0 0 16px rgba(228, 255, 84, 0.6);
  animation: nuda-comet-fly 3s linear infinite;
}

.nuda-comet__head::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 48px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--comet-color), transparent);
  transform: translateY(-50%);
  border-radius: 50% 0 0 50%;
  filter: blur(0.4px);
}

.nuda-comet__head--b {
  animation-delay: 1.5s;
  top: 30%;
}

@keyframes nuda-comet-fly {
  0%   { transform: translate(-60px, 0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(calc(100% + 60px), -20px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-comet__head { animation: none; opacity: 0; }
}