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

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

/* ---- 0. Hero ↔ Services seam: straight join, no radius -----------------
   The dark Rive hero (.fa_hero-riveapp) sits directly above the blue services
   section; their matching 32px corner radii leave white notches at the join.
   Square off the meeting edges so the dark hero flows straight into the blue. */
.sec.agency-hero .fa_hero-riveapp {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#services.sec.br-accent.blue {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

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

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

/* Two identical lists; translating by exactly one half loops seamlessly. */
@keyframes framer-agency-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 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 {
    animation: none;
  }
  .accordion-item .accordion-content-wrapper {
    transition: none;
  }
  .link-wraper.default-link:hover .brix_icon-font.btn-arrow.link-icon {
    transform: none;
  }
}