/* Kodza — Scroll Text Reveal
   Words light up one after the other as the paragraph scrolls through the screen,
   and dim again when you scroll back. The motion follows the scroll, it never plays on its own.
   Three styles, picked with data-reveal: (default) fade, "blur" and "rise".
   Everything is tuned with the --kz-reveal-* variables. */
.kodza-scroll-reveal {
  --kz-reveal-dim: 0.16;
  --kz-reveal-blur: 10px;
  --kz-reveal-rise: 0.45em;
}

.kodza-scroll-reveal__word {
  display: inline-block;
  opacity: calc(var(--kz-reveal-dim) + (1 - var(--kz-reveal-dim)) * var(--w, 1));
}

.kodza-scroll-reveal[data-reveal="blur"] .kodza-scroll-reveal__word {
  filter: blur(calc((1 - var(--w, 1)) * var(--kz-reveal-blur)));
}

.kodza-scroll-reveal[data-reveal="rise"] .kodza-scroll-reveal__word {
  transform: translateY(calc((1 - var(--w, 1)) * var(--kz-reveal-rise)));
}

@media (prefers-reduced-motion: reduce) {
  .kodza-scroll-reveal__word {
    opacity: 1;
    filter: none !important;
    transform: none !important;
  }
}