/* Etched headlines (live site; started as samples/5-etch, slowed 1.6x so each letter is seen being cut).
   Every page title, section heading and card/solution title is laser-etched into view once, the first time each
   scrolls into view. A thin beam (white core, blue halo, small warm-white bloom) runs along each line;
   the finished letters are left behind it, white-hot for a moment, then cool through ice blue back to
   their normal chrome over ~600ms. The hero goes line by line; the card titles follow one another.

   How it is built (sample.js measures the lines and drives everything; no libraries):
   - the real heading text never moves and never changes. While it waits and while it etches, only its
     glyph fill is made transparent (-webkit-text-fill-color), so nothing reflows: no layout shift.
   - aria-hidden copies of the heading sit exactly on top of it (absolute, same inherited type and
     width, so they wrap identically; checked to 0px):
       .etch-cool  the letters in their normal colour, revealed by a clip-path staircase that follows
                   the beam line by line (Web Animations)
       .etch-hot   per line, a white-hot and an ice-blue copy with only that line inked, each masked by
                   a gradient as long as the trail whose edge rides on the beam (Web Animations); the
                   trail is the cooling
       .etch-beam  the laser, placed every frame from the clip's own clock, so beam and cut never part
   - when the last line has cooled the copies are removed and the real text shows again, pixel-identical.
   Without JS, with reduced motion, in forced colours, or if the script never arrives, the headings are
   simply shown (see the small script in each page head). */

@media screen and (prefers-reduced-motion: no-preference){
  .etch-on :is(.hero-copy h1, .page-hero h1, .contact-info h1, .section-head h2, .card h3, .sol-row h3, .cta-band h2, .step h4):not(.etched){
    -webkit-text-fill-color:transparent;
  }
}

.etch-host{position:relative;}

/* every copy reaches --ep past the heading on all sides and pads its text back into place, so it
   wraps exactly like the heading while its glow has room */
.etch-layer{position:absolute; inset:calc(var(--ep, 0px) * -1); padding:var(--ep, 0px); display:block; margin:0;
  pointer-events:none; -webkit-user-select:none; user-select:none;}

/* the finished letters, in the heading's own colour */
.etch-cool{-webkit-text-fill-color:currentColor;}

/* heat: each line gets two copies of the text with only that line inked, masked by a gradient exactly
   as long as the trail (mask-size, set per line) whose right edge rides on the beam.
   white: the white-hot head, the only part that really glows; brief (WHITE in sample.js), so it stays a
          letter or two long right behind the beam.
   ice:   the cooling, mostly a colour shift (ice blue back to chrome) with only a tight halo, so the
          line behind the head reads as cooling metal, not as glowing text */
.etch-off{-webkit-text-fill-color:transparent;}
.etch-hot{-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;}
.etch-hot.white{color:#fff; -webkit-text-fill-color:#fff;
  filter:drop-shadow(0 0 .03em #fff) drop-shadow(0 0 .1em rgba(255,246,236,.95)) drop-shadow(0 0 .24em rgba(255,212,170,.42));
  -webkit-mask-image:linear-gradient(to left, #000 0%, rgba(0,0,0,.72) 12%, rgba(0,0,0,.36) 32%, rgba(0,0,0,.12) 60%, transparent 100%);
          mask-image:linear-gradient(to left, #000 0%, rgba(0,0,0,.72) 12%, rgba(0,0,0,.36) 32%, rgba(0,0,0,.12) 60%, transparent 100%);}
.etch-hot.ice{color:#c2e2ff; -webkit-text-fill-color:#c2e2ff;
  filter:drop-shadow(0 0 .04em rgba(128,204,255,.62)) drop-shadow(0 0 .12em rgba(0,146,254,.26));
  -webkit-mask-image:linear-gradient(to left, #000 0%, rgba(0,0,0,.66) 9%, rgba(0,0,0,.38) 24%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.06) 72%, transparent 100%);
          mask-image:linear-gradient(to left, #000 0%, rgba(0,0,0,.66) 9%, rgba(0,0,0,.38) 24%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.06) 72%, transparent 100%);}

/* the beam: a 0-wide anchor moved along the line (see sample.js); every part is centred on it.
   Light adds, so it brightens the white letters it crosses instead of tinting them. Its height is
   set per heading. */
.etch-beam{position:absolute; left:0; top:0; width:0; height:var(--bh, 1em); pointer-events:none;
  mix-blend-mode:plus-lighter; opacity:0;}
.etch-beam i{position:absolute; display:block;}
/* light falling on the surface around the cut */
.etch-beam .spill{left:-1.3em; width:2.6em; top:-.4em; bottom:-.4em;
  background:radial-gradient(closest-side, rgba(0,146,254,.16), rgba(0,146,254,.05) 55%, transparent);}
/* the beam's own faint column of light, fading out well past the letters */
.etch-beam .column{left:-.5px; width:1px; top:-.62em; bottom:-.62em;
  background:linear-gradient(to bottom, transparent, rgba(120,200,255,.06) 8%, rgba(140,210,255,.2) 19%, rgba(170,222,255,.42) 30%, rgba(190,230,255,.55) 50%, rgba(170,222,255,.42) 70%, rgba(140,210,255,.2) 81%, rgba(120,200,255,.06) 92%, transparent);}
/* tight blue halo around the core */
.etch-beam .halo{left:-.18em; width:.36em; top:0; bottom:0;
  background:radial-gradient(closest-side, rgba(160,218,255,.72), rgba(0,146,254,.24) 55%, transparent);}
/* the core: a hairline of white light, brightest across the letters, fading at both ends */
.etch-beam .core{left:-.5px; width:1px; top:-.22em; bottom:-.22em;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,.16) 6%, rgba(255,255,255,.5) 13%, rgba(255,255,255,.92) 22%, #fff 32%, #fff 68%, rgba(255,255,255,.92) 78%, rgba(255,255,255,.5) 87%, rgba(255,255,255,.16) 94%, transparent);
  filter:drop-shadow(0 0 1px rgba(214,240,255,.95)) drop-shadow(0 0 2.5px rgba(63,179,255,.85));}
/* the small warm-white bloom where the beam is cutting, sitting just behind the core on the fresh cut */
.etch-beam .bloom{left:-.17em; width:.26em; top:20%; bottom:20%;
  background:radial-gradient(closest-side, #fff 0%, rgba(255,240,222,.9) 28%, rgba(255,190,128,.26) 64%, transparent);
  animation:etch-flicker .21s steps(1, end) infinite;}
@keyframes etch-flicker{0%{opacity:1;} 33%{opacity:.86;} 66%{opacity:.95;}}