/* Decorazioni di sfondo della landing. Caricato da index.html, dopo lo
   <style> inline: a pari specificità vince questo file. Il percorso
   tratteggiato e le scene di sfondo con la mascotte sono stati cancellati
   il 16/09/2026 (docs/ondata-2026-09-16/ESITO-OPUS.md §2): il percorso
   tagliava l'angolo delle card FAQ e attraversava #chi-sono. Le monete che
   cadevano nel calcolatore e su #chi-sono sono state cancellate il
   17/09/2026 (docs/ondata-2026-09-16/ESITO-RIFINITURA.md): l'animazione era
   bocciata da Bruce ("terribile, da cancellare"). */

main{position:relative}

/* ===== 1. Passaggi sfumati fra bande: onda che sfuma dal colore di chi
   viene prima, non un taglio netto. ::before, sotto tutto (z-fondo). ===== */
#calcolatore::before,#chi-sono::before,#guide-settore::before,
#pdf::before,#prezzi::before,#faq::before,#altre-porte::before{
  content:"";position:absolute;inset:0 0 auto 0;height:min(16vh,130px);
  z-index:var(--z-fondo,0);pointer-events:none;mix-blend-mode:multiply;
}
#calcolatore::before{background:linear-gradient(rgba(250,243,231,.7),transparent)}
#chi-sono::before{background:linear-gradient(rgba(250,243,231,.6),transparent)}
#guide-settore::before{background:linear-gradient(rgba(242,86,63,.14),transparent)}
#pdf::before{background:linear-gradient(rgba(30,158,80,.14),transparent)}
#prezzi::before{background:linear-gradient(rgba(217,142,43,.16),transparent)}
#faq::before{background:linear-gradient(rgba(241,230,210,.75),transparent)}
#altre-porte::before{background:linear-gradient(rgba(250,243,231,.6),transparent)}

/* ===== 2. Le bande nude (verde, corallo, alt) prendono grana di carta,
   due pozze di luce morbide (stesso linguaggio di `.sfondo` inline, alfa
   9-16%) e un piccolo segno disegnato, tutto via ::after: zero markup
   nuovo. #guide-settore è anche `.banda-verde`, stesso sfondo, segno
   speculare (background-position diversa) per non essere un timbro. ===== */
.banda-verde::after,.banda-corallo::after,#altre-porte::after{
  content:"";position:absolute;inset:0;z-index:var(--z-fondo,0);
  pointer-events:none;overflow:hidden;background-repeat:no-repeat,no-repeat,repeat,no-repeat;
  animation:scena-deriva 70s ease-in-out infinite alternate;
  /* Ondata 17/09/2026 (ESITO-FIGURE.md §2): il testo mutato sopra questa
     texture stava sotto 4,5:1 su 5 bande su 9, anche col fondale spento
     (misurato dall'ondata precedente): il colpevole e' questo layer, non il
     fondale. `mix-blend-mode:screen` e' matematicamente "mai piu' scuro
     dello sfondo sottostante" (Screen(fondo,sorgente) >= fondo per ogni
     canale, quindi il risultato composito resta sempre >= al colore piatto
     della banda, che da solo e' gia' sopra soglia in tutte e 9 - misurato
     4,70-5,27:1 dal console il 16/09). Niente piu' tuning a occhio
     sull'opacita': la grana e i due pozzi di luce possono solo schiarire, la
     leggibilita' non puo' scendere sotto quella del colore piatto. */
  mix-blend-mode:screen;
}
.banda-verde::after{
  background-image:
    radial-gradient(40% 46% at 88% 20%,rgba(30,158,80,.14) 0%,transparent 62%),
    radial-gradient(32% 36% at 10% 84%,rgba(217,142,43,.12) 0%,transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 2l2.6 8.1H25l-6.9 5 2.6 8.1L14 18.2 7.3 23.2l2.6-8.1L3 10.1h8.4z' fill='none' stroke='%236F6450' stroke-width='1.6' stroke-linejoin='round' opacity='.55'/%3E%3C/svg%3E");
  background-position:0 0,0 0,0 0,92% 14%;
  background-size:auto,auto,180px 180px,26px 26px;
}
#guide-settore::after{background-position:0 0,0 0,0 0,7% 82%}
.banda-corallo::after{
  background-image:
    radial-gradient(42% 40% at 14% 22%,rgba(242,86,63,.13) 0%,transparent 64%),
    radial-gradient(30% 34% at 90% 80%,rgba(217,142,43,.1) 0%,transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16'%3E%3Cpath d='M3 12c8-9 16-9 24 0s16 9 24 0' fill='none' stroke='%23C8341C' stroke-width='2' stroke-linecap='round' opacity='.4'/%3E%3C/svg%3E");
  background-position:0 0,0 0,0 0,10% 85%;
  background-size:auto,auto,180px 180px,58px 16px;
}
#altre-porte::after{
  background-image:
    radial-gradient(36% 40% at 85% 78%,rgba(255,251,242,.5) 0%,transparent 60%),
    radial-gradient(30% 30% at 12% 18%,rgba(30,158,80,.09) 0%,transparent 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='40'%3E%3Cpath d='M12 4v22a6 6 0 0 1-12 0V10a4 4 0 0 1 8 0v16' fill='none' stroke='%236F6450' stroke-width='2.2' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");
  background-position:0 0,0 0,0 0,90% 20%;
  background-size:auto,auto,180px 180px,20px 34px;
}
@keyframes scena-deriva{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,1.5%,0) scale(1.1)}}
@media (prefers-reduced-motion: reduce){
  .banda-verde::after,.banda-corallo::after,#altre-porte::after{animation:none;transform:none}
}
@media (max-width:767px){
  .banda-verde::after,#guide-settore::after{background-size:auto,auto,140px 140px,0 0}
  .banda-corallo::after{background-size:auto,auto,140px 140px,0 0}
  #altre-porte::after{background-size:auto,auto,140px 140px,0 0}
}

