/* ═══════════════════════════════════════════════════════════════════════════
   solo.css — effetti che si muovono DA SOLI: nessuno scroll, nessun mouse.

   Terza famiglia della libreria, accanto a scorre (movimento comandato dallo
   scorrimento) e punta (movimento comandato dal puntatore). Qui il movimento è
   continuo: parte al caricamento e non si ferma.

   Proprio per questo va dosato: due di questi in una pagina sono un accento,
   quattro sono un luna park. E tutti si spengono con prefers-reduced-motion,
   dove un loop perpetuo è la cosa che dà più fastidio.

   Nessun colore, nessun font: solo movimento e ingombri.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── scritta — la fila di testo che scorre senza fine ─────────────────────
   Il contenuto viene duplicato dal JS finché non copre due volte la larghezza
   dello schermo, così la coda rientra dalla testa e la giunta non si vede.
   La fila resta leggibile e selezionabile: è testo vero, non un'immagine. */
[data-solo="scritta"] { overflow: hidden; }
[data-solo="scritta"] .solo-fila {
  display: flex; align-items: center; width: max-content;
  gap: var(--solo-passo, 2rem);
  will-change: transform;
}
[data-solo="scritta"] .solo-fila > * { flex: none; }
/* Le copie servono all'occhio, non a chi ascolta la pagina */
[data-solo="scritta"] .solo-copia { user-select: none; }

/* ── ruota — la parola che cambia dentro un titolo ────────────────────────
   Le parole stanno tutte nella stessa cella di griglia: sovrapposte, quindi
   niente salti di riga. Il contenitore prende la larghezza di quella attiva e
   la insegue con una transizione, così la frase intorno si riassesta senza
   strappi. Le parole in attesa restano nel documento — chi legge con lo
   schermo vocale le sente tutte, e sono tutte vere anche per la ricerca. */
[data-solo="ruota"] {
  display: inline-grid; vertical-align: bottom;
  overflow: hidden; text-align: left;
  /* senza questo ogni parola si stira alla larghezza della griglia, e misurarla
     restituirebbe sempre lo stesso numero: il contenitore non si riassesterebbe */
  justify-items: start;
  transition: width var(--solo-riassesto, 420ms) cubic-bezier(.22,1,.36,1);
}
[data-solo="ruota"] > * {
  grid-area: 1 / 1; white-space: nowrap;
  transition: opacity var(--solo-cambio, 460ms) cubic-bezier(.22,1,.36,1),
              transform var(--solo-cambio, 460ms) cubic-bezier(.22,1,.36,1);
}
[data-solo="ruota"] > :not(.solo-viva) { opacity: 0; pointer-events: none; }

/* La parola esce e la successiva entra dallo stesso verso: sembra un rullo.
   `scorri` è il verso predefinito; gli altri due si scelgono con data-fx.   */
[data-solo="ruota"][data-fx="scorri"] > *,
[data-solo="ruota"]:not([data-fx]) > * { transform: translateY(100%); }
[data-solo="ruota"][data-fx="scorri"] > .solo-viva,
[data-solo="ruota"]:not([data-fx]) > .solo-viva { transform: none; }
[data-solo="ruota"][data-fx="scorri"] > .solo-uscita,
[data-solo="ruota"]:not([data-fx]) > .solo-uscita { transform: translateY(-100%); }

[data-solo="ruota"][data-fx="zoom"] > * { transform: scale(.86); }
[data-solo="ruota"][data-fx="zoom"] > .solo-viva { transform: none; }
[data-solo="ruota"][data-fx="zoom"] > .solo-uscita { transform: scale(1.14); }

[data-solo="ruota"][data-fx="dissolvenza"] > * { transform: none; }

/* ── traccia — un segno SVG che si disegna e poi si cancella ────────────── */
[data-solo="traccia"] .solo-tratto {
  stroke-dasharray: 0 1;
  stroke-dashoffset: 0;
  animation: solo-traccia-disegna var(--solo-traccia-giro, 4.8s) linear infinite,
             solo-traccia-cancella var(--solo-traccia-giro, 4.8s) linear infinite;
  animation-play-state: paused;
}
[data-solo="traccia"].solo-attiva .solo-tratto { animation-play-state: running; }
@keyframes solo-traccia-disegna {
  0% { stroke-dasharray: 0 1; }
  48%, 100% { stroke-dasharray: 1 0; }
}
@keyframes solo-traccia-cancella {
  0%, 52% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1; }
}

/* ── Chi ha chiesto meno movimento ────────────────────────────────────────
   La scritta si ferma dov'è e diventa una fila che si trascina col dito; la
   parola resta la prima e non cambia più. Nessuna delle due sparisce. */
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  [data-solo="scritta"] .solo-fila {
    transform: none !important; width: auto; overflow-x: auto;
  }
  [data-solo="ruota"] { transition: none; }
  [data-solo="ruota"] > * { transition: none; transform: none !important; }
  [data-solo="traccia"] .solo-tratto {
    animation: none;
    stroke-dasharray: 1 0;
    stroke-dashoffset: 0;
  }
}

/* ── fonde — due parole sovrapposte e un filtro a soglia ──────────────────
   Il filtro sta sul contenitore, non sulle singole parole: è passandole
   insieme che le due sfocature si saldano nel ponte di gelatina. Applicarlo
   a ciascuna darebbe solo due parole sfocate una sull'altra. */
.solo-fonde {
  position: relative; display: inline-grid;
  filter: url(#solo-fonde);
}
.solo-fonde .solo-goccia {
  grid-area: 1 / 1; white-space: nowrap; will-change: filter, opacity;
}
#solo-soglia { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .solo-fonde { filter: none; }
  .solo-fonde .solo-goccia:nth-child(2) { display: none; }
}