/*
 * Motion : Perinea & Sport -- l'emblème qui se dessine au fil d'or
 * Description : À son entrée dans l'écran, l'emblème se dessine au trait (ses contours), puis se
 *   remplit d'or ; une seule fois par affichage, puis plus rien ne bouge. Écho du « one line
 *   art » des publications du cabinet (demande de Léa, 27/09/2026 ; idée de Monsieur, 29/09/2026).
 *   Place : en filigrane dans le haut de page (hero) de toutes les pages qui en portent un (01/10/2026).
 *   Rythme servi : « d'un seul geste » (choix de Léa, 30/09/2026) ; deux autres rythmes restent écrits.
 * Technique : @keyframes CSS ; une classe posée par embleme-trace-arme.js (appelé après l'emblème par
 *   embleme-trace-guet.js) déclenche ; longueurs de contour précalculées (`--l`, embleme-trace-perinea.svg).
 *   Aucune boucle, aucune bibliothèque.
 * Statut : client (Perinea) -- le module commun design/motion-design/css-trace-anime.css en est né ; la
 *   bascule est la quête PERINEA-L-EMBLEME-ANIME-PASSE-PAR-LA-FONCTION-COMMUNE-DE-TRACE.
 * Reduced-motion : géré -- tout le mouvement vit sous `prefers-reduced-motion: no-preference` ;
 *   en mouvement réduit, l'emblème est plein et immobile d'emblée.
 * WCAG 2.2.2 : N/A (une seule fois, moins de 3 s, aucune boucle)
 * Poids : environ 4 Ko non compressés (plus l'emblème en ligne : 19 Ko, 7,9 Ko compressés)
 * Écart P5 déclaré : les durées de la scène sont des propriétés nommées ici (`--perinea-trace-*`) ; le
 *   chevauchement du trait et de l'or reprend le jeton `--motion-instant`, le secours vaut 4 s.
 * Dependances : tokens-perinea.css, motion-perinea.css (courbes --ease-*), embleme-trace-perinea.svg
 * Clients : Perinea
 *
 * EXCEPTION P1, justifiée par écrit : le trait (`stroke-dashoffset`) et l'or (`fill-opacity`,
 * `stroke-opacity`) ne sont pas traités par le compositeur, ils repeignent. Mesuré sur Chromium 145,
 * processeur bridé ×4 : emblème de 80-120 px le 30/09/2026 -- 0 image perdue, ~1 ms de fil principal
 * par image, aucune tâche longue ; filigrane de 210 px (téléphone, densité 3) et 330 px (1440, densité
 * 2) le 01/10/2026 -- 0 image perdue sur 2,6 s, là où un travail de 25 ms par image en fait perdre 54
 * (épreuve #1791) ; 420 px (densité 2, au-delà des 413 px relevés sur les 14 pages servies, chasse du
 * 01/10/2026) -- 0 image perdue, 55 pour le cas chargé (épreuve #1814). Tenu à cinq conditions : moins de
 * 3 s ; une fois par affichage ; au plus 420 px de large (un hero plus haut, « immersif », se remesure
 * avant d'en porter un) ; arrêt complet ensuite ; aucun `will-change`.
 *
 * P3 : au repos, l'emblème est PLEIN (trait d'épaisseur nulle, or opaque). Seule la classe
 * `perinea-trace-arme`, posée sur <html> par embleme-trace-arme.js, autorise l'état de départ caché.
 */

/* ---- Forme ------------------------------------------------------------- */
/* `--perinea-embleme-px` est la largeur rendue, en nombre : l'épaisseur du trait s'en déduit, pour
   rester la même à l'écran quelle que soit la taille (le trait vit dans les unités du viewBox). */
.perinea-embleme-trace {
	--perinea-embleme-px: 80;
	--perinea-trace-epaisseur: 1.35px;
	display: block;
	width: calc(var(--perinea-embleme-px) * 1px);
	height: auto;
	margin: 0 0 var(--dt-space-3);
	overflow: visible;
}