/* ===== 5. Macchia d'inchiostro dietro una cifra chiave: acquerello (sfuma
   da sola via radial-gradient), non un blob a tinta piatta — quello si legge
   come sporco sullo schermo, non come inchiostro. ===== */
.scena-inchiostro{
  position:absolute;z-index:var(--z-fondo,0);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(217,142,43,.16) 0%,rgba(30,158,80,.08) 45%,transparent 72%);
}

/* ===== 6. Fondale acquerello (ondata 16/09, sostituisce .sfondo). Un livello
   solo per box (`.hero` da sola, `main` per tutte le sezioni sotto), primo
   figlio per l'hero e ultimo figlio per `main`: la posizione nel DOM è quello
   che lo fa dipingere SOPRA il colore opaco della banda e SOTTO `.container`
   (z-contenuto:1), non lo z-index da solo: vedi ESITO-MONTAGGIO §1. `inset:0`
   lo stira sull'altezza reale del box, sempre, senza nessun ricalcolo quando
   la pagina cambia altezza: e' lo stesso principio per cui la ripetizione
   verticale della direzione originale "non si rompe", solo che qui a coprire
   l'altezza intera non e' un mosaico di tessere ma un solo contenitore che
   segue il layout.
   `.fondale-img` e' l'immagine vera: parte piu' alta del contenitore
   (`top`/`bottom` negativi, scritti da regia.js con il margine esatto che
   serve al movimento) cosi' la parallasse ha spazio per scorrere senza mai
   scoprire un bordo. Senza JS (`prefers-reduced-motion` o CDN irraggiungibile)
   resta a `top:0;bottom:0`: ferma, a pieno formato, nessun margine da
   nascondere perche' non c'e' nessun movimento da coprire. */
/* Ondata 17/09/2026 (ESITO-FIGURE.md §2): stessa leva della texture qui
   sotto. Anche isolando SOLO il fondale (texture spenta) il punto piu'
   scuro sotto il testo mutato scendeva sotto soglia in alcune bande:
   misurato su #guide-settore, 4,92:1 col fondale spento contro 4,43:1
   acceso. `mix-blend-mode` va su QUESTO elemento (quello con `opacity`), non
   su `.fondale-img` dentro di lui: un elemento con `opacity<1` apre un suo
   contesto di stacking isolato, e un blend-mode scritto su un discendente
   dentro quel contesto si mescola con lo sfondo trasparente del contesto
   stesso (cioe' con niente), non con la banda vera dietro `.fondale` — non
   fa nulla, misurato: stessi numeri identici prima/dopo finche' non si e'
   spostato qui. */
