/* schede-cometa 0.1.2 da dialogicom-ai 25a2c31b */
/* schede-cometa 0.1.2
   Schede che salgono e si sovrappongono allo scorrimento. Va insieme a schede-cometa.js.
   Markup: un contenitore [data-sc-pila] con figli diretti [data-sc-scheda]. Ciò che sta fuori
   dal contenitore non viene toccato. Senza JavaScript le schede restano nel flusso normale
   (con angoli e ombra); lo script aggiunge .sc-attiva al contenitore e calcola --sc-fermo.

   Parametri (variabili CSS, da scrivere sul contenitore o più in alto):
     --sc-margine-alto            distanza dal bordo alto dello schermo a cui la scheda si ferma
                                  (24px su computer, 0 su telefono)
     --sc-margine-lato-telefono   margine a destra e a sinistra delle schede su telefono (6px)
     --sc-raggio                  raggio degli angoli (16px)
     --sc-ombra                   ombra delle schede (leggera, verso l'alto e verso il basso)
     --sc-cometa-rientro          px fra il bordo della scheda e il tracciato della cometa (10px,
                                  da 0 a 40; data-sc-cometa-rientro vale di più)
   «Telefono» qui vuol dire larghezza fino a 760px. */

/* Le lunghezze registrate arrivano allo script già in pixel (anche se scritte in rem o vh) */
@property --sc-margine-alto { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --sc-margine-lato-telefono { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --sc-raggio { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --sc-cometa-rientro { syntax: '<length>'; inherits: true; initial-value: 10px; }

/* Predefiniti con specificità zero: qualunque regola del sito li sostituisce */
:where([data-sc-pila]) {
  --sc-margine-alto: 24px;
  --sc-margine-lato-telefono: 6px;
  --sc-raggio: 16px;
  --sc-ombra: 0 -8px 28px rgba(0, 0, 0, .06), 0 14px 40px rgba(0, 0, 0, .08);
  /* flow-root: i margini delle schede restano dentro il contenitore */
  display: flow-root;
  position: relative;
}
@media (max-width: 760px) {
  :where([data-sc-pila]) { --sc-margine-alto: 0px; }
}

:where([data-sc-pila]) > :where([data-sc-scheda]) {
  border-radius: var(--sc-raggio);
  box-shadow: var(--sc-ombra);
}
/* su telefono i margini laterali li dà il pacchetto: il sito li regola con la variabile */
@media (max-width: 760px) {
  [data-sc-pila] > [data-sc-scheda] {
    margin-left: var(--sc-margine-lato-telefono);
    margin-right: var(--sc-margine-lato-telefono);
  }
}

/* Con lo script: ogni scheda si ferma a --sc-fermo (vedi schede-cometa.js), una sopra l'altra.
   Lo script scrive --sc-indice (1, 2, 3...) per l'ordine di sovrapposizione e, sull'ultima
   scheda (.sc-ultima), --sc-minimo: alta quanto basta per salire fino al suo posto. */
[data-sc-pila].sc-attiva > [data-sc-scheda] {
  position: sticky;
  top: var(--sc-fermo, var(--sc-margine-alto));
  z-index: var(--sc-indice, auto);
  transform-origin: 50% 0;
}
[data-sc-pila].sc-attiva > [data-sc-scheda].sc-ultima { min-height: var(--sc-minimo, 0px); }
/* solo per un istante, dentro lo script: misura le posizioni delle schede nel flusso */
[data-sc-pila].sc-attiva.sc-misura > [data-sc-scheda] { position: relative; top: 0; transform: none !important; }

/* La cometa (la crea lo script): un SVG dentro ogni scheda, sopra il bordo, che non riceve clic e
   non si legge. Colori: --sc-cometa-inizio (vicino alla testa), --sc-cometa-meta (anche la linea
   che resta accesa), --sc-cometa-fine (fondo della scia), --sc-cometa-testa; oppure un colore solo
   per tutto con --sc-cometa-colore (--sc-cometa-metà vale come --sc-cometa-meta). Si possono
   scrivere anche su una sola scheda. Niente filtri CSS sulla cometa: fanno scattare lo scorrimento. */
:where([data-sc-pila]) {
  --sc-cometa-inizio: #f5d27a;
  --sc-cometa-meta: #d4a640;
  --sc-cometa-fine: #a8792a;
  --sc-cometa-testa: #fff8ec;
}
[data-sc-scheda] > .sc-cometa { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; }
.sc-cometa { overflow: visible; pointer-events: none; visibility: hidden; }
.sc-cometa.sc-in-corsa, .sc-cometa.sc-completa { visibility: visible; }
.sc-cometa path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* stroke-opacity e non opacity: l'opacità di un elemento costa un livello in più a ogni disegno */
.sc-cometa-accesa { stroke-opacity: .85; }
.sc-cometa-coda { stroke-opacity: .35; }
.sc-cometa-coda, .sc-cometa-testa, .sc-cometa-alone, .sc-cometa-riflessi { transition: opacity .4s ease; }
.sc-cometa.sc-completa :is(.sc-cometa-coda, .sc-cometa-testa, .sc-cometa-alone, .sc-cometa-riflessi) { opacity: 0; }
/* data-sc-cometa-riposo="no": a giro finito si spegne anche la linea accesa */
.sc-cometa-linea { transition: opacity .4s ease; }
.sc-cometa.sc-completa.sc-senza-riposo .sc-cometa-linea { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .sc-cometa { display: none; }
}