.wp-block-wwrof-supporter-field {
  --wwrof-supporter-field-duration: 120s;
  --wwrof-supporter-field-fade: 56px;
  --wwrof-supporter-field-gap: clamp(28px, 2.4vw, 42px);
  --wwrof-supporter-field-label-color: color-mix(in srgb, var(--wwrof-text) 88%, var(--wwrof-muted) 12%);
  --wwrof-supporter-field-since-color: color-mix(in srgb, var(--wwrof-muted) 92%, transparent);
  margin: 0;
  width: 100%;
}

.wp-block-wwrof-supporter-field .wwrof-supporter-field__viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.wp-block-wwrof-supporter-field.wwrof-supporter-field--with-edge-fade .wwrof-supporter-field__viewport {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--wwrof-supporter-field-fade),
    #000 calc(100% - var(--wwrof-supporter-field-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--wwrof-supporter-field-fade),
    #000 calc(100% - var(--wwrof-supporter-field-fade)),
    transparent 100%
  );
}

.wp-block-wwrof-supporter-field .wwrof-supporter-field__track {
  display: flex;
  width: max-content;
  will-change: transform;
  /* Tune movement by changing --wwrof-supporter-field-duration (seconds). */
  animation: wwrof-supporter-field-scroll var(--wwrof-supporter-field-duration) linear infinite;
}

.wp-block-wwrof-supporter-field .wwrof-supporter-field__run {
  display: flex;
  align-items: baseline;
  gap: var(--wwrof-supporter-field-gap);
  padding-inline-end: var(--wwrof-supporter-field-gap);
}

.wp-block-wwrof-supporter-field .wwrof-supporter-field__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  margin: 0;
  white-space: nowrap;
  font-size: 0.9rem;
  line-height: 1.45;
  letter-spacing: 0.002em;
  color: var(--wwrof-supporter-field-label-color);
}

.wp-block-wwrof-supporter-field .wwrof-supporter-field__label {
  font-weight: 500;
  color: var(--wwrof-supporter-field-label-color);
}

.wp-block-wwrof-supporter-field .wwrof-supporter-field__since {
  font-size: 0.82em;
  font-weight: 400;
  color: var(--wwrof-supporter-field-since-color);
}

.wp-block-wwrof-supporter-field .wwrof-supporter-field__since::before {
  content: "|";
  /* Match roughly the parent item size (since text is scaled down to 0.82em). */
  font-size: 1.22em;
  font-weight: 500;
  line-height: 1;
  margin-inline-end: 0.3rem;
  color: color-mix(in srgb, var(--wwrof-muted) 82%, transparent);
}

@media (hover: hover) {
  .wp-block-wwrof-supporter-field.wwrof-supporter-field--pause-on-hover:hover .wwrof-supporter-field__track {
    animation-play-state: paused;
  }
}

@media (max-width: 922px) {
  .wp-block-wwrof-supporter-field {
    --wwrof-supporter-field-gap: 26px;
    --wwrof-supporter-field-fade: min(var(--wwrof-supporter-field-fade), 44px);
  }

  .wp-block-wwrof-supporter-field .wwrof-supporter-field__item {
    font-size: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-wwrof-supporter-field .wwrof-supporter-field__track {
    animation: none !important;
    transform: none !important;
  }

  .wp-block-wwrof-supporter-field .wwrof-supporter-field__run[aria-hidden="true"] {
    display: none;
  }

  .wp-block-wwrof-supporter-field.wwrof-supporter-field--reduced-static .wwrof-supporter-field__viewport {
    overflow: visible;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .wp-block-wwrof-supporter-field.wwrof-supporter-field--reduced-static .wwrof-supporter-field__run {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-inline-end: 0;
  }

  .wp-block-wwrof-supporter-field.wwrof-supporter-field--reduced-minimal .wwrof-supporter-field__viewport {
    overflow: hidden;
  }
}

@keyframes wwrof-supporter-field-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}