/* ============================================================
   HOME v9 — leggera: un pallino «bio» al centro, lavori come piccole immagini, pallini grigi su tutto lo schermo.
   Bianco, inchiostro, un solo accento. Niente righelli né cartellini:
   pallini, fili sottili, nomi. Le foto compaiono leggere sul lavoro puntato.
   Font: Archivo + IBM Plex Mono (SIL OFL). Le versioni prima sono in _versioni/.
   ============================================================ */
@font-face{ font-family:"ArchivoV"; src:url("../assets/fonts/Archivo-var.ttf") format("truetype");
  font-weight:100 900; font-stretch:62% 125%; font-display:swap; }
@font-face{ font-family:"Plex"; src:url("../assets/fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Plex"; src:url("../assets/fonts/IBMPlexMono-Medium.ttf") format("truetype"); font-weight:500; font-display:swap; }

body.home{
  --carta:#FFFFFF; --inchiostro:#16161A; --grigio:#6E6E73; --chiaro:#A0A0A6; --filo:#D4D4D8;
  --rosso:#B4342A;
  background:var(--carta); color:var(--inchiostro); overflow:hidden;
  font-family:"ArchivoV",sans-serif;
}

/* testata minima */
.h-testa{ position:fixed; left:28px; right:28px; top:22px; z-index:30; display:flex;
  justify-content:space-between; align-items:baseline; pointer-events:none; }
.h-testa a{ pointer-events:auto; }
.h-nome{ font-weight:800; font-stretch:112%; font-size:15px; letter-spacing:.01em; text-transform:uppercase; }
.h-menu{ display:flex; gap:20px; font-family:"Plex",sans-serif; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.h-nome a:hover,.h-menu a:hover{ color:var(--rosso); }

/* grafo v9 (03/11/2026): tutto più leggero. Fili quasi invisibili, pallini grigi minuscoli che riempiono lo
   schermo (uno per fotografia), i lavori come piccole immagini intere, la bio al centro */
.home #graph-wrap{ background:var(--carta); }
.home #graph-svg{ z-index:2; }
.home #nodes{ z-index:3; }
.home #graph-svg line{ stroke:#E9E9EC; stroke-width:.6; opacity:1; transition:stroke .2s ease, opacity .2s ease; }
.home #graph-svg line.hub{ stroke:#E2E2E5; }
.home #graph-svg line.tema{ stroke:#EDEDF0; stroke-dasharray:2 3; }
/* i fili accesi in un rosso vivo, più acceso dei testi (Matteo, 03/11/2026): sono segni, non scritte */
.home #graph-svg line.hi{ stroke:#F0362B; stroke-width:1.3; }
.home #graph-svg line.dim{ opacity:.35; }
/* i fili dei pallini si vedono solo sul lavoro puntato (03/11/2026: a riposo erano «linee vuote») */
.home #graph-svg line.foto{ opacity:0; }
.home #graph-svg line.foto.hi{ opacity:1; }

.home .node{ gap:6px; transition:opacity .2s ease; }

/* al centro: un pallino con scritto bio, che porta ad About */
.home .node.hub{ cursor:pointer; }
.home .node.hub .dot{ width:7px; height:7px; background:#A0A0A6; box-shadow:none; }
.home .node.hub .lbl{ font-family:"Plex",sans-serif; font-size:10.5px; letter-spacing:.06em; color:var(--grigio);
  text-transform:lowercase; font-weight:400; }
.home .node.hub:hover .dot{ background:var(--rosso); transform:none; }
.home .node.hub:hover .lbl{ color:var(--rosso); }

/* i pallini delle fotografie */
.home .node.foto{ width:9px; height:9px; cursor:pointer; display:block; }
.home .node.foto::after{ content:""; position:absolute; left:3px; top:3px; width:3px; height:3px; border-radius:50%;
  background:#BDBDC2; transition:background .2s ease, transform .2s ease; }
.home .node.foto.muto{ cursor:default; }
.home .node.foto.muto::after{ background:#D4D4D8; }
.home .node.foto:hover::after,.home .node.foto.hl::after{ background:var(--rosso); }
.home .node.foto:hover::after{ transform:scale(1.8); }

/* i lavori: una piccola immagine intera, il nome solo puntandolo */
.home .node.project{ cursor:pointer; }
.home .node.project img{ display:block; width:68px; height:auto; transition:opacity .2s ease; }
.home .node.project .lbl{ position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:5px;
  font-family:"Plex",sans-serif; font-size:10.5px; letter-spacing:.03em; color:var(--rosso); white-space:nowrap;
  background:var(--carta); padding:0 3px; opacity:0; transition:opacity .2s ease; }
.home .node.project:hover .lbl,.home .node.project:focus-visible .lbl{ opacity:1; }
.home .node.project:focus-visible{ outline:1px solid var(--inchiostro); outline-offset:3px; }
.home .node.is-nome .lbl{ position:static; transform:none; margin:0; opacity:1; color:var(--grigio); }
.home .node.is-nome:hover .lbl{ color:var(--rosso); }

/* l'apparato di AoC: una piccola schermata (il fotogramma di Hebron segnato dal software, intero) con un puntino live
   che lampeggia; legato solo al progetto fotografico. Il nome compare puntandolo, come per gli altri lavori */
.home .node.is-apparato .schermo{ position:relative; display:block; padding:3px; background:#0E1114; line-height:0; }
.home .node.is-apparato .schermo img{ display:block; width:76px; height:auto; }
.home .node.is-apparato .live{ position:absolute; right:6px; top:6px; width:5px; height:5px; border-radius:50%;
  background:#E5484D; animation:aoc-live 1.6s steps(2, jump-none) infinite; }
@keyframes aoc-live{ 0%{ opacity:1 } 100%{ opacity:.15 } }
@media (prefers-reduced-motion:reduce){ .home .node.is-apparato .live{ animation:none; } }
.home .node.is-apparato:hover .schermo{ outline:1px solid var(--rosso); }

/* il libro 3D di Poem, piccolo come le immagini */
.home .node.is-libro{ gap:0; }
.home .node.is-libro .info-oggetto-3d{ height:104px; touch-action:none; }
.home .node.is-libro .info-oggetto-3d canvas{ pointer-events:none; }
.home .node.is-libro .lbl{ margin-top:-10px; }

/* i temi: un punto e una parola, chiarissimi */
.home .node.concept{ cursor:default; }
.home .node.concept .dot{ width:4px; height:4px; background:#C8C8CD; box-shadow:none; }
/* i nomi dei temi dicono qualcosa: grigio testo #6E6E73 (passa il contrasto AA), non il grigio chiaro della marginalia */
.home .node.concept .lbl{ font-family:"Plex",sans-serif; font-size:10px; letter-spacing:.04em; color:var(--grigio); }
.home .node.concept.hl .lbl{ color:var(--grigio); }

.home #graph-wrap.has-hover .node.dim{ opacity:.3; }
.home #graph-wrap.has-hover .node.foto.dim{ opacity:.45; }

/* foto del lavoro puntato: intere, senza cornice, leggere */
#affissi{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.affisso{ position:absolute; opacity:0; transition:opacity .4s ease; }
.affisso.su{ opacity:1; }
.affisso img{ display:block; width:100%; height:auto; }

/* sul telefono il dito è grosso: attorno a ogni lavoro un margine invisibile che prende il tocco */
@media (hover:none){
  .home .node.project::before{ content:""; position:absolute; inset:-12px; }
  /* senza puntatore il nome non si può scoprire passandoci sopra: sul telefono e sul tablet sta sempre sotto
     l'immagine, piccolo e grigio, e fa parte del nodo, così i nodi si scostano tenendone conto (Matteo, 03/11/2026) */
  .home .node.project .lbl{ position:static; transform:none; margin:5px 0 0; opacity:1; color:var(--grigio);
    white-space:normal; max-width:112px; text-align:center; line-height:1.3; background:none; padding:0; font-size:10px;
    text-wrap:balance; }
  .home .node.is-libro .lbl{ margin-top:-4px; }
  .home .node.project.hl .lbl{ color:var(--rosso); }
}

@media (max-width:760px){
  .h-testa{ left:16px; right:16px; top:16px; }
  .home .node.project img{ width:42px; }
  .home .node.is-libro .info-oggetto-3d{ height:70px; }
  .home .node.is-apparato .schermo img{ width:48px; }
  .home .node.concept .lbl{ display:none; }
}

/* schermi molto bassi (il telefono girato in orizzontale): tutto un po' più piccolo e i temi solo come punti,
   altrimenti i nodi non stavano nell'altezza senza toccarsi */
@media (max-height:520px){
  .home .node.project img{ width:44px; }
  .home .node.is-libro .info-oggetto-3d{ height:62px; }
  .home .node.is-apparato .schermo img{ width:44px; }
  .home .node.concept .lbl{ display:none; }
  .home .node.project .lbl{ font-size:9px; max-width:96px; }
}