/* Selected B: the SVG pattern and fading cells adapt Magic UI's
   Animated Grid Pattern (MIT). See card-motion-LICENSE.txt. */
.services--bento .service-card.card-circuit {
  isolation: isolate;
  --circuit-color: #22a6bd;
  --circuit-bright: #8de8f3;
}
.services--bento .service-card--assessment.card-circuit {
  --circuit-color: #56d9df;
  --circuit-bright: #e5ffff;
}
.services--bento .service-card.card-circuit::before,
.services--bento .service-card.card-circuit::after { content: none; }
.services--bento .service-card.card-circuit > h3,
.services--bento .service-card.card-circuit > p,
.services--bento .service-card.card-circuit > ul { position: relative; z-index: 1; }
.services--bento .service-card.card-circuit .card-circuit-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(135deg, transparent 24%, #000 85%);
  mask-image: linear-gradient(135deg, transparent 24%, #000 85%);
}
.card-circuit .circuit-grid { display: block; width: 100%; height: 100%; color: var(--circuit-color); opacity: .65; }
.card-circuit .circuit-grid-line { fill: none; stroke: currentColor; stroke-width: .6; opacity: .2; }
.card-circuit .circuit-track { fill: none; stroke: currentColor; stroke-width: 1; opacity: .23; }
.card-circuit .circuit-signal { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 18 180; animation: circuit-transmit 6s linear infinite; animation-delay: var(--circuit-phase); }
.card-circuit .circuit-signal--second { animation-direction: reverse; animation-delay: calc(var(--circuit-phase) - 3s); }
.card-circuit .circuit-cell { fill: currentColor; stroke: none; opacity: 0; animation: circuit-pulse 5s linear infinite; animation-delay: calc(var(--circuit-phase) + var(--cell-phase)); }
.card-circuit .circuit-node { fill: var(--circuit-bright); stroke: currentColor; stroke-width: 1; opacity: .3; animation: circuit-node 5s linear infinite; animation-delay: calc(var(--circuit-phase) + var(--cell-phase)); }
@keyframes circuit-transmit { to { stroke-dashoffset: -198; } }
@keyframes circuit-pulse { 0%, 55%, 100% { opacity: 0; } 22%, 30% { opacity: .28; } }
@keyframes circuit-node { 0%, 55%, 100% { opacity: .3; } 22%, 30% { opacity: 1; } }
.card-circuit[data-circuit-running="false"] .card-circuit-layer * { animation-play-state: paused; }
@media (max-width: 720px) {
  .card-circuit .circuit-grid { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .card-circuit .card-circuit-layer * { animation: none; }
  .card-circuit .circuit-cell { opacity: .1; }
}