/* ══ Sfondo: grafici in lontananza ═══════════════════════════════════
   Sta dietro a tutto il resto. Il movimento e affidato a una sola
   animazione del browser su un nastro di due tele identiche: nessun
   calcolo per ogni fotogramma, quindi sul telefono non si sente.
   ═══════════════════════════════════════════════════════════════════ */

.sfondo-grafici {
  position: fixed;
  inset: 0;
  z-index: -4;                 /* dietro anche agli aloni e alla griglia */
  overflow: hidden;
  pointer-events: none;
}

.sg-nastro {
  display: flex;
  width: 200%;
  height: 100%;
  /* Molto lento: e una trama, non un'animazione da guardare.
     Una schermata intera in due minuti. */
  animation: sgScorre 120s linear infinite;
  will-change: transform;
}

.sg-nastro canvas {
  display: block;
  width: 50%;
  height: 100%;
}

@keyframes sgScorre {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .sg-nastro { animation: none; }
}