/*
 * AI24Solutions V32-D
 * Animated process connections.
 *
 * Reuses the existing ai24TrustDot motion contract from styles.css.
 * No JavaScript and no new IntersectionObserver.
 */

.automation-process-flow {
  position: relative;
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr) 18px
    minmax(0, 1fr) 18px
    minmax(0, 1fr) 18px
    minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: stretch;
  overflow: visible;
}

.automation-process-flow > .automation-flow-card {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.automation-flow-connector {
  position: relative;
  z-index: 1;
  display: block;
  align-self: center;
  width: calc(100% + 12px);
  height: 2px;
  margin-inline: -6px;
  overflow: visible;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(116, 95, 231, .12),
      rgba(70, 191, 241, .56),
      rgba(116, 95, 231, .12)
    );
}

.automation-flow-connector::before,
.automation-flow-connector::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9aa8ba;
  transform: translateY(-50%);
}

.automation-flow-connector::before {
  left: -2px;
}

.automation-flow-connector::after {
  right: -2px;
}

.automation-flow-connector i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      #7658ef,
      #38c5f3
    );
  box-shadow:
    0 0 0 5px rgba(91, 123, 236, .10);
  transform: translate(-50%, -50%);
  animation:
    ai24TrustDot
    3.2s
    ease-in-out
    infinite;
}

.automation-flow-connector--2 i {
  animation-delay: .55s;
}

.automation-flow-connector--3 i {
  animation-delay: 1.10s;
}


/*
 * Tablet keeps the accepted 2 × 2 density.
 *
 * 01 → 02
 *       ↓
 * 04 ← 03
 */
@media (max-width: 900px) and (min-width: 561px) {
  .automation-process-flow {
    grid-template-columns:
      minmax(0, 1fr)
      18px
      minmax(0, 1fr) !important;
    grid-template-rows:
      auto
      18px
      auto;
  }

  .automation-process-flow >
  .automation-flow-card--1 {
    grid-column: 1;
    grid-row: 1;
  }

  .automation-process-flow >
  .automation-flow-connector--1 {
    grid-column: 2;
    grid-row: 1;
  }

  .automation-process-flow >
  .automation-flow-card--2 {
    grid-column: 3;
    grid-row: 1;
  }

  .automation-process-flow >
  .automation-flow-connector--2 {
    grid-column: 3;
    grid-row: 2;
    justify-self: center;
    align-self: center;
    width: 18px;
    height: 2px;
    margin: 0;
    transform: rotate(90deg);
  }

  .automation-process-flow >
  .automation-flow-card--3 {
    grid-column: 3;
    grid-row: 3;
  }

  .automation-process-flow >
  .automation-flow-connector--3 {
    grid-column: 2;
    grid-row: 3;
  }

  .automation-process-flow >
  .automation-flow-connector--3 i {
    animation-direction: reverse;
  }

  .automation-process-flow >
  .automation-flow-card--4 {
    grid-column: 1;
    grid-row: 3;
  }
}


/*
 * Mobile keeps the accepted one-column card layout.
 * The old horizontal signal is rotated into a vertical path.
 */
@media (max-width: 560px) {
  .automation-process-flow {
    grid-template-columns: 1fr !important;
    grid-template-rows: none;
  }

  .automation-process-flow >
  .automation-flow-card,
  .automation-process-flow >
  .automation-flow-connector {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .automation-process-flow >
  .automation-flow-connector {
    justify-self: center;
    align-self: center;
    width: 18px;
    height: 2px;
    margin: 8px 0;
    transform: rotate(90deg);
  }

  .automation-process-flow >
  .automation-flow-connector--3 i {
    animation-direction: normal;
  }
}


/* Accessibility contract. */
@media (prefers-reduced-motion: reduce) {
  .automation-flow-connector i {
    left: 50% !important;
    opacity: 1 !important;
    animation: none !important;
  }
}