.fondale{position:absolute;inset:0;z-index:var(--z-fondo,0);overflow:hidden;pointer-events:none;opacity:.1;mix-blend-mode:screen}
.fondale-img{
  position:absolute;left:0;right:0;top:0;bottom:0;
  background-image:url(fondale-cucitura-1.webp);
  background-repeat:no-repeat;background-size:100% 100%;
}
/* Misurato coi pixel veri (docs/qa/ondata-2026-09-16/montaggio/contrasto.mjs),
   fondale spento per isolare la causa: `#calcolatore`/`#guide-settore`
   (`.banda-verde::after`), `#chi-sono` (`.banda-corallo::after`), `#pdf` e
   `#altre-porte` (`#altre-porte::after`) sono GIA' sotto 4,5:1 di contrasto
   per il testo mutato PRIMA che il fondale ci entri: la causa e' la grana
   esistente di quelle bande (scena.css §1-2, non di questa ondata, non
   toccata), non l'immagine nuova. Sul fondale posso solo azzerare il MIO
   contributo, non il difetto di fondo: maschera a bassissima opacita' su
   quelle cinque fasce, piena su quelle sicure (`#come-funziona`, `#prezzi`,
   `#faq`, e l'hero che ha il suo elemento a parte). Percentuali = posizione
   delle sezioni dentro l'altezza di `main`, misurate a 1470 e 390px, con
   margine perche' un font in ritardo le sposta di poco. Vedi ESITO-MONTAGGIO
   §9 per i numeri completi, banda per banda. */
.fondale-pagina{
  mask-image:linear-gradient(to bottom,
    rgba(0,0,0,.25) 0% 14%, #000 16% 28%,
    rgba(0,0,0,.25) 30% 58%, #000 60% 90%,
    rgba(0,0,0,.25) 92% 100%);
  -webkit-mask-image:linear-gradient(to bottom,
    rgba(0,0,0,.25) 0% 14%, #000 16% 28%,
    rgba(0,0,0,.25) 30% 58%, #000 60% 90%,
    rgba(0,0,0,.25) 92% 100%);
}

/* ===== 7. Figure grandi in parallasse (ondata 17/09/2026, ESITO-FIGURE.md).
   Un tentativo precedente era stato bocciato da Bruce ("piazzate a caso e
   malamente"): mascotte piccole, messe a runtime da un algoritmo che
   cercava il piu' grande spazio vuoto di ogni sezione. Il difetto non era
   l'idea, erano due cose — piccole, e decise da un algoritmo. Regola di
   composizione, fissa, scritta qui una volta sola, MAI calcolata a runtime:

   1. Tre soggetti, uno per capitolo della pagina (fiducia/come-funziona,
      offerta/pdf, chiusura/faq) — non uno per sezione. Le altre sei bande
      (hero, calcolatore, chi-sono, guide-settore, prezzi, altre-porte)
      restano senza: il fondale acquerello di §6 e' gia' il racconto di
      sfondo continuo, queste figure sono l'accento in piu' su tre soli
      capitoli, non un secondo sistema ripetuto ovunque.
   2. Ogni figura esce da un bordo della pagina (sinistro o destro) — mai
      centrata in uno spazio vuoto, e mai dallo stesso lato occupato da
      un'illustrazione in primo piano gia' presente in quella sezione
      (misurato il 17/09: la moneta dietro la mascotte del calcolatore, sul
      suo stesso lato destro, leggeva come confusione, non come profondita').
      Il lato lo decide lo spazio libero della sezione, non un pattern fisso
      destra/sinistra/destra: qui e' sinistra (moneta), sinistra (barattolo,
      l'anteprima del PDF sta a destra), destra (numero). Tagliata dal bordo
      legge come un piano di fondo; intera in mezzo al vuoto legge come
      un'icona piazzata li', lo stesso difetto del tentativo bocciato.
   3. Posizione e dimensione sono scritte qui in CSS e nel markup delle tre
      sezioni, mai misurate o scelte da JS.
   4. Grandi davvero: 400-700px sul lato lungo a desktop (si vedono, non si
      cercano), scalate giu' sotto i 768px perche' non diventino ingombranti
      su un telefono.
   5. Sotto il contenuto (z-fondo, stesso livello del fondale) e sopra il
      colore della banda, opacita' di riposo bassa (10-18% a seconda del
      soggetto — la moneta piena, ora piu' grande e con un segno solo, regge
      il 18%; il numero in Fraunces no, vedi nota sotto — mai in competizione
      col testo) scritta qui: e' anche il valore che resta visibile, fermo,
      senza nessun JS (niente CDN, niente movimento,
      `prefers-reduced-motion`).
   6. Il movimento — parallasse piu' lenta del contenuto, dissolvenza in
      entrata/uscita — lo scrive regia.js con `scrub`, la stessa convenzione
      gia' in uso per il fondale di §6: un solo meccanismo per "cosa si
      muove con lo scroll" in tutta la pagina. ===== */
