/* ==========================================================================
   SOUND ALCHEMISTS — Effetti di sfondo e cursore (regole statiche)

   I nodi sono creati da assets/js/fx.js e appesi al <body>: qui c'è solo
   quello che non cambia mai (posizione, livelli, miscelazione). Tutto ciò che
   si muove lo scrive fx.js. Nessun nodo riceve il mouse: i clic passano
   sempre al contenuto.

   Livelli (z-index), dal basso:
     3   puntini        sopra il contenuto, sotto l'header (che ha z-index 5)
     39  scanline e banda di tracking
     40  grana
     50  cursore
   ========================================================================== */

.fx-grain,
.fx-scanlines,
.fx-scanband,
.fx-dots {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* I due canvas riempiono la finestra; la loro risoluzione la fissa fx.js. */
.fx-scanband,
.fx-dots {
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
}

.fx-dots { z-index: 3; }

/* Grana: l'immagine (6 tile di rumore) e lo spostamento li scrive fx.js. */
.fx-grain {
  z-index: 40;
  opacity: .08;
  mix-blend-mode: overlay;
  background-repeat: repeat;
  background-size: 160px 160px;
}

/* Righe orizzontali: 1px scuro, 2px vuoti. Il nero translucido è del prototipo. */
.fx-scanlines {
  z-index: 39;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, .22) 0,
    rgba(0, 0, 0, .22) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
  opacity: .22;
}

.fx-scanband { z-index: 39; }

/* Cursore: anello e punto sono centrati sulle coordinate scritte da fx.js
   (transform: translate). Il cursore nativo resta visibile. */
.fx-cursor-ring,
.fx-cursor-dot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .3s;
}
.fx-cursor-ring.is-on,
.fx-cursor-dot.is-on { opacity: 1; }

.fx-cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
}
/* L'anello vero è lo pseudo-elemento: così può ingrandirsi (x1,8) senza
   toccare il transform che sposta il nodo. */
.fx-cursor-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--sand);
  border-radius: 50%;
  transition: transform .25s var(--ease-soft);
}
.fx-cursor-ring.is-big::before { transform: scale(1.8); }

.fx-cursor-dot {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--sand);
}