/* ============================================================
   Reveal Text — replica of Framer Marketplace "Reveal Text"
   (Kaniyan Ahmad). Measured from text-reveal-on-scroll.framer.website.
   See SPEC.md.

   The scrub is one custom property per frame, not one style write per
   character: --rt-p carries 0..1 and each unit derives its own alpha in
   calc(). 200 units cost one property write.
   ============================================================ */

@property --rt-p {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

.revealtext {
  --rt-p: 0;              /* scroll progress, written by JS */
  --rt-n: 1;              /* number of units */
  --rt-ink: 0 0 0;        /* revealed colour, as an rgb triplet */
  --rt-dim: 0.1;          /* resting alpha (measured) */

  margin: 0;
  font-size: clamp(32px, 5.2vw, 66px);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: rgb(var(--rt-ink) / var(--rt-dim));
}

/* alpha = dim + (1 - dim) * clamp(0, p*n - i, 1)
   Contiguous windows, no overlap: exactly one unit is ever mid-fade,
   which is what the reference does. */
.revealtext__u {
  --rt-i: 0;
  color: rgb(var(--rt-ink) / clamp(
    var(--rt-dim),
    calc(var(--rt-dim) + (1 - var(--rt-dim)) * (var(--rt-p) * var(--rt-n) - var(--rt-i))),
    1
  ));
  transition: none;
}

/* Word mode keeps whole words from breaking across lines mid-reveal. */
.revealtext--word .revealtext__u { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  /* No scrubbing: show the finished text. */
  .revealtext__u { color: rgb(var(--rt-ink) / 1); }
}