/* ───────────────────────────────────────────────────────────────────────────
   Cursor-tracking glow — text
   Sibling of glow-logo/, same idea applied to live HTML text instead of SVG
   artwork. The text stays real: selectable, searchable, translatable, and it
   reflows and wraps exactly as it would without the effect.

   Markup: just add the attribute. glow-text.js builds both layers for you.
     <h1 data-glow-text>Stop renting for as little as $400 down</h1>

   The script wraps your content in a dim base layer and clones it into an
   aria-hidden lit layer, so you write the copy once and assistive tech only
   ever encounters it once.
   ─────────────────────────────────────────────────────────────────────────── */

[data-glow-text] {
  /* set by glow-text.js */
  --gx: -999px;
  --gy: -999px;
  --gon: 0;

  /* tune these */
  --glow-radius: 160px;  /* wider than the logo default — a headline covers more ground */
  --glow-color: #FFFFFF;
  --dim: 0.55;
  --glow-fade: 0.35s;

  position: relative;
  color: var(--glow-color);
  isolation: isolate;
}

/* layer 1 — your text at rest */
.glow-text-base {
  display: block;
  opacity: var(--dim);
  transition: opacity var(--glow-fade) ease;
}

/* layer 2 — the bloom wrapper. Deliberately NOT masked: a CSS mask only paints
   inside its own border box, so masking and filtering the same element clips
   the glow into a hard rectangle at the text block's edges. */
.glow-text-lit {
  position: absolute;
  inset: 0;
  opacity: var(--gon);
  filter: drop-shadow(0 0 6px var(--glow-color)) drop-shadow(0 0 18px var(--glow-color));
  transition: opacity var(--glow-fade) ease;
  pointer-events: none;
  user-select: none;
  color: var(--glow-color);
}

/* …and the inner clone carries the mask, so only the glyphs near the cursor
   get handed to the blur above. */
.glow-text-lit > .glow-text-lit-i {
  display: block;
}

.glow-text-lit > .glow-text-lit-i {
  -webkit-mask-image: radial-gradient(circle var(--glow-radius) at var(--gx) var(--gy),
                      #000 0%, rgba(0, 0, 0, 0.7) 42%, transparent 78%);
          mask-image: radial-gradient(circle var(--glow-radius) at var(--gx) var(--gy),
                      #000 0%, rgba(0, 0, 0, 0.7) 42%, transparent 78%);
}

/* ── State handoff ──
   Add .glow-off to an ancestor when the background changes underneath — see
   glow-logo's README for why standing down beats recolouring the glow. */
.glow-off [data-glow-text] { --dim: 1; }
.glow-off [data-glow-text] .glow-text-lit { opacity: 0; }

/* ── Fallbacks ──
   Without this a touch visitor gets a headline stuck at 55% opacity forever,
   which reads as a rendering bug rather than as a missing enhancement. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  [data-glow-text] { --dim: 1; }
  [data-glow-text] .glow-text-lit { display: none; }
}