/* Stepped scroll list — scoped so it does not affect global layout */
.scroll-showcase {
  --clr-background: #333;
  --clr-text: #fff;
  --clr-slide-1: #ff5757;
  --clr-slide-2: #66ff66;
  --clr-slide-3: #9797fe;
  --clr-slide-4: #ff61a8;
  --clr-slide-5: #66ffff;
  --clr-slide-6: #ffff66;
  --clr-slide-7: #ff9244;
  --item-height: 60px;
  --total-items: 7;
  --animation-duration: 14s;
  --scroll-height: 300px;
  background: var(--clr-background);
  color: var(--clr-text);
  font-family: var(--font-body);
}

.scroll-showcase__row {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: calc(var(--scroll-height) + var(--item-height) - 10px);
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: calc(var(--scroll-height) / 2) 20px;
  gap: 20px;
  box-sizing: border-box;
}

.scroll-showcase__title {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 600;
  text-align: center;
  color: var(--clr-text);
  white-space: nowrap;
  margin: 0;
}

.scroll-showcase__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateY(calc(var(--item-height) * -2));
  animation: scroll-showcase-step var(--animation-duration) infinite forwards linear;
}

.scroll-showcase__list li {
  font-size: clamp(1.25rem, 4vw, 2.5rem);
  font-weight: 600;
  line-height: 50px;
  white-space: nowrap;
  color: var(--clr);
}

@keyframes scroll-showcase-step {
  0%,
  11.90% {
    transform: translateY(calc(var(--item-height) * -2));
  }
  14.28%,
  26.19% {
    transform: translateY(calc(var(--item-height) * -3));
  }
  28.57%,
  40.47% {
    transform: translateY(calc(var(--item-height) * -4));
  }
  42.85%,
  54.76% {
    transform: translateY(calc(var(--item-height) * -5));
  }
  57.14%,
  69.04% {
    transform: translateY(calc(var(--item-height) * -6));
  }
  71.42%,
  83.33% {
    transform: translateY(calc(var(--item-height) * -7));
  }
  85.71%,
  97.62% {
    transform: translateY(calc(var(--item-height) * -8));
  }
  100% {
    transform: translateY(calc(var(--item-height) * -9));
  }
}

.scroll-showcase__window {
  position: relative;
}

.scroll-showcase__fade {
  position: absolute;
  inset-inline: 0;
  height: calc(var(--scroll-height) / 2);
  background: linear-gradient(to bottom, var(--clr-background), #3333337d);
  z-index: 1;
  backdrop-filter: saturate(0);
  pointer-events: none;
}

.scroll-showcase__fade--top {
  top: calc(var(--scroll-height) / 2 * -1);
}

.scroll-showcase__fade--bottom {
  top: 50px;
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-showcase__list {
    animation: none;
    transform: translateY(calc(var(--item-height) * -2));
  }
}

@media (max-width: 720px) {
  .scroll-showcase__row {
    flex-direction: column;
    height: auto;
    min-height: calc(var(--scroll-height) + var(--item-height));
    padding: 2rem 16px;
  }

  .scroll-showcase__title {
    white-space: normal;
  }
}