/*
  BRIX Special Animation - AI Agency Marquees
  ----------------------------------------------------------------------------
  Native replacement for the Webflow IX2 marquees on the AI Agency page:
    - Hero "AI Process Optimizer": two horizontal rows of automation cards that
      drift in opposite directions.
    - "AI Services" section: two vertical columns of service cards that drift in
      opposite directions.

  Each row/column ships three identical card sets, so translating by exactly one
  third loops seamlessly. The JS marker adds the direction classes and clears any
  leftover inline transforms; parent wrappers clip the overflow and fade the
  edges with the existing gradient overlays.
*/

/* Hero — horizontal rows */
.brix-ai-marquee-row {
  width: max-content;
  flex: none;
  will-change: transform;
}

.brix-ai-marquee-row.forward {
  animation: brix-ai-row-left 60s linear infinite;
}

.brix-ai-marquee-row.reverse {
  animation: brix-ai-row-right 60s linear infinite;
}

@keyframes brix-ai-row-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-33.3333%, 0, 0); }
}

@keyframes brix-ai-row-right {
  from { transform: translate3d(-33.3333%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* AI Services — vertical columns */
.brix-ai-marquee-col {
  height: max-content;
  will-change: transform;
}

.brix-ai-marquee-col.forward {
  animation: brix-ai-col-up 48s linear infinite;
}

.brix-ai-marquee-col.reverse {
  animation: brix-ai-col-down 48s linear infinite;
}

@keyframes brix-ai-col-up {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -33.3333%, 0); }
}

@keyframes brix-ai-col-down {
  from { transform: translate3d(0, -33.3333%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Tablet / mobile: the service columns reflow into horizontal rows
   (.marquee-column -> flex-flow: row), so drive them with the horizontal
   keyframes instead of the vertical ones, and let each track grow past the
   viewport so the loop has room to travel (the section clips the overflow). */
@media (max-width: 991px) {
  .brix-ai-marquee-col {
    width: max-content;
  }

  .brix-ai-marquee-col.forward {
    animation: brix-ai-row-left 48s linear infinite;
  }

  .brix-ai-marquee-col.reverse {
    animation: brix-ai-row-right 48s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brix-ai-marquee-row,
  .brix-ai-marquee-col {
    animation: none;
  }
}