/* ============================================================================
   CAMPO DI GRAFITE — la banda animata delle sezioni nere
   ---------------------------------------------------------------------------
   Sta in una riga sua, alta zero, messa per prima nella sezione. La riga e la
   sua colonna vanno a `position: static` di proposito: Divi mette
   `position: relative; z-index: 2` su ogni riga e su ogni colonna, e finche'
   restano relative la banda si aggancia alla colonna invece che alla sezione,
   cioe' copre una striscia alta un pixel al posto di tutta la fascia. E' lo
   stesso difetto del player della radio, e si risolve nello stesso modo:
   togliendo il contenitore, non alzando lo z-index.

   I parametri della scena stanno qui e non nel markup: lo shader li legge da
   queste custom property al primo fotogramma, cosi' la taratura per
   breakpoint vive nel foglio insieme al resto.
   ========================================================================= */

/* La riga portante: non occupa spazio e non fa da contenitore.
   I quattro selettori sono i quattro involucri che Divi mette fra la sezione
   e il nostro div — riga, colonna, modulo, e `.et_pb_code_inner`, che e'
   quello che sfugge sempre perche' non ha una classe che si riconosca. Basta
   che uno resti `relative` perche' la banda si agganci a lui: e' successo con
   `.et_pb_code_inner`, e il campo veniva fuori largo 1240 e alto zero. */
body.hl-carta .hl-atmos-row,
body.hl-carta .hl-atmos-row > .et_pb_column,
body.hl-carta .hl-atmos-row .et_pb_module,
body.hl-carta .hl-atmos-row .et_pb_code_inner {
  position: static;
  width: 100%;
  max-width: none;
  height: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
}

body.hl-carta .hl-atmos {
  /* Dove sta il testo, e quanta larghezza tenergli libera (0..1). */
  --hl-atmos-side: left;
  --hl-atmos-keep: 0.44;
  /* Opacita' massima. Ogni scena la ridichiara: qui c'e' solo il ripiego per
     una scena senza taratura sua. */
  --hl-atmos-amp: 0.50;
  --hl-atmos-ink: #c6c6cf;
  --hl-atmos-hot: #b57ab9;

  position: absolute;
  inset: 0;
  z-index: 0;           /* sotto alle righe di contenuto, che Divi tiene a 2 */
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;  /* il canvas non ridisegna il resto della sezione */
}

body.hl-carta .hl-atmos__canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Entra in dissolvenza al primo fotogramma: senza, sui browser lenti si
     vede comparire un rettangolo di rumore a pagina gia' ferma. */
  opacity: 0;
  transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.hl-carta .hl-atmos.is-live .hl-atmos__canvas { opacity: 1; }

/* --------------------------------------------------------------------------
   LE NOVE SCENE
   ---------------------------------------------------------------------------
   Forma e moto stanno nello shader (`assets/js/atmos.js`); qui stanno i
   quattro numeri che ogni scena vuole diversi: quanta larghezza tenere libera
   per il testo, l'opacita' massima, e i due colori.

   Le opacita' non sono a occhio. Sono uscite da `.tmp/calib.js`, che compila
   ogni scena, ne legge il buffer a tre istanti diversi e misura il livello
   composito sul fondo #0d0d0f (13 su 255) nella sola meta' libera. La regola
   e' la stessa per tutte: creste fra 80 e 150, media fra 15 e 40. I numeri
   vanno da 0.42 a 0.90 e non sono uno solo perche' una scena piena — il
   disturbo di riga — arriva a quel livello con meta' opacita' di una fatta di
   linee sottili, come le isoipse.

   Sui colori: la base resta la famiglia del viola del marchio, il rosso e'
   sul disturbo e sulla punta dello spettro (dove vuol dire "fuori scala"), e
   la varieta' viene dal blu-viola e dal lilla chiaro, che stanno sull'arco
   accanto a #924c97. La luce bianca sulle creste la mette lo shader.
   ------------------------------------------------------------------------ */

