.skills-ticker {
  border-block: 1px solid #ffffff14;
  background: #0b1110cc;
  font-family: Arial, Helvetica, sans-serif;
}

.skills-ticker__viewport {
  overflow: hidden;
  padding-block: 24px;
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.skills-ticker__track {
  display: flex;
  width: max-content;
}

.skills-ticker__track.is-ready {
  animation: skills-drift 85s linear infinite;
}

.skills-ticker__list {
  display: flex;
  min-width: 100vw;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  list-style: none;
}

.skills-ticker__list li {
  display: flex;
  align-items: center;
  color: #a2aaa7;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.skills-ticker__list li::after {
  margin-inline: clamp(24px, 3vw, 48px);
  color: #13c6a0;
  font-weight: 400;
  content: "/";
}

@keyframes skills-drift {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .skills-ticker__viewport {
    padding: 24px;
    mask-image: none;
  }

  .skills-ticker__track,
  .skills-ticker__track.is-ready {
    width: 100%;
    animation: none;
  }

  .skills-ticker__list {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 0;
  }

  .skills-ticker__list[aria-hidden="true"] {
    display: none;
  }
}