/* Dotline — animated network background (light, unified full-screen canvas) */
:root{
  --net-bg-1:#FAFEFF;
  --net-bg-2:#EFFBFD;
  --net-bg-3:#E4F7FA;
}

html,body{ height:100%; }

/* the login lives ON one continuous animated background — no separate panel */
body.has-network{
  background:
    radial-gradient(circle at 18% 22%, rgba(6,182,212,0.10), transparent 46%),
    radial-gradient(circle at 82% 74%, rgba(8,145,178,0.10), transparent 52%),
    linear-gradient(135deg, var(--net-bg-1) 0%, var(--net-bg-2) 45%, var(--net-bg-3) 100%);
  background-attachment: fixed;
}

#network{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  display:block;
  pointer-events:none; /* clicks pass through to the content above */
  /* la rete si schiarisce dietro la colonna di testo a sinistra, resta piena a destra */
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.20) 15%, #000 47%);
          mask-image:linear-gradient(to right, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.20) 15%, #000 47%);
}

/* su schermi stretti il testo è a tutta larghezza → niente maschera, rete piena */
@media (max-width:820px){
  #network{
    -webkit-mask-image:none;
            mask-image:none;
  }
}