/**
 * Start state for the "untangling" illustration (assets/img/thread-release.svg,
 * driven by assets/js/thread-release.js).
 *
 * The SVG on its own is the finished drawing, so no-JS, the editor and
 * reduced motion get it whole. The start state below (the knot with the thread
 * still wound around it, none out yet, the hand pinching the wrap's loose end)
 * is armed by the same two gates as reveal.css, because the ABOUT US copy sits
 * above the fold and must not paint finished first.
 *
 * Failsafe: if the driver never runs (GSAP blocked or failed), the paths
 * snap to the finished drawing after `failsafe-delay`. The driver adds
 * `is-thread-pending` as soon as it starts, which cancels it, and
 * `is-thread-done` when it ends or bails, which disarms the start state.
 */
/* The hand rises past the top of the viewBox at the knot. */
.thread-release {
	overflow: visible;
}

@media (prefers-reduced-motion: no-preference) {

	.miraigo-reveal-ready .thread-release:not(.is-thread-done) .thread-release__wrap {
		opacity: 1;
	}

	.miraigo-reveal-ready .thread-release:not(.is-thread-done) .thread-release__thread {
		stroke-dasharray: 0 2;
	}

	/* `data-pinch` moved onto the wrap's loose end (offset set on the hand in the SVG). */
	.miraigo-reveal-ready .thread-release:not(.is-thread-done) .thread-release__hand {
		transform: translate(var(--thread-hand-x), var(--thread-hand-y));
	}

	.miraigo-reveal-ready .thread-release:not(.is-thread-done, .is-thread-pending) path {
		animation: thread-release-failsafe 0s var(--wp--custom--thread-release--failsafe-delay) forwards;
	}

	.miraigo-reveal-ready .thread-release:not(.is-thread-done, .is-thread-pending) .thread-release__wrap {
		animation-name: thread-release-failsafe-hide;
	}
}

@keyframes thread-release-failsafe {

	to {
		stroke-dasharray: 2 0;
		transform: none;
	}
}

@keyframes thread-release-failsafe-hide {

	to {
		opacity: 0;
	}
}