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

   Replaces the behaviors the Webflow runtime used to drive:
     1. Portfolio marquee (v2, right-to-left) -> pure CSS infinite scroll
     2. FAQ accordion                          -> CSS height transition, JS toggle
     3. Service-card "Get in touch" arrow      -> slides on hover
     4. Service stacking-card scale            -> handled in webflow-agency.js
     5. Hero + CTA Rive animations             -> handled in webflow-agency.js
   The sticky stacking itself is pure CSS (position: sticky) in the base theme.
   ========================================================================= */

/* ---- 1. Portfolio infinite marquee (v2, right-to-left) ------------------ */
.portfolio-marquee .infinity-marquee-track.v2 {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  animation: webflow-agency-marquee 80s linear infinite;
}

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

/* Three identical lists; translating by exactly one third loops seamlessly.
   Running from -1/3 to 0 scrolls the row to the right (right-to-left feed). */
@keyframes webflow-agency-marquee {
  from { transform: translate3d(calc(-100% / 3), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* ---- 2. FAQ accordion (CSS height transition) --------------------------- */
.accordion-item .accordion__top {
  cursor: pointer;
}

.accordion-item .accordion-content-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.is-open .accordion-content-wrapper {
  grid-template-rows: 1fr;
}

.accordion-item .accordion-content-wrapper > .acordion-body {
  overflow: hidden;
  min-height: 0;
}

.accordion-item .accordion-btn-line {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.accordion-item.is-open .accordion-btn-line.vertical {
  transform: rotate(0deg);
  opacity: 0;
}

/* ---- 3. "Get in touch" service-card link: arrow slides on hover --------- */
.link-wraper.default-link .brix_icon-font.btn-arrow.link-icon {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.link-wraper.default-link:hover .brix_icon-font.btn-arrow.link-icon {
  transform: translateX(5px);
}

/* ---- Accessibility: respect reduced-motion ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .portfolio-marquee .infinity-marquee-track.v2 {
    animation: none;
  }
  .accordion-item .accordion-content-wrapper {
    transition: none;
  }
  .link-wraper.default-link:hover .brix_icon-font.btn-arrow.link-icon {
    transform: none;
  }
}