.badge-cycler {
  position: relative;
  width: 220px;
  height: 28px;
  overflow: hidden;
  display: inline-block;
  cursor: pointer;
}

.badge-cycler a {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(100%);
  transition: all .6s ease-in-out;
  animation: slide 16s infinite;
  pointer-events: none;           /* default = safe */
}

.badge-cycler a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.badge-cycler:hover a {
  animation-play-state: paused;
}

/* Re-enable clicks only during the visible portion of each staggered element */
.badge-cycler a:nth-child(1) { animation-delay:  0s; }
.badge-cycler a:nth-child(2) { animation-delay:  4s; }
.badge-cycler a:nth-child(3) { animation-delay:  8s; }
.badge-cycler a:nth-child(4) { animation-delay: 12s; }

/* The key: use animation + delay to create time windows */
@keyframes slide {
  0%,      25%,     100% { opacity: 0; transform: translateY(100%) }
  6%, 19%              { opacity: 1; transform: translateY(0)     }
  25%                  { opacity: 0; transform: translateY(-100%) }
}

/* Enable pointer events in the visible keyframes window for each child */
.badge-cycler a:nth-child(1) { animation: slide 16s infinite, pointer 16s infinite; }
.badge-cycler a:nth-child(2) { animation: slide 16s infinite, pointer 16s infinite; animation-delay: 4s, 4s; }
.badge-cycler a:nth-child(3) { animation: slide 16s infinite, pointer 16s infinite; animation-delay: 8s, 8s; }
.badge-cycler a:nth-child(4) { animation: slide 16s infinite, pointer 16s infinite; animation-delay: 12s, 12s; }

@keyframes pointer {
  0%, 25%, 100% { pointer-events: none; }
  6%, 19%       { pointer-events: auto;  }
}