/* ───────────────────────────────────────────────────────────────────────────
   Cursor-tracking glow — raster image
   Third sibling of glow-logo/ and glow-text/. Those two light artwork by
   painting a colour through a mask; that works because SVG paths and glyphs
   take their colour from CSS. A photograph does not — you cannot recolour it
   from the outside without destroying it.

   So this one lifts the image instead: a second copy of the same picture,
   brightened and slightly saturated, is masked to a pool that follows the
   pointer. The effect reads as a light passing over a printed sign rather
   than as something glowing from within, which is the honest thing for a
   photograph to do.

   Markup: one attribute on a wrapper around the <img>.
     <a data-glow-img><img src="sign.webp" alt="…"></a>
   ─────────────────────────────────────────────────────────────────────────── */

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

  /* tune these */
  --glow-radius: 120px;   /* size of the lit pool */
  --glow-lift: 1.5;       /* brightness of the lit copy; 1 = no change */
  --glow-sat: 1.15;       /* saturation of the lit copy */
  --dim: 1;               /* resting brightness of the base, 0–1 */
  --glow-fade: 0.3s;

  position: relative;
  display: block;
  isolation: isolate;
  line-height: 0;         /* kill the inline-image descender gap */
}

[data-glow-img] img {
  display: block;
  width: 100%;
  height: auto;
}

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

/* layer 2 — the lifted copy. The filter lives here and the mask goes on the
   child, for the same reason as the other two effects: a CSS mask only paints
   inside its own border box, so filtering and masking the same element clips
   the result into a hard rectangle. */
.glow-img-lit {
  position: absolute;
  inset: 0;
  opacity: var(--gon);
  filter: brightness(var(--glow-lift)) saturate(var(--glow-sat));
  transition: opacity var(--glow-fade) ease;
  pointer-events: none;
  user-select: none;
}

.glow-img-lit > .glow-img-lit-i {
  display: block;
  -webkit-mask-image: radial-gradient(circle var(--glow-radius) at var(--gx) var(--gy),
                      #000 0%, rgba(0, 0, 0, 0.65) 45%, transparent 78%);
          mask-image: radial-gradient(circle var(--glow-radius) at var(--gx) var(--gy),
                      #000 0%, rgba(0, 0, 0, 0.65) 45%, transparent 78%);
}

/* ── State handoff ──
   Add .glow-off to an ancestor and the picture sits plain. */
.glow-off [data-glow-img] { --dim: 1; }
.glow-off [data-glow-img] .glow-img-lit { opacity: 0; }

/* ── Fallbacks ──
   No pointer to follow, or reduced motion asked for: the picture is simply
   the picture. Nothing here dims at rest by default (--dim is 1), so unlike
   the text and logo variants there is no half-lit state to rescue — but the
   lit layer is still removed so no stray element sits over the image. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  [data-glow-img] { --dim: 1; }
  [data-glow-img] .glow-img-lit { display: none; }
}