/* ───────────────────────────────────────────────────────────────────────────
   Cursor-tracking glow
   A mark sits dimmed until the pointer crosses it, then lights from within,
   brightest nearest the cursor. Works on any SVG artwork.

   Markup shape (see demo.html):
     <a data-glow-logo class="glow-logo">
       <svg><defs><g id="mark">…artwork…</g></defs><g class="base"><use href="#mark"/></g></svg>
       <span class="lit"><svg><use href="#mark"/></svg></span>
     </a>

   Two copies of the SAME artwork, one dim and one lit. Do not try to do this
   with a single copy and a filter — you need the dim layer to stay visible
   underneath so the mark never disappears where the light isn't.
   ─────────────────────────────────────────────────────────────────────────── */

.glow-logo {
  /* set by glow-logo.js — pointer position within the element, and a 0–1 gate */
  --gx: -999px;
  --gy: -999px;
  --gon: 0;

  /* tune these */
  --glow-radius: 90px;   /* size of the lit pool that follows the cursor */
  --glow-color: #FFFFFF; /* colour of both the mark and its bloom */
  --dim: 0.55;           /* resting brightness, 0–1 */
  --glow-fade: 0.35s;    /* how fast the effect wakes and sleeps */

  position: relative;
  display: inline-block;
  line-height: 0;
  isolation: isolate;
}

.glow-logo svg { display: block; width: 100%; height: auto; }

/* layer 1 — the mark at rest */
.glow-logo .base {
  fill: var(--glow-color);
  opacity: var(--dim);
  transition: opacity var(--glow-fade) ease;
}

/* layer 2 — the bloom.
   The filter lives on this wrapper, which is deliberately NOT masked. A CSS
   mask only paints inside its own border box, so masking and filtering the
   same element clips the blur into a hard rectangle at the element's edges.
   Splitting them lets the glow spill past the artwork the way real light does. */
.glow-logo .lit {
  position: absolute;
  inset: 0;
  opacity: var(--gon);
  filter: drop-shadow(0 0 5px var(--glow-color)) drop-shadow(0 0 14px var(--glow-color));
  transition: opacity var(--glow-fade) ease;
  pointer-events: none;
}

/* …and the inner copy carries the mask, so only the letterforms nearest the
   cursor are handed to the blur above. */
.glow-logo .lit svg {
  fill: var(--glow-color);
  -webkit-mask-image: radial-gradient(circle var(--glow-radius) at var(--gx) var(--gy),
                      #000 0%, rgba(0, 0, 0, 0.7) 40%, transparent 75%);
          mask-image: radial-gradient(circle var(--glow-radius) at var(--gx) var(--gy),
                      #000 0%, rgba(0, 0, 0, 0.7) 40%, transparent 75%);
}

/* ── State handoff ──────────────────────────────────────────────────────────
   Add .glow-off to any ancestor when the mark sits on a background the glow
   can't read against — the classic case is a sticky nav that inverts from dark
   to light on scroll. A white glow on a white bar is invisible, and recolouring
   it to match the new background reads as a smudge rather than as light, so the
   honest move is to drop the effect and show the mark solid. */
.glow-off .glow-logo { --dim: 1; }
.glow-off .glow-logo .lit { opacity: 0; }

/* ── Fallbacks ──────────────────────────────────────────────────────────────
   With no pointer there is nothing to track, so without this a touch visitor
   would see the mark stuck at partial opacity forever — it would just look
   like a rendering bug. Same reasoning for reduced-motion. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .glow-logo { --dim: 1; }
  .glow-logo .lit { display: none; }
}