/* RESET BÁSICO */
body {
  margin: 0;
  background: #06111f;
  overflow-x: hidden;
  font-family: sans-serif;
}

/* CONTENIDO ENCIMA DEL FONDO */
.content {
  position: relative;
  z-index: 2;
}

/* CONTENEDOR DEL FONDO */
.tech-background {
  position: fixed;
  inset: 0;
  z-index: -99;
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(20, 60, 120, 0.35), transparent 50%),
    linear-gradient(to bottom, #081220, #030712);
}

/* LÍNEAS TIPO CIRCUITO */
.grid {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(rgba(0, 180, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 180, 255, 0.07) 1px, transparent 1px);

  background-size: 80px 80px;

  mask-image: radial-gradient(circle at center, black 40%, transparent 100%);

  animation: moveGrid 18s linear infinite;
}

/* BRILLO ANIMADO */
.glow {
  position: absolute;
  inset: -50%;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 120px,
      rgba(0, 180, 255, 0.04) 122px,
      transparent 124px
    );

  animation: scan 12s linear infinite;
  transform: rotate(8deg);
}

/* MOVIMIENTO SUAVE */
@keyframes moveGrid {
  from {
    transform: translateY(0px);
  }

  to {
    transform: translateY(80px);
  }
}

/* EFECTO DE ESCANEO */
@keyframes scan {
  from {
    transform: translateX(-10%) rotate(8deg);
  }

  to {
    transform: translateX(10%) rotate(8deg);
  }
}