/* ==========================================================================
   Text animations for the inner pages (text-anim.js). The script tags each
   element with .tx and an effect, splits headings into words, and adds
   .tx-in when the element comes into view. Nothing is hidden until the
   script has run, and nothing moves for visitors who prefer reduced motion.
   ========================================================================== */

/* Words rise out of a mask, one after another. */
.tx-w { display: inline-block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; vertical-align: top; }
.tx-w > span { display: inline-block; }
.tx--words .tx-w > span { transform: translateY(108%) rotate(3deg); transition: transform .95s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--wi) * 55ms); }
.tx--words.tx-in .tx-w > span { transform: none; }

/* Words sharpen out of a blur. */
.tx--blur .tx-w { overflow: visible; }
.tx--blur .tx-w > span { opacity: 0; filter: blur(10px); transform: translateY(.35em); transition: opacity .8s, filter .8s, transform .8s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--wi) * 45ms); }
.tx--blur.tx-in .tx-w > span { opacity: 1; filter: none; transform: none; }

/* Gradient text (background-clip: text) carried into each word. */
.tx-clip .tx-w, .tx-clip .tx-w > span { background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Fade, and fade with a short rise. */
.tx--fade { opacity: 0; transition: opacity 1s ease; transition-delay: var(--td, 0s); }
.tx--fade-up { opacity: 0; transform: translateY(1.4rem); transition: opacity .9s ease, transform .9s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--td, 0s); }
.tx--fade.tx-in, .tx--fade-up.tx-in { opacity: 1; transform: none; }

/* Small labels: fade in while the letter spacing settles. */
.tx--track { opacity: 0; letter-spacing: .6em; transition: opacity .9s ease, letter-spacing 1.1s cubic-bezier(.22, 1, .36, 1); }
.tx--track.tx-in { opacity: 1; letter-spacing: var(--ls, .16em); }

/* Wipe in from the left. */
.tx--clip { clip-path: inset(-20% 100% -20% 0); transition: clip-path 1.2s cubic-bezier(.65, 0, .35, 1); transition-delay: var(--td, 0s); }
.tx--clip.tx-in { clip-path: inset(-20% -5% -20% -5%); }

/* Scroll fill: words brighten one by one as the paragraph scrolls past. */
.tx--fill .tx-w { overflow: visible; }
.tx--fill .tx-w > span { opacity: .18; transition: opacity .35s ease; }
.tx--fill .tx-w.is-lit > span { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .tx-w > span, .tx--fade, .tx--fade-up, .tx--track, .tx--clip { opacity: 1 !important; filter: none !important; transform: none !important; clip-path: none !important; transition: none !important; }
    .tx--fill .tx-w > span { opacity: 1; }
}