/* =========================================================================
   Figma to Webflow Agency — native special animations (no Webflow IX2)
   Loaded only on /figma-to-webflow-agency.

   The only Webflow-runtime behavior on this page is the pair of portfolio
   marquees. Both tracks share the .infinity-marquee-track.v2 class but carry
   lists flowing in opposite directions, so the scroll direction is keyed off
   the child list's direction class via :has(). Each track holds three
   identical lists, so translating by exactly one third loops seamlessly.
   (No accordion, Rive, stacking cards, or arrow links exist on this page.)
   ========================================================================= */

/* ---- Conversion-services bento: CTA card column span (responsive) -------
   The right column (.figma-to-webflow-grid-rigth) is a single column on desktop
   (cards stacked), becomes two columns on tablet, and single again on mobile.
   The CTA card must therefore span both columns ONLY on tablet — matching the
   original. The global .brix-grid-span-2-cols utility has an always-on base
   rule, which forced the CTA to span 2 at every width and created an implicit
   second column on desktop (cards landing side-by-side), so it is replaced here
   with breakpoint-scoped spans. */
@media screen and (max-width: 991px) {
  #services .figma-to-webflow-grid-rigth .grid-card-cta {
    grid-column: span 2 / span 2;
  }
}

@media screen and (max-width: 767px) {
  #services .figma-to-webflow-grid-rigth .grid-card-cta {
    grid-column: span 1 / span 1;
  }
}

/* ---- "Proven results" -> dark CTA seam ----------------------------------
   The light "Proven results" card (40px radius) sits flush on top of the dark
   CTA (24px radius), so their meeting corners left white notches. Square off
   the seam edges so the grey card flows straight into the black CTA. */
.sec.padding-180px---background-neutral-200 {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.sec__a-accent.dark-cta {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ---- Hero header clearance --------------------------------------------------
   The original export used an in-flow header, so this hero only carried a small
   top padding (--sizes--sz-10 = 40px). The shared native header is position:
   absolute (≈79px tall), so the hero must reserve room for it or the eyebrow
   collides with the nav. Clear the header with a comfortable gap, responsively. */
.sec.figma-to-webflow-hero {
  padding-top: 7.5rem;
}

@media screen and (max-width: 767px) {
  .sec.figma-to-webflow-hero {
    padding-top: 6rem;
  }
}

/* ---- Portfolio marquees (two opposite-flowing v2 tracks) ---------------- */
.infinity-marquee-track.v2 {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  animation: figma-to-webflow-marquee 72s linear infinite;
}

.infinity-marquee-track.v2 .infinity-marquee-list.v2 {
  flex: 0 0 auto;
}

/* Right-to-left feed scrolls the opposite way. */
.infinity-marquee-track.v2:has(.infinity-marquee-list.right-to-left) {
  animation-direction: reverse;
}

@keyframes figma-to-webflow-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-100% / 3), 0, 0); }
}

/* ---- Conversion-services bento: in-card horizontal marquees ------------
   Each .marquee-inside-card-container is a horizontal track holding three
   identical .marquee-row groups, so translating by one third loops seamlessly.
   Scroll direction follows the rows' direction class (left-to-right reverses).
   Matches the original Webflow behavior: the card itself clips (overflow:
   hidden), while the wrapper/container stay at content width with centered
   rows that overflow and bleed all the way to the card's rounded edges — so
   there is no inset "border" on the sides. Each .marquee-row scrolls by exactly
   one row-width (translateX -100%); the three identical, tiled rows make that a
   seamless loop, and -100% is relative to each row so it generalizes across the
   wider SEO badges and the smaller integration circles alike. Never pauses. */
.marquee-inside-card-container {
  flex-wrap: nowrap;
}

.marquee-row {
  flex: 0 0 auto;
  will-change: transform;
  animation: figma-to-webflow-row-marquee 34s linear infinite;
}

/* Left-to-right rows scroll the opposite direction. */
.marquee-row.left-to-right {
  animation-direction: reverse;
}

@keyframes figma-to-webflow-row-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

/* ---- SEO badge labels: lighter weight, neutral-800 ----------------------
   The badge text shipped at 700 weight, which read too heavy. Soften to medium
   and use the darker neutral-800 ink. */
.card-marquee-badge > div {
  font-weight: 500;
  color: var(--new--neutral--color-800);
}

/* ---- "Hundreds of extra components" card: keep the heading above the image
   The kit mockup is an atomic-replaced <img>, which paints above the block-level
   heading that the design pulls up under it (image margin-bottom: -28px). Lift
   the heading's container into a positioned layer so the full two-line title
   ("Hundreds of extra components") stays visible instead of just "components". */
.conversion_services_image-extra_components ~ .inner-container {
  position: relative;
  z-index: 1;
}

/* ---- Conversion-services bento: "Pixel perfect development" cursor ------
   The floating UI cursor overlay (.card---image-right-image-top) was animated
   by the Webflow runtime. Restore a gentle, looping drift so it reads as a
   live cursor hovering the editor mockup. */
.card---image-right-image-top {
  will-change: transform;
  animation: figma-to-webflow-cursor-drift 5.5s ease-in-out infinite;
}

@keyframes figma-to-webflow-cursor-drift {
  0%   { transform: translate3d(0, 0, 0); }
  30%  { transform: translate3d(-7%, -9%, 0); }
  55%  { transform: translate3d(-3%, -4%, 0); }
  80%  { transform: translate3d(-9%, -2%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .infinity-marquee-track.v2,
  .marquee-row,
  .card---image-right-image-top {
    animation: none;
  }
}