/* Spectra: type-fx (js/type-fx.js). Two opt-in text effects: data-fx="lens" and data-fx="sweep".
   The module only adds spans; every heading keeps its own font, size and layout. Text stays real: lens keeps a visually
   hidden copy (.fx-sr) for screen readers and aria-hides its letter spans; sweep wraps the text in one plain span. */
.fx-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fx-w{display:inline-block;white-space:nowrap}

/* ---------- lens: white light refracts into colour under the cursor, then settles (About's `flare`) ---------- */
.fx-lens .fx-l{display:inline-block;position:relative}
@keyframes fx-flare{
  0%{text-shadow:0 0 0 rgba(251,26,8,0),0 0 0 rgba(48,69,224,0)}
  35%{color:var(--lc);text-shadow:-.06em 0 rgba(251,26,8,.75),.06em 0 rgba(48,69,224,.75)}
  100%{text-shadow:0 0 0 rgba(251,26,8,0),0 0 0 rgba(48,69,224,0)}
}
.fx-lens .fx-l.hot{animation:fx-flare .9s var(--ease,cubic-bezier(.2,.8,.2,1)) 1}
/* no hover (touch): one slow pass across the letters, first time the heading scrolls in */
@media (hover:none){
  .fx-lens .fx-l.pass{animation:fx-flare 1.5s var(--ease,cubic-bezier(.2,.8,.2,1)) 1;animation-delay:calc(var(--n)*70ms + 200ms)}
}

/* ---------- sweep: the line rests dim, one soft red > orange > cream band passes left to right, it settles white.
   One gradient clipped to the glyphs of a single wrapper span (.fx-st), so there are no per-letter states. The strip is
   3x the text wide: [white | band | dim]; sliding it from the dim end to the white end carries the band across.
   Inline + sliced decoration breaks: a wrapped heading sweeps line one, then line two. ---------- */
.fx-sweep .fx-st{
  --fx-ink:var(--ink,#fcfcfc);
  color:transparent;-webkit-text-fill-color:transparent;
  background-image:linear-gradient(90deg,
    var(--fx-ink) 0 33.4%,
    #fce3a3 37%,
    #fe9a04 40.5%,
    #fe7a05 43%,
    color-mix(in srgb,#fb1a08 70%,transparent) 46%,
    color-mix(in srgb,var(--fx-ink) 16%,transparent) 50% 100%);
  background-size:300% 100%;background-position:100% 0;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  -webkit-box-decoration-break:slice;box-decoration-break:slice
}
.fx-sweep.go .fx-st{animation:fx-sweep 1.5s cubic-bezier(.45,.05,.25,1) var(--fx-d,0ms) both}
@keyframes fx-sweep{from{background-position:100% 0}to{background-position:0 0}}
/* before the module wraps a line (it boots once the page is idle): already dim, the same colour the sweep starts from */
.fx-sw-on [data-fx="sweep"]:not(.fx-sweep){color:color-mix(in srgb,var(--ink,#fcfcfc) 16%,transparent)}
/* settled: plain text in the exact resting colour, gradient gone */
.fx-sweep.done .fx-st{color:var(--ink,#fcfcfc);-webkit-text-fill-color:currentColor;background:none}

@media (prefers-reduced-motion:reduce){
  .fx-lens .fx-l{animation:none!important}
  .fx-sweep .fx-st{color:inherit!important;-webkit-text-fill-color:currentColor!important;background:none!important;animation:none!important}
}