/* Neural network background for the services carousel */

.svc-carousel {
  background:
    radial-gradient(ellipse 55% 62% at 18% 48%, rgba(14, 165, 233, .10), transparent 72%),
    radial-gradient(ellipse 48% 54% at 84% 44%, rgba(124, 58, 237, .09), transparent 72%),
    linear-gradient(115deg, #01040a 0%, #030914 46%, #02040b 100%) !important;
}

.svc-neural-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  filter: saturate(1.08);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.76), #000 20% 82%, rgba(0,0,0,.74));
  mask-image: linear-gradient(90deg, rgba(0,0,0,.76), #000 20% 82%, rgba(0,0,0,.74));
  transition: opacity 1.1s ease;
}

.svc-carousel.neural-ready .svc-neural-bg { opacity: .9; }

.svc-carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1,4,10,.50) 0%, rgba(1,4,10,.10) 33%, rgba(1,4,10,.04) 67%, rgba(1,4,10,.28) 100%),
    radial-gradient(ellipse 72% 80% at 50% 50%, transparent 46%, rgba(0,0,0,.30) 100%);
}

.svc-carousel .svc-carousel-glow {
  z-index: 0;
  opacity: .6;
}

.svc-carousel .svc-carousel-grid-bg {
  z-index: 0;
  opacity: .10;
  background-size: 72px 72px;
}

.svc-carousel > .svc-car-viewport {
  position: relative;
  z-index: 2;
}

.svc-carousel > .svc-car-arrow {
  position: absolute;
  z-index: 7;
}

.svc-carousel > .svc-car-foot {
  position: absolute;
  z-index: 7;
}

.svc-carousel > .swipe-hint {
  position: absolute;
  z-index: 8;
}

@media (max-width: 900px) {
  .svc-carousel.neural-ready .svc-neural-bg { opacity: .67; }

  .svc-carousel::after {
    background:
      linear-gradient(180deg, rgba(1,4,10,.24), rgba(1,4,10,.08) 35%, rgba(1,4,10,.30)),
      radial-gradient(ellipse 90% 80% at 50% 50%, transparent 38%, rgba(0,0,0,.26) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-neural-bg { transition: none; }
}