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

   Replaces three behaviors that were previously driven by the Webflow runtime:
     1. Portfolio marquee  -> pure CSS infinite scroll (see megatech.css pattern)
     2. FAQ accordion       -> CSS height transition, toggled by the page JS
     3. Service stacking-card scale -> handled in figma-sites-agency.js
   The sticky stacking itself is pure CSS (position: sticky) in the base theme.
   ========================================================================= */

/* ---- 1. Portfolio infinite marquee -------------------------------------- */
.portfolio-marquee .infinity-marquee-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  animation: figma-sites-marquee 70s linear infinite;
}

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

@keyframes figma-sites-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-100% / 3), 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;
}

/* +  ->  −  icon morph */
.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;
}

/* ---- Accessibility: respect reduced-motion ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .portfolio-marquee .infinity-marquee-track {
    animation: none;
  }
  .accordion-item .accordion-content-wrapper {
    transition: none;
  }
}

/* ---- 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);
}

/* ---- 4. Hero image -> services section: straight seam, no radius -------- */
/* The full-bleed black hero image and the dark services section touch with
   zero gap; their matching 32px corner radii were leaving white notches at the
   join. Square off the meeting edges so it reads as one straight cut, and add
   a hairline top border on the services section as a barely-there divider. */
.agency-hero .a__image-hero-wrap.figma-agency {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#services.sec.br-accent.fig {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 1px solid #383838;
}

@media (prefers-reduced-motion: reduce) {
  .link-wraper.default-link:hover .brix_icon-font.btn-arrow.link-icon {
    transform: none;
  }
}