/* ==========================================================================
   Texium Scroll Reveal Text
   Words start blurred and faint, then sharpen as the block is scrolled
   through. theme.js drives it by toggling .is-revealed per word, so the
   effect is scrubbed to scroll position rather than played once.
   Consumes design tokens from theme.css only.
   ========================================================================== */

.texium-scroll-text-wrap {
  position: relative;
}

.texium-scroll-text {
  /* Overridden per-instance by the widget's Elementor controls. */
  --texium-scroll-text-blur: 8px;
  --texium-scroll-text-dim: 0.15;
  --texium-scroll-text-rise: 6px;
  --texium-scroll-text-speed: 320ms;

  margin: 0;
  /* Words are inline-block, so normal word spacing would be inconsistent
     once each carries its own transform; a fixed gap keeps the rhythm. */
  line-height: 1.45;
}

.texium-scroll-text__word {
  display: inline-block;
  opacity: var(--texium-scroll-text-dim);
  filter: blur(var(--texium-scroll-text-blur));
  transform: translateY(var(--texium-scroll-text-rise));
  transition:
    opacity var(--texium-scroll-text-speed) var(--texium-ease-out),
    filter var(--texium-scroll-text-speed) var(--texium-ease-out),
    transform var(--texium-scroll-text-speed) var(--texium-ease-out),
    color var(--texium-scroll-text-speed) var(--texium-ease-out);
}

.texium-scroll-text__word.is-revealed {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* ---- No JS ----
   Without the script no word ever gets .is-revealed, so the paragraph
   would stay unreadable. Show it plainly instead. */

html:not(.texium-js) .texium-scroll-text__word {
  opacity: 1;
  filter: none;
  transform: none;
}

/* ---- Reduced motion ----
   The blur is the motion here, so drop it entirely and show the text. */

@media (prefers-reduced-motion: reduce) {
  .texium-scroll-text__word,
  .texium-scroll-text__word.is-revealed {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}