/* Sketch Sweep — shared heading colour sweep.

   A gradient passes through a heading one line at a time: each line goes text
   colour → gradient → text colour, --sk-sweep-step behind the line above.

   Extracted from three identical copies (Fit Finder hero, Logo Grid intro,
   Services Accordion heading); the comments below are theirs, because the two
   non-obvious decisions they record are exactly why this works.

   Clipped on the LINE, not the word: per-word clipping restarts the gradient at
   every word boundary, which reads as words changing colour rather than one
   sweep travelling through the text. A heading wraps wherever it likes, so
   sweep.js measures the wrapped lines, wraps each in .sk-sweep__line, and adds
   .is-lit once the words have landed. */

[data-sk-sweep] {
	--sk-sweep-fg: #101326;
	--sk-sweep-a: #6d46ff;
	--sk-sweep-b: #24b6ff;
	--sk-sweep-step: 620ms;
	--sk-sweep-duration: 6s;
	color: var(--sk-sweep-fg);
}

/* One word. Needs a box of its own so Sketch Reveal has something to transform
   when the two are combined. */
.sk-sweep__word { display: inline-block; }

.sk-sweep__line { display: block; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	[data-sk-sweep].is-lit .sk-sweep__word {
		/* Load-bearing, not tidying. A composited descendant's glyphs don't
		   contribute to an ancestor's background-clip: text, and Sketch Reveal
		   leaves `will-change: opacity, transform` on every word it handles — so
		   the line would clip to nothing and the heading would vanish. Dropping
		   the compositing hint (and settling what the transition was holding)
		   puts the glyphs back into the clip. */
		will-change: auto;
		transition: none;
		opacity: 1;
		transform: none;
		/* A blur-up entrance leaves a filter on each word, and a filter — like a
		   compositing hint — takes the glyphs out of the ancestor's clip. Same
		   failure as will-change: the heading would vanish the moment it lit. */
		filter: none;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}

	[data-sk-sweep].is-lit .sk-sweep__line {
		background-image: linear-gradient(100deg,
			var(--sk-sweep-fg) 0%, var(--sk-sweep-fg) 38%,
			var(--sk-sweep-a) 46%, var(--sk-sweep-b) 54%,
			var(--sk-sweep-fg) 62%, var(--sk-sweep-fg) 100%);
		background-size: 300% 100%;
		background-repeat: no-repeat;
		-webkit-background-clip: text;
		background-clip: text;
		animation: sk-sweep var(--sk-sweep-duration) linear infinite;
		animation-delay: calc(var(--sk-sweep-l, 0) * var(--sk-sweep-step));
	}
}

/* At 0% the visible slice of the 300%-wide layer is its first third and at 100%
   its last — both entirely inside the flat runs, so a line rests in the plain
   text colour rather than faintly tinted. The colour only crosses during the
   first 35% of the cycle; the rest is rest.

   Runs 100% → 0%, not 0% → 100%: raising background-position shifts an oversized
   layer *left*, so counting up would send the colour right to left. Counting
   down travels left to right, with the reading order. */
@keyframes sk-sweep {
	0%   { background-position: 100% 0; }
	35%  { background-position: 0% 0; }
	100% { background-position: 0% 0; }
}

/* The sweep is decoration on top of text that is already legible, so it simply
   doesn't run. sweep.js also bails, leaving the words as plain text. */
@media (prefers-reduced-motion: reduce) {
	[data-sk-sweep].is-lit .sk-sweep__line { animation: none; }
}