/* ---- Place « filigrane » : en fond du haut de page ----------------------- */
/* Choisie par Monsieur le 01/10/2026 sur quatre emplacements maquettés : grand et discret, derrière
   le texte, et « plaçable sur tous les heros ». 22 % d'opacité au téléphone, 16 % à partir de 48rem ;
   le trait passe à 2 px pour rester lisible à cette opacité. La SECTION isole son empilement :
   l'emblème passe sous le texte, au-dessus du fond, sans que rien d'autre ne change de couche.
   POSITION HORIZONTALE AU HASARD à chaque affichage (Monsieur, 01/10/2026 : « cela ajoute une notion de
   surprise ») : embleme-trace-arme.js tire une position par appareil (`--perinea-filigrane-x-telephone`,
   `--perinea-filigrane-x-ordinateur`, entre 0, bord gauche, et 1, bord droit), parmi les emplacements
   retenus (embleme-trace-perinea.php) ; la feuille prend celle de la mise en page du moment ; le filigrane peut déborder de 2,5rem de chaque côté, la section le rogne (aucun défilement
   horizontal). Le décalage `translateX(-x × sa largeur)` ramène son bord droit au bord à x = 1, quelle
   que soit sa taille. Sans script : à droite au téléphone, centré dans un hero centré.
   Téléphone : 210 px de large, centré en hauteur dans la colonne (validé par Monsieur le 01/10/2026).
   À partir de 48rem : TOUJOURS ENTIER EN HAUTEUR, avec une marge de sécurité en haut et en bas
   (Monsieur, 01/10/2026, message #27) -- il prend la hauteur de la section moins deux marges, sa largeur
   suit le rapport de l'emblème. À 1440 px, la largeur fixe de 330 px le faisait déborder de la section
   (359 px de haut pour 335) : il était rogné en haut et en bas. */
.perinea-hero-filigrane {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	overflow: clip;
}
.perinea-hero-filigrane .dtb-hero-inner {
	position: relative;
}
/* Hero à photo (fiches de Léa et d'Alvin) : l'emblème vit dans la pile de texte et n'en déborde pas --
   derrière le portrait, il était caché (Monsieur, 01/10/2026, #37). La pile est son repère à toutes les
   largeurs ; la règle de 48rem qui rend la colonne « static » ne la touche pas. */
