/* ==========================================================================
   Gestion Lab — Animations
   --------------------------------------------------------------------------
   Règle unique : on n'anime que transform et opacity. Ce sont les deux seules
   propriétés que le navigateur traite sur le processeur graphique. Toute autre
   propriété (height, top, margin, filter) force un recalcul de mise en page et
   se paie en saccades et en décalage visuel — donc en score PageSpeed.

   Rien ne s'active tout seul : chaque module ajoute la classe .gl-anim
   seulement si son interrupteur est à « oui » dans Beaver.
   ========================================================================== */

/* --- Révélation au défilement ------------------------------------------ */

.gl-anim [data-gl-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 700ms var(--gl-ease), transform 700ms var(--gl-ease);
}

.gl-anim [data-gl-reveal].gl-vu {
	opacity: 1;
	transform: none;
}

/* Variantes de direction */
.gl-anim [data-gl-reveal="gauche"]  { transform: translateX(-32px); }
.gl-anim [data-gl-reveal="droite"]  { transform: translateX(32px); }
.gl-anim [data-gl-reveal="zoom"]    { transform: scale(0.94); }
.gl-anim [data-gl-reveal="fondu"]   { transform: none; }

/* --- Révélation des titres, mot par mot -------------------------------- */

.gl-mot {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

.gl-mot i {
	display: inline-block;
	font-style: normal;
	transform: translateY(105%);
	transition: transform 750ms var(--gl-ease);
}

.gl-vu .gl-mot i { transform: none; }

/* --- Entrée immédiate (hero) -------------------------------------------
   Utilisée au chargement, pas au défilement. Le titre porte un délai nul :
   c'est l'élément LCP, le retarder retarderait la mesure de performance. */

.gl-anim .gl-entree {
	opacity: 0;
	transform: translateY(18px);
	animation: gl-monter 620ms var(--gl-ease) forwards;
}

@keyframes gl-monter {
	to { opacity: 1; transform: none; }
}

/* --- Miroitement du dégradé doré --------------------------------------- */

.gl-anim .gl-degrade-texte {
	background: linear-gradient(110deg,
		var(--gl-or-profond) 0%,
		var(--gl-or-clair) 25%,
		var(--gl-or) 50%,
		var(--gl-or-profond) 75%,
		var(--gl-or-clair) 100%);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: gl-miroiter 7s linear infinite;
}

@keyframes gl-miroiter {
	to { background-position: -300% 0; }
}

/* --- Compteurs ---------------------------------------------------------- */

[data-gl-compteur] { font-variant-numeric: tabular-nums; }

/* --- Barre de progression du défilement --------------------------------- */

.gl-progres {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 100%;
	transform-origin: 0 50%;
	scale: 0 1;
	background: var(--gl-degrade);
	z-index: 100;
	transition: scale 80ms linear;
	pointer-events: none;
}

/* --- Respect de la préférence système -----------------------------------
   Non négociable. Les animations de défilement et de parallaxe peuvent
   déclencher des vertiges chez les personnes sensibles au mouvement. */

@media (prefers-reduced-motion: reduce) {
	.gl-anim *,
	.gl-anim *::before,
	.gl-anim *::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
	.gl-anim [data-gl-reveal],
	.gl-anim .gl-entree { opacity: 1; transform: none; }
	.gl-mot i { transform: none; }
	.gl-progres { display: none; }
}