/* The hollow sage name with its spotlight, shared by the home page ("Maximo
   Slisko") and the About page ("About"). js/spotlight.js moves the light.
   Pages set their own font-size. */

/* Two copies of the name stacked in the same box: the hollow outline
   underneath, and a solid copy on top that only shows inside the light's
   radial mask. Both copies wrap identically because they share the box. */
.hero-name {
  position: relative;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--sage);
}
/* System fonts build letters from overlapping contours (the M's diagonals,
   the k's arm), and a plain text-stroke draws every contour, internal
   overlaps included. So the stroke is painted first at double width and the
   glyph is then filled with the page colour on top: the fill hides the
   inner half of the stroke and every internal line, leaving one clean
   outside edge. */
/* The fill is pure black and the layer uses a screen blend, in which black
   is fully transparent: the letters stay hollow over space as well as over
   the black page, and the inner lines stay hidden. */
.hero-name-outline {
  color: #000;
  -webkit-text-stroke: max(2px, 0.024em) var(--sage);
  paint-order: stroke fill;
  mix-blend-mode: screen;
}
/* The lit copy carries the same stroke as the outline. Without it the fill
   stops at the glyph edge while the outline's stroke sits ~1px outside it,
   so a lit letter kept a hollow ring (most visible on the round "o"). */
/* The box is also grown 0.15em past the name on every side (and padded back
   by the same amount, so the text doesn't move). A mask only paints inside
   its element's box, and the negative letter-spacing pulls that box in by
   0.045em at the end of the line: at desktop size the last "o" was drawn
   ~8px past the box edge, so its right side could never light up. */
.hero-name-lit {
  position: absolute;
  inset: -0.15em;
  padding: 0.15em;
  color: var(--sage);
  -webkit-text-stroke: max(2px, 0.024em) var(--sage);
  paint-order: stroke fill;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle var(--r, 0px) at var(--x, -999px) var(--y, -999px), #000 45%, transparent 100%);
          mask-image: radial-gradient(circle var(--r, 0px) at var(--x, -999px) var(--y, -999px), #000 45%, transparent 100%);
}

/* Reduced motion: no light, just the name in solid sage. */
@media (prefers-reduced-motion: reduce) {
  .hero-name-outline { color: var(--sage); -webkit-text-stroke: 0; }
  .hero-name-lit { display: none; }
}