/*
Motif de couture animé — composant chargé sur tout le site.

Utilisé par la page d'accueil et par le pied de page. Les styles de base vivent donc
ici et non dans home.css, qui ne se charge que sur l'accueil : sinon le fil du pied de
page resterait invisible ailleurs (son masque est à dashoffset 1 tant que la classe
.is-sewing n'est pas posée par stitch.js).

Le rendu du SVG est dans inc/stitch.php.
*/

.ls-stitch {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.ls-stitch__thread {
	stroke: var(--color-accent);
	stroke-width: 2.5;
	stroke-linecap: round;
	/*
	9 + 7 = 16 : le déplacement de l'animation vaut exactement un motif, la boucle est
	donc invisible.
	*/
	stroke-dasharray: 9 7;
	stroke-dashoffset: 0;
}

.ls-stitch__thread--1 {
	stroke: var(--color-accent-text);
	stroke-width: 1.5;
	opacity: 0.55;
}

/*
Le masque est plein et opaque : son stroke-dashoffset passant de 1 à 0 découvre le fil
progressivement. Tant que .is-sewing n'est pas posée, il reste à 1 — donc invisible.
*/
.ls-stitch__reveal {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.ls-stitch.is-sewing .ls-stitch__reveal {
	animation: ls-sew 2.8s cubic-bezier(0.4, 0, 0.3, 1) forwards;
}

/* Une fois cousu, le fil continue d'avancer doucement. */
.ls-stitch.is-sewing .ls-stitch__thread {
	animation: ls-thread 7s linear 2.4s infinite;
}

@keyframes ls-sew {
	from {
		stroke-dashoffset: 1;
	}
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes ls-thread {
	from {
		stroke-dashoffset: 0;
	}
	to {
		stroke-dashoffset: -16;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ls-stitch__reveal {
		stroke-dashoffset: 0;
	}

	.ls-stitch.is-sewing .ls-stitch__reveal,
	.ls-stitch.is-sewing .ls-stitch__thread {
		animation: none;
	}
}