/*
 * text-scramble (CSS) — companion to text-scramble.js.
 *
 * This file carries the MECHANIC only. The look — font, colour, uppercase,
 * tracking — belongs to the host, so the heading can be styled in Webflow like
 * any other heading. The JS reads the element's computed styles (color, font,
 * letter-spacing, text-align) to render the canvas glitch, so whatever the host
 * sets is what the glitch uses. The demo page keeps the MW4 look (amber,
 * uppercase, wide tracking, Hitmarker) in a local block next to its
 * text-scramble.css link.
 *
 * A proportional face like Hitmarker is fine: the random glyphs churn at
 * slightly varying widths, the canvas clips to the final word's box, so that
 * reads as part of the glitch and never shifts layout — the real DOM text holds
 * the width the whole time.
 *
 * The corruption/slice/grid glitch is drawn on a canvas overlay by the JS,
 * not in CSS. [data-fx-running] marks the churn phase; [data-fx-active] the
 * settled end state.
 */

[data-fx-scramble] {
  /* Reserve the line height even while blanked pre-trigger, so nothing jumps. */
  min-height: 1em;
}