/* ==========================================================
   MAREA NEL TESTO — componente isolato · CSS (v4, pigmento nell'acqua)
   Uso: <h1 data-marea>…</h1> + marea.js. Palette: --marea-1/2/3 definite dal sito o dalla sezione.
   Il JS imposta solo background-image (un canvas 96×40 ridisegnato ogni frame) e la classe .marea-on. A riposo: classe rimossa, testo normale.
   Degrada a testo normale senza JS, su touch o senza background-clip:text. Con prefers-reduced-motion resta attiva in modalità
   "calma" (marea.js): il pigmento affiora solo sotto il puntatore, senza moto autonomo.
   Vincolo: l'elemento non deve avere figli animati mentre è in hover (background-clip:text non li attraversa).
   ========================================================== */
[data-marea]{width:fit-content;max-width:100%} /* il riquadro abbraccia il testo: il gesto è letto sulle lettere, non sullo spazio vuoto */
[data-marea].marea-on{background-size:100% 100%;background-repeat:no-repeat;background-position:0 0;image-rendering:auto;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
[data-marea].marea-on *{color:transparent;-webkit-text-fill-color:transparent}
/* (nessuna disattivazione CSS con prefers-reduced-motion: la modalità calma è gestita da marea.js) */

/* ---------- MAREA FIAMMATA (preset autonomo, senza puntatore) ----------
   La parola ha dentro una materia che sale. Non è una simulazione: marea.js disegna UNA VOLTA due tessiture
   di pigmento ripetibili in verticale (stessa palette e stessa regola "materia non luce" dell'engine interattivo)
   e da lì in poi il movimento è solo background-position — nessun frame JS, nessun canvas per frame.
   Due strati con tessitura e passo diversi (uno percorre una piastrella per ciclo, l'altro due) si sfasano
   di continuo: il ritorno non si legge come loop. La deviazione laterale è nei fotogrammi intermedi.
   Sopra tutto, un velo nel colore di riposo che spegne il pigmento salendo: la materia si assottiglia in alto.
   Fuori viewport o a scheda nascosta site.js mette .anim-off e l'animazione si ferma. */
[data-marea="fiammata"]{display:inline-block}
[data-marea="fiammata"].marea-on{animation:fiamma calc(var(--motion)*var(--fi-t,23s)) linear infinite}
@keyframes fiamma{
  0%  {background-position:var(--fi-gp), var(--fi-x) 0, var(--fi-x) 0}
  25% {background-position:var(--fi-gp), calc(var(--fi-x) + 3px) calc(var(--fi-b)*-.5), calc(var(--fi-x) - 2px) calc(var(--fi-a)*-.25)}
  50% {background-position:var(--fi-gp), calc(var(--fi-x) - 2px) calc(var(--fi-b)*-1), calc(var(--fi-x) + 2px) calc(var(--fi-a)*-.5)}
  75% {background-position:var(--fi-gp), calc(var(--fi-x) + 2px) calc(var(--fi-b)*-1.5), calc(var(--fi-x) - 3px) calc(var(--fi-a)*-.75)}
  100%{background-position:var(--fi-gp), var(--fi-x) calc(var(--fi-b)*-2), var(--fi-x) calc(var(--fi-a)*-1)}
}