/* PartnerEcosystemAnimation.
   The JS interval rotation is replaced by a CSS keyframe cycle:
   each logo animates pea-cycle over 25s (10 logos x 2.5s), staggered
   by animation-delay, visible for its 10% slice of the loop. */

.c-partner-ecosystem-animation {
  margin-inline: auto;
  display: flex;
  width: 100%;
  max-width: 360px;
  flex-direction: column;
  align-items: stretch;
  opacity: 0;
  transform: translateY(8px);
  animation: pea-mount 600ms ease-out 80ms forwards;
}

@keyframes pea-mount {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.c-partner-ecosystem-animation__card {
  display: flex;
  height: 140px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--color-black) 8%, transparent);
  background: var(--color-white);
  padding: 24px;
  box-shadow: none;
}

.c-partner-ecosystem-animation__incode-logo {
  height: auto;
  max-height: 44px;
  width: auto;
  max-width: 55%;
  object-fit: contain;
}

.c-partner-ecosystem-animation__connector {
  display: flex;
  height: 40px;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.c-partner-ecosystem-animation__connector span {
  display: block;
  height: 100%;
  width: 1px;
  background: color-mix(in srgb, var(--color-black) 15%, transparent);
}

.c-partner-ecosystem-animation__stage {
  position: relative;
  display: flex;
  height: 56px;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.c-partner-ecosystem-animation__logo {
  position: absolute;
  inset: 0;
  margin: auto;
  height: auto;
  width: auto;
  max-width: 80%;
  object-fit: contain;
  opacity: 0;
  animation: pea-cycle var(--pea-cycle, 25s) cubic-bezier(0.32, 0.72, 0, 1) infinite;
}

/* 25s cycle: 1.4% = the source's 350ms enter/exit; visible for 10% (2.5s). */
@keyframes pea-cycle {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  1.4% {
    opacity: 1;
    transform: translateY(0);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  11.4%,
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-partner-ecosystem-animation {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .c-partner-ecosystem-animation__logo {
    animation: none;
    opacity: 0;
  }
  .c-partner-ecosystem-animation__logo:first-child {
    opacity: 1;
  }
}