/* ------------------------------------------------------------------
 * HyperKit — Highlight Cycle
 *
 * Structure:
 *   <h1 class="hk-hc hk-hc--<mode> hk-hc--dir-<dir>">
 *     <span class="hk-hc__lead">Leading text </span>
 *     <span class="hk-hc__cycle">
 *       <span class="hk-hc__word">word</span>
 *       <span class="hk-hc__bar"></span>
 *     </span>
 *     <span class="hk-hc__trail"> trailing text</span>
 *   </h1>
 *
 * Animation strategy
 * ------------------
 * The bar is a position:absolute overlay on top of the word. We use
 * transform: scale on one axis to wipe it in and out — scaling from
 * 0 → 1 toward the cover side, then continuing 1 → 0 away from it.
 * The transform-origin is set per direction so the visible motion is
 * "left to right", "right to left", etc.
 *
 * JS sets the bar's transform via inline style and animates it
 * frame-by-frame for full control over the three-phase loop.
 *
 * Width animation
 * ---------------
 * The .hk-hc__word's container has its width animated by JS, measured
 * from a temporary off-screen probe element. This keeps the surrounding
 * text reflow smooth across word changes.
 * ------------------------------------------------------------------ */

.hk-hc {
	--hk-hc-bar-default: #764BBF;
	--hk-hc-bar-py: 0.05em;
	--hk-hc-bar-px: 0.15em;
	line-height: 1.15;
	margin: 0;
}

/* Reveal-mode heading is the positioning context for line bars
 * injected by JS. It's a normal block heading so text wraps naturally
 * at the heading's width; each rendered line gets its own bar. */
.hk-hc--reveal {
	position: relative;
}

.hk-hc__text {
	/* The text container is a plain inline span; we don't need
	 * special layout — the heading takes care of block flow. */
	position: relative;
	z-index: 1;
}

/* The container for line bars; JS injects one .hk-hc__bar--line
 * child per visible line. No layout impact — bars are absolutely
 * positioned with all sizing inline. */
.hk-hc__bars {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Per-line reveal bars get their background from the --hk-hc-bar
 * cascade. All sizing and positioning is inline from JS. */
.hk-hc__bar--line {
	background: var(--hk-hc-bar, var(--hk-hc-bar-default));
	border-radius: 0.1em;
}

/* Inline-wrapped pieces */
.hk-hc__lead,
.hk-hc__trail {
	white-space: pre-wrap;
}

/* The cycle container holds the word + bar. inline-block so width
 * can be animated. No padding here — that would push it off the
 * leading text's baseline. The bar extends past the text bounds via
 * its own negative inset instead. */
.hk-hc__cycle {
	position: relative;
	display: inline-block;
	vertical-align: baseline;
	/* Width animates between words. JS sets explicit pixel width via
	 * inline style; this transition smooths it. Duration matches the
	 * bar's cover transition so the growth and the cover happen
	 * together — see JS notes. */
	transition: width var(--hk-hc-width-dur, 600ms) cubic-bezier(0.7, 0, 0.3, 1);
	will-change: width;
}

.hk-hc__word {
	position: relative;
	z-index: 1;
	display: inline-block;
	white-space: nowrap;
}

/* The bar — absolutely positioned overlay extending past the word's
 * bounds via negative inset so it visually "covers" with breathing
 * room. Initial state is fully hidden (scale 0 from entry side). JS
 * animates transform from there.
 *
 * Per-word color is set via the --hk-hc-bar CSS variable on the bar
 * inline, falling back to --hk-hc-bar-default. */
.hk-hc__bar {
	position: absolute;
	inset: calc(var(--hk-hc-bar-py) * -1) calc(var(--hk-hc-bar-px) * -1);
	background: var(--hk-hc-bar, var(--hk-hc-bar-default));
	pointer-events: none;
	z-index: 2;
	transform-origin: left center;
	transform: scaleX(0);
	will-change: transform;
}

/* Per-direction transform-origin. The bar starts fully shrunken
 * toward the "entry" side and ends fully shrunken toward the "exit"
 * side — JS handles the mid-flip of transform-origin (see JS notes). */
.hk-hc--dir-right .hk-hc__bar { transform-origin: left center;  transform: scaleX(0); }
.hk-hc--dir-left  .hk-hc__bar { transform-origin: right center; transform: scaleX(0); }
.hk-hc--dir-down  .hk-hc__bar { transform-origin: top center;   transform: scaleY(0); }
.hk-hc--dir-up    .hk-hc__bar { transform-origin: bottom center; transform: scaleY(0); }

/* Reduced motion: show the first word, no bar animation. */
@media (prefers-reduced-motion: reduce) {
	.hk-hc__bar {
		display: none;
	}
}