/* ============================================================
   MALSCH ITALIA — «testo che cambia colore allo scroll»
   Le parole di un blocco .scroll-color passano dal grigio spento
   al testo pieno, una dopo l'altra, legate alla posizione di scroll.

   REGOLA DI SICUREZZA: il grigio spento si applica SOLO sotto
   .is-split, cioè solo dopo che il JS ha diviso il testo in parole.
   Senza JS (o con GSAP non caricato) il paragrafo resta al suo
   colore normale: mai testo illeggibile per un file che non parte.

   Restano validi i vincoli del design system: nessun'ombra,
   nessun raggio, nessuna icona; il colore resta nella quota del 5%
   (due neutri della palette, nessuna tinta nuova).
   ============================================================ */

.scroll-color {
  /* Punto di partenza e di arrivo: entrambi token esistenti.
     --color-text-soft ha 5,1:1 su bianco, quindi anche le parole
     non ancora "accese" restano leggibili in WCAG AA. Un grigio
     più chiaro sarebbe più spettacolare e meno accessibile.
     Un blocco può derogare ridefinendo le due variabili in locale
     (es. --sc-to: var(--color-brand-dark) su fondo chiaro). */
  --sc-from: var(--color-text-soft);
  --sc-to: var(--color-text);
}

/* Il grigio di partenza vive sulla parola, non sul paragrafo:
   così GSAP anima una proprietà già impostata su ogni span e non
   deve ereditare nulla a metà tween. */
.scroll-color.is-split .sc-w {
  color: var(--sc-from);
}

/* Nessun display:inline-block: le parole restano inline, così la
   sillabazione, l'a capo e la selezione del testo si comportano
   esattamente come prima dello split. */
.scroll-color .sc-w {
  /* La transizione la guida GSAP con lo scrub: niente transition CSS,
     altrimenti le due si accavallano e il colore "insegue" lo scroll. */
  transition: none;
}

/* I link dentro un blocco animato tengono il loro colore: sono
   navigazione, non testo di scena. Il JS infatti non li divide, così
   il tween non li tocca mai. */
.scroll-color a {
  color: var(--color-brand-dark);
}

/* Chi ha chiesto meno movimento vede il testo già acceso: il JS non
   fa nemmeno lo split, ma la regola resta come rete di sicurezza. */
@media (prefers-reduced-motion: reduce) {
  .scroll-color.is-split .sc-w {
    color: var(--sc-to);
  }
}