/* FX contract surfaces — js/text-fx.js. Provenance: ~/design-library/kits/
   landonorris/components.md §7 (oval reveal), §8 (text-hover), §11 (image
   highlight); numbers cited in text-fx.js's own header. No reduced-motion
   overrides needed here — text-fx.js no-ops every effect under
   prefers-reduced-motion (no split, no injected elements), so the plain
   static markup already IS the final state. */

/* §8 text-hover — .fx-word keeps a word from breaking mid-character across a
   line wrap; .fx-char carries the text-shadow "clone" (see text-fx.js header
   for how this reproduces QE's swap with one set of characters, no DOM clone):
   a duplicate glyph drawn --fx-offset (one line-height, measured in JS) below
   the real one, invisible until .fx-hover-mask's overflow:hidden stops
   clipping it — i.e. until the real glyph's own y:-100% carries the shadow up
   into view as it carries the real glyph out. */
.fx-word{ display:inline-block; }
.fx-char{ display:inline-block; }
/* text-shadow clone scoped to .fx-hover-mask ONLY — .fx-char is shared with
   §7 oval-reveal (same splitWordsChars helper), which has no per-char clipping
   mask of its own (only .fx-oval-outer's box-level overflow:clip). An
   unscoped rule here bled the shadow "clone" into oval-reveal too: a
   single-line heading happened to clip it away by luck (the outer box is
   short), but a heading whose split lines get grouped together (anything
   wider than one .fx-line per group) showed it as a duplicate-text ghost
   sitting on the line below — found + root-caused against work/*.html's
   two-line titles, see evals/build-notes.md "v5 work pages" §2. */
.fx-hover-mask .fx-char{ text-shadow:0 var(--fx-offset, 1em) currentColor; }
.fx-hover-mask{ display:inline-block; overflow:hidden; }

/* §7 oval reveal — .fx-line is one detected visual line (js/text-fx.js
   groupLines); .fx-oval-wrap is the per-line clip-path mask (source's
   "oval-line-clip-wrap"); .fx-oval-outer is the single overflow:clip context
   for all of them (source's "oval-outer-wrapper"). */
.fx-line{ display:block; }
.fx-oval-wrap{ display:block; }
.fx-oval-outer{ display:block; overflow:clip; }

/* §11 image highlight — one drawn accent bar on the given edge; see
   text-fx.js header for why this is a line, not fJ's full-image colour wipe. */
.fx-highlight-line{
  position:absolute; left:0; width:100%; height:2px;
  transform-origin:left center; pointer-events:none;
}