.figura-grande{
  position:absolute;z-index:var(--z-fondo,0);pointer-events:none;
  opacity:var(--figura-opacita,.14);
}
/* 1. Moneta (#come-funziona: il passo 3 dice "questo e' gruzzo tuo").
   SVG inline, due cerchi concentrici a inchiostro (il bordo della moneta)
   piu' un solo segno pieno dentro, un cuoricino: la stessa incisione delle
   monete gia' disegnate nelle illustrazioni della pagina, non un'invenzione
   nuova. Bordo SINISTRO: qui la colonna fissa dell'anteprima (`.steps-
   preview`) sta a destra, quindi e' il sinistro il lato libero — al
   contrario delle altre due figure, che escono a destra/sinistra in base
   allo stesso principio, non a un pattern fisso. Spostata qui dal
   giro di Bruce del 17/09: su #calcolatore stava dietro l'illustrazione
   della mascotte (stesso lato, due figure sullo stesso bordo leggono come
   confusione, non come profondita'), ed era troppo piccola/astratta per
   leggersi come moneta (un cerchio con dentro un asterisco = un mirino).
   Piu' grande e un segno solo risolvono entrambi i difetti insieme. */
.figura-moneta{
  --figura-opacita:.18;
  top:10%;left:-10%;width:clamp(280px,46vw,680px);aspect-ratio:1/1;
  color:var(--inchiostro-soft);
}
.figura-moneta circle{stroke:var(--inchiostro-soft)}
/* 2. Barattolo (#pdf, banda-oro: il gruzzo tasse). `mascotte-protegge.webp`,
   asset gia' in repo, mai referenziato altrove in pagina: colori suoi,
   nessun filtro. Bordo sinistro, alterna la moneta. */
.figura-barattolo{
  --figura-opacita:.15;
  bottom:-4%;left:-8%;width:clamp(240px,40vw,560px);height:auto;
}
/* 3. Numero (#faq, chiusura/obiezioni: le scadenze, corallo). Testo vero in
   Fraunces, non un'immagine: "30" come il 30 giugno del titolo e i 30.000 €
   dell'esempio due paragrafi sotto. Bordo destro, torna sullo stesso lato
   della moneta perche' il barattolo fra i due ha gia' alternato.
   `top:-4%` e opacita' .14 (primo tentativo) misuravano 4,11:1 sotto soglia:
   il glifo cadeva nella fascia dei primi 130px della sezione, dove
   `#faq::before` (§1, mix-blend-mode:multiply) scurisce gia' per conto suo,
   ed era anche il piu' grande e il piu' acceso dei tre. Spostato sotto quella
   fascia (`top:7%`), rimpicciolito e all'opacita' piu' bassa del gruppo
   (.10, sotto il 12% di partenza: qui la leggibilita' del testo vince sulla
   coerenza col resto). Misurato dopo: 4,63:1 a 1470px, 4,63:1 a 390px. */
.figura-numero{
  --figura-opacita:.10;
  top:7%;right:-6%;margin:0;
  font-family:'Fraunces',serif;font-weight:650;line-height:.8;
  font-size:clamp(200px,30vw,460px);color:var(--corallo);
  user-select:none;
}
@media (max-width:767px){
  .figura-moneta{top:6%;left:-18%}
  .figura-barattolo{bottom:-2%;left:-14%}
  .figura-numero{top:10%;right:-10%}
}