/* / — moire. Il battimento fra due reticoli, blu-viola. */
body.hl-carta .hl-atmos--moire {
  --hl-atmos-amp: 0.85; --hl-atmos-ink: #7b8cf0; --hl-atmos-hot: #d8a6ff;
}

/* /custom-ai-models/ — isoipse. Linee sottili e accese, viola in lilla. */
body.hl-carta .hl-atmos--contour {
  --hl-atmos-amp: 0.62; --hl-atmos-ink: #8a5cf0; --hl-atmos-hot: #e0a6ff;
}

/* /motion-ai/ — disturbo di riga. L'unico rosso in movimento del sito. */
body.hl-carta .hl-atmos--shear {
  --hl-atmos-amp: 0.42; --hl-atmos-ink: #e8e8ee; --hl-atmos-hot: #e42320;
}

/* /creative-tools/ — righello con testina. Tratti sottili: serve piu' spinta. */
body.hl-carta .hl-atmos--ticks {
  --hl-atmos-amp: 0.55; --hl-atmos-ink: #7a4fd0; --hl-atmos-hot: #dcb6ff;
}

/* /jingle/ — spettro. La punta va in rosso quando la fascia sale. */
body.hl-carta .hl-atmos--spectrum {
  --hl-atmos-amp: 0.50; --hl-atmos-ink: #924c97; --hl-atmos-hot: #e42320;
}

/* /work/ — tratteggio, sulle due sezioni nere. Grafite chiara. */
body.hl-carta .hl-atmos--graphite {
  --hl-atmos-amp: 0.85; --hl-atmos-ink: #d8d8e2; --hl-atmos-hot: #b57ab9;
}

/* /studio/ — plasma. Viola profondo che scorre. */
body.hl-carta .hl-atmos--veil {
  --hl-atmos-amp: 0.90; --hl-atmos-ink: #6e3573; --hl-atmos-hot: #b57ab9;
}

/* /contact/ — fronti d'onda. Il centro sta fuori campo, opposto al testo. */
body.hl-carta .hl-atmos--arcs {
  --hl-atmos-amp: 0.55; --hl-atmos-ink: #924c97; --hl-atmos-hot: #dcb6ff;
}

/* /demo/ — retino. Grigio che sale al viola col diametro del punto. */
body.hl-carta .hl-atmos--halftone {
  --hl-atmos-amp: 0.75; --hl-atmos-ink: #d6d6e0; --hl-atmos-hot: #b57ab9;
}

/* --------------------------------------------------------------------------
   TARATURE PER SEZIONE
   ---------------------------------------------------------------------------
   Quanto spazio tenere libero dipende dalla sezione, non dalla scena: la
   colonna del testo e' larga uguale qualunque cosa ci sia dietro.
   ------------------------------------------------------------------------ */

/* Banda finale: titolo e bottoni stanno in 48ch a sinistra, la scena prende
   il resto. E' la sezione nera che c'e' su tutte le pagine. */
body.hl-carta .hl-cta-band .hl-atmos { --hl-atmos-keep: 0.46; }

/* Testata dei pezzi su /work/: la fascia e' bassa e sotto non c'e' altro,
   quindi la scena puo' salire un poco di piu'. */
body.hl-carta .hl-pieces-head .hl-atmos { --hl-atmos-keep: 0.40; }

/* --------------------------------------------------------------------------
   QUANDO NON C'E'
   ---------------------------------------------------------------------------
   Sotto gli 861px le colonne si impilano e non resta nessuna meta' libera: un
   campo a tutta larghezza finirebbe sotto al testo, che e' la sola cosa che
   questo strato non deve fare mai. Lo script non costruisce niente quando
   l'elemento non ha un riquadro, quindi qui basta toglierlo dal layout.
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  body.hl-carta .hl-atmos { display: none; }
}

/* Chi chiede meno animazioni tiene il campo, fermo su un fotogramma solo: e'
   texture, non moto. La dissolvenza pero' sparisce. */
@media (prefers-reduced-motion: reduce) {
  body.hl-carta .hl-atmos__canvas { transition: none; }
}