/*
  Shared "ink blob" letter-reveal title behavior (markup: partials/ink-title.njk,
  animation: assets/js/ink-title.js). Each letter reveals from its own point
  outward as an irregular, hand-generated blob — like ink spreading, not a
  geometric circle wiping across the glyph. The mask (nested inside the letter's
  own span) is an SVG <path> tracing a random closed blob shape (generated once
  per letter by ink-title.js, via randomized points on a circle joined with smooth
  curves), grown from radius 0 via a plain SVG translate+scale transform that JS
  updates directly on scroll. An earlier version warped a perfect circle with an
  feTurbulence/feDisplacementMap filter recomputed every scroll frame — correct
  edge shape, but expensive enough (10+ letters, every scrub tick) to stall
  painting in this environment; a precomputed static path animated by transform is
  effectively free per frame (GPU compositing only), so it stays smooth.

  This file only covers the shared reveal mechanics — each title's own color,
  size, letter-spacing and margin come from its own extra class (e.g.
  .highlights__title, .cv-title) in that section's own component CSS.
*/
.ink-title-letter {
  display: inline-block;
  --reveal-blur: 8px;
  filter: blur(var(--reveal-blur));
}

/*
  A literal space character already gets the title's own letter-spacing on both
  sides like any other letter, but that reads as just another gap between glyphs
  rather than a word break (visible on short titles like "My CV" — it read as one
  run-together word). Extra margin on top of that makes the word gap clearly
  bigger than the inter-letter gaps around it.
*/
.ink-title-letter--space {
  margin: 0 clamp(6px, 0.83vw, 16px);
}

.ink-title-letter-svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}