/**
 * Flavors Text Highlight - SVG shape draw-on for a highlighted span.
 *
 * Every path is emitted with pathLength="1", so the draw animation is plain
 * stroke-dasharray/dashoffset CSS from 1 to 0 - no path measuring in JS.
 * JS only adds .fth-play (IntersectionObserver / load trigger). The second
 * path of two-part shapes starts slightly after the first.
 *
 * States:
 *   .fth-play    - draw once and keep the final state.
 *   .fth-loop    - redraw continuously (draw, hold, undraw).
 *   .fth-instant - final drawn state, no animation (reduced motion, editor).
 *   .fth-front   - shape over the text instead of behind it.
 */

.flavor-text-highlight {
	--fth-duration: 1.2s;
	--fth-delay: 0s;
	margin: 0;
}

.fth-mark {
	--fth-overflow: 0.15em;
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.fth-svg {
	position: absolute;
	top: calc(-1 * var(--fth-overflow));
	left: calc(-1 * var(--fth-overflow));
	width: calc(100% + 2 * var(--fth-overflow));
	height: calc(100% + 2 * var(--fth-overflow));
	overflow: visible;
	pointer-events: none;
	z-index: 0;
}

.fth-text {
	position: relative;
	z-index: 1;
}

.fth-front .fth-svg {
	z-index: 2;
}

.fth-svg path {
	stroke: #f43f5e;
	stroke-width: 4;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	/* SVG stroke-width must not scale with the stretched viewBox. */
	vector-effect: non-scaling-stroke;
}

/* -------------------------------------------------------------- Animation */

@keyframes fth-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes fth-draw-loop {
	0% {
		stroke-dashoffset: 1;
	}
	45% {
		stroke-dashoffset: 0;
	}
	80% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 1;
	}
}

.flavor-text-highlight.fth-play .fth-svg path {
	animation: fth-draw var(--fth-duration) ease-in-out forwards;
	animation-delay: var(--fth-delay);
}

/* Second path of two-part shapes (double underline, cross hatch) lags a bit. */
.flavor-text-highlight.fth-play .fth-svg path:nth-of-type(2) {
	animation-delay: calc(var(--fth-delay) + var(--fth-duration) * 0.55);
}

.flavor-text-highlight.fth-play.fth-loop .fth-svg path {
	animation-name: fth-draw-loop;
	animation-duration: calc(var(--fth-duration) * 2.5);
	animation-fill-mode: none;
	animation-iteration-count: infinite;
}

.flavor-text-highlight.fth-play.fth-loop .fth-svg path:nth-of-type(2) {
	animation-delay: calc(var(--fth-delay) + var(--fth-duration) * 0.35);
}

/* Final state, no animation: reduced motion, editor preview, no-JS. */
.flavor-text-highlight.fth-instant .fth-svg path {
	animation: none;
	stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
	.flavor-text-highlight .fth-svg path {
		animation: none !important;
		stroke-dashoffset: 0;
	}
}