/* RESET */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050a10;
}

/* CANVAS MATRIX (FONDO REAL) */
#matrix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}

/* CONTENEDOR SUPERIOR */
.wallpaper-container {
  position: fixed;
  inset: 0;
  z-index: 2;

  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* evita interferencias */
}

/* GLOW */
.digital-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.2), transparent 70%);
  border-radius: 50%;
  animation: pulseGlow 4s infinite ease-in-out;
}

/* ESCUDO */
.shield-logo {
  width: 400px;
  max-width: 70vw;
  position: relative;
  z-index: 3;

  filter: drop-shadow(0 0 15px rgba(0, 231, 255, 0.8));
  animation: float 6s infinite ease-in-out;
}

/* SCANLINE */
.scanline {
  position: absolute;
  width: 100%;
  height: 2px;
  background: rgba(0, 255, 255, 0.2);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  top: -10%;
  animation: scan 3s linear infinite;
}

/* ANIMACIONES */

@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 0.8; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes scan {
  0% { top: -10%; }
  100% { top: 110%; }
}