.perinea-hero-filigrane .dtb-hero-pile {
	position: relative;
}
.dtb-hero-pile > .perinea-embleme-trace--filigrane {
	--perinea-filigrane-deborde: 0px;
}
.perinea-embleme-trace--filigrane {
	--perinea-embleme-px: 210;
	--perinea-trace-epaisseur: 2px;
	--perinea-filigrane-x: var(--perinea-filigrane-x-telephone, 1);
	--perinea-filigrane-deborde: 2.5rem;
	position: absolute;
	top: 50%;
	left: calc(-1 * var(--perinea-filigrane-deborde)
		+ var(--perinea-filigrane-x) * (100% + 2 * var(--perinea-filigrane-deborde)));
	z-index: -1;
	margin: 0;
	opacity: 0.22;
	transform: translate(calc(var(--perinea-filigrane-x) * -100%), -50%);
	pointer-events: none;
}
@media (min-width: 48rem) {
	/* La colonne cesse d'être le repère : le filigrane se mesure sur toute la section. */
	.perinea-hero-filigrane .dtb-hero-inner {
		position: static;
	}
	.perinea-embleme-trace--filigrane {
		--perinea-filigrane-x: var(--perinea-filigrane-x-ordinateur, 1);
		--perinea-filigrane-marge: var(--dt-space-4, 2rem);
		top: var(--perinea-filigrane-marge);
		width: auto;
		height: calc(100% - 2 * var(--perinea-filigrane-marge));
		aspect-ratio: var(--rapport);
		opacity: 0.16;
		transform: translateX(calc(var(--perinea-filigrane-x) * -100%));
	}
	.dtb-hero:not(.dtb-hero-gauche) .perinea-embleme-trace--filigrane {
		--perinea-filigrane-x: var(--perinea-filigrane-x-ordinateur, 0.5);
	}
}

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

	/* ---- Rythme de chaque variante --------------------------------------- */
	/* fil-puis-or : les formes se dessinent l'une après l'autre, puis l'or arrive partout.
	   seul-geste : tous les contours ensemble, puis l'or.
	   forme-apres-forme : chaque forme se dessine puis se remplit, à tour de rôle. */
	.perinea-embleme-trace {
		--perinea-trace-fil: 900ms;
		--perinea-trace-pas: 180ms;
		--perinea-trace-or: 600ms;
		--perinea-trace-chevauchement: var(--motion-instant, 100ms);
		--perinea-trace-secours: 4s;
		--perinea-trace-courbe: var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
	}
	.perinea-embleme-trace[data-variante="seul-geste"] {
		--perinea-trace-fil: 1500ms;
		--perinea-trace-pas: 0ms;
		--perinea-trace-or: 700ms;
	}
	.perinea-embleme-trace[data-variante="forme-apres-forme"] {
		--perinea-trace-fil: 700ms;
		--perinea-trace-pas: 280ms;
		--perinea-trace-or: 450ms;
	}

	/* ---- État de départ, page armée -------------------------------------- */
	/* Le trait est posé tout entier dans le « blanc » du tiret : invisible ; l'or est transparent. */
	/* `--perinea-trace-largeur` : la largeur RENDUE, mesurée par le déclencheur quand la taille dépend
	   de la page (filigrane à l'ordinateur) ; sinon la largeur déclarée. */
	.perinea-trace-arme .perinea-embleme-trace path {
		stroke-width: calc(var(--perinea-trace-epaisseur) * var(--vb)
			/ var(--perinea-trace-largeur, var(--perinea-embleme-px)));
		stroke-dasharray: calc(var(--l) * 1px) calc(var(--l) * 1px);
		stroke-dashoffset: calc(var(--l) * 1px);
		stroke-opacity: 1;
		fill-opacity: 0;
	}

	/* ---- Le dessin ------------------------------------------------------- */
	/* Le trait avance jusqu'à se refermer ; puis l'or monte pendant que le trait s'efface, pour que
	   l'état final soit exactement l'emblème (un trait resté doré l'épaissirait d'un demi-pixel). */
	.perinea-trace-arme .perinea-embleme-trace.est-dessine path {
		animation:
			perinea-trace-fil var(--perinea-trace-fil) var(--perinea-trace-courbe) calc(var(--rang) * var(--perinea-trace-pas)) both,
			perinea-trace-or var(--perinea-trace-or) var(--perinea-trace-courbe)
				calc((var(--rangs) - 1) * var(--perinea-trace-pas) + var(--perinea-trace-fil) - var(--perinea-trace-chevauchement)) both;
	}
	.perinea-trace-arme .perinea-embleme-trace.est-dessine[data-variante="forme-apres-forme"] path {
		animation:
			perinea-trace-fil var(--perinea-trace-fil) var(--perinea-trace-courbe) calc(var(--rang) * var(--perinea-trace-pas)) both,
			perinea-trace-or var(--perinea-trace-or) var(--perinea-trace-courbe)
				calc(var(--rang) * var(--perinea-trace-pas) + var(--perinea-trace-fil) - var(--perinea-trace-chevauchement)) both;
	}

	/* ---- Secours --------------------------------------------------------- */
	/* Page armée mais observateur absent (script en échec) : l'or se révèle seul au bout de 4 s. */
	.perinea-trace-arme .perinea-embleme-trace:not(.est-guette):not(.est-dessine) path {
		animation: perinea-trace-or var(--perinea-trace-or) var(--perinea-trace-courbe) var(--perinea-trace-secours) both;
	}
}

@keyframes perinea-trace-fil {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes perinea-trace-or {
	to {
		fill-opacity: 1;
		stroke-opacity: 0;
	}
}