/* ==========================================================================
   Effetto rete (particles) — AlbaSoftware
   Seconda colonna della fascia hero di due pagine:

     Prodotti (Panoramica) : i nodi sono i loghi dei quattro applicativi,
                             ciascuno incastonato nel riquadro grigio chiaro,
                             collegati dal reticolato.
     Profilo               : gli stessi nodi con delle parole al posto dei
                             loghi e il reticolato nascosto
                             (attributo  data-rete-linee="no").

   Non modifica nessuna regola di style.css: usa le stesse variabili
   (--accent, --radius, --space-*, --font-head) e va caricato DOPO style.css,
   solo nelle pagine che lo richiamano con  <!--@ css: css/rete.css -->
   insieme a  <!--@ js: js/rete.js -->

   Punti fermi del disegno:
   - la posizione di partenza di ogni nodo e' scritta nell'HTML
     (style="left:18%;top:22%"), quindi senza JavaScript i nodi restano
     comunque disposti e leggibili: lo script aggiunge solo il movimento;
   - il movimento e' una lenta oscillazione attorno alla posizione di
     partenza, cosi' un nodo non puo' mai uscire dal riquadro;
   - con la riduzione delle animazioni attiva nel sistema operativo tutto
     resta fermo e visibile (in fondo al file).
   ========================================================================== */

/* la fascia hero contiene il riquadro: niente barre di scorrimento */
.hero { overflow: hidden; }

/* --------------------------------------------------------------------------
   1. Il riquadro della rete
   -------------------------------------------------------------------------- */

.rete {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 300px;
  /* alone luminoso dietro al reticolato */
  background:
    radial-gradient(circle at 50% 45%, rgba(47, 146, 230, 0.20), transparent 62%);
}

/* la tela disegna soltanto punti e collegamenti: non contiene informazioni,
   quindi resta fuori dalla lettura assistita */
.rete__tela {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. I nodi: riquadro grigio chiaro con logo oppure con parola
   -------------------------------------------------------------------------- */

.rete__nodo {
  position: absolute; z-index: 2;
  /* left/top nell'HTML indicano il centro del nodo */
  margin: 0; transform: translate(-50%, -50%);
  /* il nodo tiene la sua larghezza naturale: essendo in posizione assoluta,
     altrimenti lo spazio disponibile e' solo quello fra 'left' e il bordo
     destro del riquadro e il logo piu' largo (Geod Image) verrebbe compresso
     in orizzontale, perche' l'altezza qui sotto e' fissa */
  width: max-content; max-width: none;
  text-decoration: none; color: inherit;
  will-change: transform;
}
.rete__nodo:hover, .rete__nodo:focus { text-decoration: none; }

/* il riquadro e' un elemento interno: lo script muove il nodo (transform del
   contenitore) e la comparsa in dissolvenza resta al riquadro, senza che le
   due trasformazioni si sovrappongano */
.rete__box {
  display: flex; align-items: center; justify-content: center;
  background: #eef3f9; border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius); padding: 9px 13px;
  box-shadow: 0 12px 26px rgba(3, 14, 26, 0.42);
  animation: rete-appare 640ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rete__box img { display: block; height: 21px; width: auto; max-width: none; }

/* comparsa a scalare: i nodi entrano uno dopo l'altro */
.rete__nodo:nth-of-type(1) .rete__box { animation-delay: 0.10s; }
.rete__nodo:nth-of-type(2) .rete__box { animation-delay: 0.22s; }
.rete__nodo:nth-of-type(3) .rete__box { animation-delay: 0.34s; }
.rete__nodo:nth-of-type(4) .rete__box { animation-delay: 0.46s; }
.rete__nodo:nth-of-type(5) .rete__box { animation-delay: 0.58s; }
.rete__nodo:nth-of-type(6) .rete__box { animation-delay: 0.70s; }
.rete__nodo:nth-of-type(7) .rete__box { animation-delay: 0.82s; }

/* nodo con la parola: stesso riquadro, testo al posto del logo */
.rete__nodo--parola .rete__box {
  padding: 8px 14px;
  font-family: var(--font-head); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--dark-2);
  white-space: nowrap;
}

/* i nodi-logo sono collegamenti: al passaggio si alzano leggermente */
a.rete__nodo:hover .rete__box,
a.rete__nodo:focus-visible .rete__box {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(3, 14, 26, 0.5);
}
a.rete__nodo:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 5px; }

@keyframes rete-appare {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   3. Schermi stretti e tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .rete__box { padding: 7px 10px; }
  .rete__box img { height: 18px; }
  .rete__nodo--parola .rete__box { padding: 6px 11px; font-size: 0.7rem; }
  /* qui la fascia passa a una colonna sola: il reticolo va sotto al testo e
     senza limite occuperebbe tutta la larghezza della pagina */
  .rete { max-width: 560px; }
}

@media (max-width: 900px) {
  /* si abbassa per non allungare troppo la fascia */
  .rete { aspect-ratio: 16 / 10; min-height: 260px; }
}

@media (max-width: 620px) {
  .rete { aspect-ratio: 1 / 1; min-height: 300px; }
  .rete__box img { height: 16px; }
  .rete__nodo--parola .rete__box { font-size: 0.66rem; letter-spacing: 0.05em; }
  /* su schermo stretto il riquadro e' piccolo: i nodi in eccesso si nascondono
     (lo script salta i nodi non visualizzati, quindi nessun collegamento
     resta appeso all'angolo) */
  .rete__nodo--extra { display: none; }
}

