/*
 * KMM Consulting — graphics.css
 * Traits et constellations. Chargée uniquement sur les pages qui les utilisent
 * (accueil, expertises, réalisations, secteurs), pour alléger main.css.
 *
 * Mouvement : les tracés apparaissent une fois (0,9 s), l’impulsion boucle au plus
 * une fois toutes les 6 secondes. Avec « réduire les animations », tout s’affiche
 * directement dans son état final.
 */
@layer components {
	:root {
		--graphic-line: var(--kmm-navy);
		--graphic-imagine: var(--kmm-gray-400);
		--graphic-accent: var(--kmm-blue);
		--graphic-halo: rgb(61 165 245 / 0.22);
		--graphic-fill: var(--color-surface);
		--pulse-period: 6s;
	}

	[data-surface="dark"] {
		--graphic-line: var(--kmm-white);
		--graphic-imagine: var(--kmm-blue);
		--graphic-halo: rgb(61 165 245 / 0.3);
	}

	/* ---------- Trait ---------- */
	.c-trait {
		display: flex;
		align-items: center;
		inline-size: 100%;
		color: var(--graphic-line);
	}

	.c-trait__line {
		position: relative;
		flex: 1 1 auto;
		block-size: var(--trait-width);
		background-color: currentColor;
		transform-origin: 0 50%;
		clip-path: inset(-4px 0); /* L’impulsion déborde en hauteur, jamais en longueur. */
	}

	.c-trait__node {
		flex: none;
		inline-size: calc(var(--node-r) * 2);
		block-size: calc(var(--node-r) * 2);
		border: var(--trait-width) solid currentColor;
		border-radius: 50%;
		background-color: currentColor;
	}

	/* Imaginer : pointillé « 3 7 », nœud creux. */
	.c-trait--imagine {
		color: var(--graphic-imagine);
	}

	.c-trait--imagine .c-trait__line {
		background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 10px);
	}

	.c-trait--imagine .c-trait__node {
		background-color: var(--graphic-fill);
	}

	/* Connecter : nœud bleu avec halo, impulsion le long du trait. */
	.c-trait--connect .c-trait__node {
		border-color: var(--graphic-accent);
		background-color: var(--graphic-accent);
		box-shadow: 0 0 0 4px var(--graphic-halo);
	}

	.c-trait--connect .c-trait__line::after {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 0;
		inline-size: 22%;
		block-size: 3px;
		border-radius: 3px;
		background: linear-gradient(90deg, transparent, var(--graphic-accent) 25% 75%, transparent);
		transform: translate(250%, -50%); /* État final (sans animation) : impulsion posée au centre. */
	}

	/* Vertical (cycle d’intervention sur mobile). */
	.c-trait--vertical {
		flex-direction: column;
		inline-size: auto;
		block-size: 100%;
	}

	.c-trait--vertical .c-trait__line {
		inline-size: var(--trait-width);
		block-size: auto;
		transform-origin: 50% 0;
		clip-path: inset(0 -4px);
	}

	.c-trait--vertical.c-trait--imagine .c-trait__line {
		background: repeating-linear-gradient(180deg, currentColor 0 3px, transparent 3px 10px);
	}

	.c-trait--vertical.c-trait--connect .c-trait__line::after {
		inset-block-start: 0;
		inset-inline-start: 50%;
		inline-size: 3px;
		block-size: 22%;
		background: linear-gradient(180deg, transparent, var(--graphic-accent) 25% 75%, transparent);
		transform: translate(-50%, 250%);
	}

	/* ---------- Constellation ---------- */
	.c-constellation {
		inline-size: 100%;
		block-size: auto;
		overflow: visible;
		color: var(--graphic-line);
	}

	.c-constellation--sm {
		max-inline-size: 12rem;
	}

	.c-constellation--md {
		max-inline-size: 24rem;
	}

	/* Classes courtes générées par kmm_constellation() : k-e liaison, k-n nœud,
	   k-i imaginer, k-h nœud central, k-a halo, k-p impulsion. */
	.c-constellation .k-e {
		stroke: var(--graphic-line);
		vector-effect: non-scaling-stroke; /* 1,5 px à toutes les tailles. */
	}

	.c-constellation .k-e.k-i {
		stroke: var(--graphic-imagine);
		stroke-dasharray: 3 7;
	}

	.c-constellation .k-n {
		stroke: var(--graphic-line);
		stroke-width: 1.5;
		vector-effect: non-scaling-stroke;
		fill: var(--graphic-line);
	}

	.c-constellation .k-n.k-i {
		stroke: var(--graphic-imagine);
		fill: var(--graphic-fill);
	}

	.c-constellation .k-n.k-h {
		stroke: var(--graphic-accent);
		fill: var(--graphic-accent);
	}

	.c-constellation .k-a {
		fill: var(--graphic-halo);
	}

	.c-constellation .k-p {
		stroke: var(--graphic-accent);
		stroke-width: 3;
		stroke-linecap: round;
		stroke-dasharray: 10 200;
		stroke-dashoffset: -45; /* État final (sans animation) : impulsion à mi-parcours. */
	}

	/* ---------- Mouvement (uniquement si l’utilisateur l’accepte) ---------- */
	@media (prefers-reduced-motion: no-preference) {
		/* Tracé des traits. */
		.js .c-trait[data-draw] .c-trait__line {
			transition: transform var(--dur-draw) var(--ease-inout);
		}

		.js .c-trait[data-draw] .c-trait__node {
			transition: opacity var(--dur-base) var(--ease-out) calc(var(--dur-draw) - 150ms);
		}

		.js .c-trait[data-draw]:not(.is-revealed) .c-trait__line {
			transform: scaleX(0);
		}

		.js .c-trait--vertical[data-draw]:not(.is-revealed) .c-trait__line {
			transform: scaleY(0);
		}

		.js .c-trait[data-draw]:not(.is-revealed) .c-trait__node {
			opacity: 0;
		}

		/* Impulsion : un passage, puis une pause (période totale de 6 s). */
		.c-trait--connect .c-trait__line::after {
			animation: kmm-pulse-x var(--pulse-period) var(--ease-inout) infinite;
			animation-delay: var(--dur-draw);
		}

		.c-trait--vertical.c-trait--connect .c-trait__line::after {
			animation-name: kmm-pulse-y;
		}

		.c-constellation .k-p {
			animation: kmm-pulse-path var(--pulse-period) var(--ease-inout) infinite;
			animation-delay: var(--dur-draw);
		}

		/* Apparition des constellations : liaisons, puis nœuds (une fois). */
		.js .c-constellation[data-draw] g {
			transition: opacity var(--dur-slow) var(--ease-out);
		}

		.js .c-constellation[data-draw] g + g {
			transition-delay: 300ms;
		}

		.js .c-constellation[data-draw]:not(.is-revealed) g {
			opacity: 0;
		}

		/* Hors écran : aucune animation ne tourne. */
		.js [data-draw]:not(.is-revealed) .k-p,
		.js .c-trait[data-draw]:not(.is-revealed) .c-trait__line::after {
			animation-play-state: paused;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.c-trait--connect .c-trait__line::after,
		.c-constellation .k-p {
			animation: none !important;
		}
	}

	@keyframes kmm-pulse-x {
		0% { transform: translate(-100%, -50%); }
		40%, 100% { transform: translate(460%, -50%); }
	}

	@keyframes kmm-pulse-y {
		0% { transform: translate(-50%, -100%); }
		40%, 100% { transform: translate(-50%, 460%); }
	}

	@keyframes kmm-pulse-path {
		0% { stroke-dashoffset: 10; }
		40%, 100% { stroke-dashoffset: -100; }
	}
}