/**
 * NetzdienstFX – Buchstaben-Reveal: Basis-Struktur
 * -----------------------------------------------------
 * Timing/Distanz als CSS-Custom-Properties auf .text-reveal-chars selbst (vererben sich
 * auf die Buchstaben-Spans) – in der Kunden-styles.css mit einer einzigen Regel
 * überschreibbar, z.B.:
 *   .text-reveal-chars { --reveal-distance: 30px; --reveal-duration: 0.3s; }
 *
 * "Geschwindigkeit" hat zwei getrennte Stellschrauben:
 *   - data-reveal-stagger (Attribut, siehe text-reveal.js): Zeit ZWISCHEN den Buchstaben
 *   - --reveal-duration (hier): Dauer, die JEDER einzelne Buchstabe für sein Fade/Slide braucht
 *
 * Wörter sollen normalerweise ganz normal umbrechen können (inline-block + nowrap hält
 * nur EIN Wort zusammen). Für "jedes Wort auf eigener Zeile" (z.B. große Headlines) in
 * der Kunden-CSS einfach überschreiben:
 *   .text-reveal-word { display: block; }
 */
.text-reveal-chars {
  --reveal-distance: 20px;
  --reveal-duration: 0.8s;
  --reveal-easing: ease-out;
}

.text-reveal-word {
  display: inline-block;
  white-space: nowrap;
}

.text-reveal-chars .text-reveal-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--reveal-easing),
              transform var(--reveal-duration) var(--reveal-easing);
}

.text-reveal-chars.is-revealed .text-reveal-char {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .text-reveal-chars .text-reveal-char {
    opacity: 1;
    transform: none;
    transition: none;
  }
}