/* --------------------------------------------------------------------------
   4. Riduzione delle animazioni: tutto fermo, tutto visibile
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .rete__box { animation: none; opacity: 1; transform: none; transition: none; }
  a.rete__nodo:hover .rete__box, a.rete__nodo:focus-visible .rete__box { transform: none; }
}

/* --------------------------------------------------------------------------
   5. Reticolato a tutta fascia  (.hero--reticolo + .rete--fondo)

   Variante introdotta per uniformare Prodotti e Profilo alle pagine con lo
   sfondo animato: il reticolato non sta piu' nella seconda colonna, ma copre
   l'intera fascia e passa dietro al titolo, come se la testata fosse
   appoggiata su una rete.

   Come e' tenuto in ordine:
   - il riquadro diventa un livello in posizione assoluta sopra al gradiente e
     sotto al contenuto (z-index 0 contro 1), quindi non occupa spazio: alla
     fascia serve un'altezza minima propria, dichiarata qui sotto;
   - i nodi non stanno direttamente nel riquadro ma dentro `.rete__campo`, una
     zona che occupa solo la meta' destra della fascia: le percentuali
     `left`/`top` scritte nell'HTML continuano a valere da 0 a 100 come prima,
     ma dentro quella zona, quindi nessun riquadro puo' finire sopra al titolo
     o alla descrizione, che stanno a sinistra;
   - una velatura scura, identica nello spirito a quella di sfondo-animato.css,
     protegge il contrasto del testo nella parte sinistra;
   - sotto i 1024 px i nodi spariscono e resta il solo reticolato dietro al
     testo: su uno schermo stretto i riquadri allungavano la fascia di
     trecento pixel buoni prima ancora di arrivare al contenuto. I prodotti
     restano raggiungibili dal menu, dalla scheda "Schede prodotto" nella
     colonna laterale e dall'elenco nel corpo della pagina.
   -------------------------------------------------------------------------- */

.hero--reticolo {
  position: relative;
  overflow: hidden;
  /* isola il contesto di impilamento: gli z-index qui dentro non interferiscono
     con la testata del sito o con i menu a tendina */
  isolation: isolate;
  /* rev. 8.13: altezza leggermente ridotta, la rete non occupa spazio: senza questa misura la fascia si stringerebbe
     sull'altezza del solo testo */
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rete--fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  max-width: none;
  /* annulla le misure della versione in colonna; evita il limite di 560px ereditato */
  aspect-ratio: auto;
  min-height: 0;
  /* l'alone luminoso si sposta sui nodi, cioe' a destra */
  background:
    radial-gradient(circle at 74% 48%, rgba(47, 146, 230, 0.20), transparent 58%);
}

/* velatura che protegge titolo e descrizione: piena a sinistra, assente
   oltre la meta' della fascia, dove stanno i nodi */
.rete--fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(6, 21, 36, 0.58) 0%,
      rgba(6, 21, 36, 0.42) 26%,
      rgba(6, 21, 36, 0.10) 46%,
      rgba(6, 21, 36, 0.00) 58%);
}

/* La zona dei nodi: solo la meta' destra, lontana dal testo. I collegamenti
   della rete continuano a essere disegnati su tutta la fascia, perche' la tela
   riempie il riquadro: qui si limitano soltanto i riquadri dei nodi. */
.rete__campo {
  position: absolute;
  left: 50%; right: 0; top: 7%; bottom: 7%;
}

/* Il contenuto sale sopra la rete.

   Attenzione al puntatore: il contenitore del testo e' un blocco che copre
   l'intera fascia, comprese le zone vuote a destra. Stando sopra alla rete si
   mangia i clic destinati ai nodi, che sono collegamenti alle schede prodotto.
   Si disattiva quindi il puntatore sul contenitore e si riattiva sui suoi
   figli: il testo resta selezionabile e i link della briciola di pane
   funzionano, mentre lo spazio vuoto lascia passare il clic alla rete. */
.hero--reticolo .hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  pointer-events: none;
}
.hero--reticolo .hero__inner > * { pointer-events: auto; }

/* Su desktop titolo e descrizione usano esattamente meta' della larghezza
   interna della hero; la meta' destra resta libera per la rete e i nodi. */
.hero--reticolo .hero__inner > * { max-width: min(46ch, 50%); }
.hero--reticolo .hero__inner h1,
.hero--reticolo .hero__inner .lead { max-width: 50%; }


@media (max-width: 1024px) {
  /* Schermi stretti: via i riquadri, resta il reticolato come sfondo.
     Nascondendo la zona lo script non trova piu' nessun nodo visibile (salta
     quelli senza offsetParent) e disegna i soli punti liberi: nessun
     collegamento resta appeso nel vuoto. */
  .rete--fondo .rete__campo { display: none; }

  /* la fascia torna alta quanto il suo testo */
  .hero--reticolo { min-height: 0; }

  /* niente piu' colonna a destra da lasciare libera: il testo riprende la
     larghezza piena e la velatura copre tutta la fascia, in modo uniforme */
  .hero--reticolo .hero__inner > *,
  .hero--reticolo .hero__inner h1 { max-width: none; }
  .hero--reticolo .hero__inner .lead { max-width: 60ch; }
  .rete--fondo {
    background: radial-gradient(circle at 70% 40%, rgba(47, 146, 230, 0.18), transparent 64%);
  }
  .rete--fondo::after {
    background:
      linear-gradient(170deg,
        rgba(6, 21, 36, 0.40) 0%,
        rgba(6, 21, 36, 0.52) 60%,
        rgba(6, 21, 36, 0.60) 100%);
  }
}

@media print {
  .rete--fondo { display: none; }
}