.ambient-tech-layer {
  position: fixed;
  z-index: 12;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.ambient-tech-field {
  display: block;
  width: 100%;
  height: 100%;
  opacity: .82;
}

.ambient-tech-scan {
  position: absolute;
  top: -24vh;
  right: 0;
  left: 0;
  height: 18vh;
  opacity: .12;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(119, 103, 255, .08) 42%,
    rgba(36, 214, 208, .12) 50%,
    rgba(119, 103, 255, .05) 58%,
    transparent
  );
  filter: blur(8px);
  animation: ambientTechScan 19s linear infinite;
}

.ambient-tech-layer::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .11;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 5px,
    rgba(255, 255, 255, .018) 6px
  );
  mask-image: radial-gradient(
    ellipse at center,
    transparent 8%,
    rgba(0, 0, 0, .52) 58%,
    #000 100%
  );
}

[data-theme="light"] .ambient-tech-field {
  opacity: .34;
}

[data-theme="light"] .ambient-tech-scan {
  opacity: .07;
  mix-blend-mode: multiply;
}

[data-theme="light"] .ambient-tech-layer::after {
  opacity: .05;
}

body[data-particles="0"] .ambient-tech-layer {
  display: none;
}

@keyframes ambientTechScan {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, 148vh, 0);
  }
}

@media (max-width: 680px) {
  .ambient-tech-field {
    opacity: .66;
  }

  .ambient-tech-scan {
    opacity: .07;
    animation-duration: 24s;
  }

  .ambient-tech-layer::after {
    opacity: .07;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-tech-scan {
    display: none;
  }
}