/*
  Exact homepage CTA card carousel module styles.
  Copied from css/homepage-responsive.css (Expertise / Background carousel).
  Linked from portfolio.html only — homepage unchanged.
*/

/*
  Expertise + Background collage:
  Webflow sets .container.overflow { overflow: visible } so cards can bleed.
  Do NOT force overflow-x: hidden on that container — it creates a white clip box.
*/
.container.overflow {
  overflow: visible;
  max-width: 100%;
}

.cta-wrapper {
  overflow: visible;
  max-width: 100%;
}

.cta-cards-wraooer {
  overflow: visible;
  max-width: 100%;
}

.cta-3d-perspective {
  overflow: visible;
  max-width: none;
  width: 100%;
  position: relative;
  z-index: 0;
  /*
    Webflow IX starts .cta-cards-flex at translateX(+25%) → empty left.
    Nudge the 3D rail left so cards occupy lower-left from the start,
    while overflow:visible keeps the right side unclipped.
  */
  transform: translate3d(-20vw, 0, 0) rotateX(40deg) rotateY(0deg) rotateZ(-16deg);
}

/* Webflow uses z-index: -1 which hides cards behind the white container background */
.cta-cards-flex {
  z-index: 0;
  position: relative;
}

/*
  Seamless CTA card marquee.
  Webflow IX a-373 loops translateX(25% → -13%) and hard-resets.
  Neutralize that transform and animate a duplicated track by exactly one set.
*/
.cta-cards-flex.chl-cta-marquee {
  transform: none !important;
  width: 100%;
  max-width: none;
  display: block;
  overflow: visible;
}

.chl-cta-marquee__track {
  --chl-cta-duration: 150s;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: chl-cta-marquee var(--chl-cta-duration) linear infinite;
}

.chl-cta-marquee__set {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  flex: 0 0 auto;
  /* Trailing gap matches Webflow .cta-cards-flex column-gap so -50% lands cleanly */
  column-gap: 2.22vw;
  padding-right: 2.22vw;
}

@media screen and (max-width: 991px) {
  .chl-cta-marquee__set {
    column-gap: 2rem;
    padding-right: 2rem;
  }

  .cta-3d-perspective {
    transform: translate3d(-12vw, 0, 0) rotateX(40deg) rotateY(0deg) rotateZ(-16deg);
  }
}

@media screen and (max-width: 767px) {
  .chl-cta-marquee__set {
    column-gap: 1rem;
    padding-right: 1rem;
  }
}

@media screen and (max-width: 479px) {
  .cta-3d-perspective {
    transform: translate3d(-8vw, 0, 0) rotateX(40deg) rotateY(0deg) rotateZ(-16deg);
  }
}

@keyframes chl-cta-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    /* Exactly one duplicated set (incl. trailing gap) */
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chl-cta-marquee__track {
    animation: none;
  }
}