/**
 * Animation de survol des items de #primary-menu — « text swap » caractère par
 * caractère, repris à l'identique de champions4good.club.
 *
 * Le JS (assets/js/nav-hover.js) dédouble chaque libellé (is-first / is-second)
 * et l'éclate en .tcg-navfx-char (variable --char = index). Ici on anime :
 *   - is-first : chaque caractère part vers la gauche (skew + fade) ;
 *   - is-second : un duplicata (en couleur primaire) arrive depuis la droite,
 *     avec un décalage progressif par caractère.
 *
 * @package TCG
 */

#primary-menu {
	/* Easing « expo out » exact de la maquette d'origine. */
	--tcg-navfx-ease: linear( 0, .067, .1294, .1877, .2421, .2929, .3402, .3844, .4257, .4641, .5, .5335, .5647, .5939, .6211, .6464, .6701, .6922, .7128, .7321, .75, .7667, .7824, .7969, .8105, .8232, .8351, .8461, .8564, .866, .875, .8834, .8912, .8985, .9053, .9116, .9175, .9231, .9282, .933, .9375, .9417, .9456, .9492, .9526, .9558, .9588, .9615, .9641, .9665, .9688, .9708, .9728, .9746, .9763, .9779, .9794, .9808, .9821, .9833, .9844, .9854, .9864, .9873, .9882, .989, .9897, .9904, .991, .9916, .9922, .9927, .9932, .9937, .9941, .9945, .9948, .9952, .9955, .9958, .9961, .9964, .9966, .9968, .997, .9972, .9974, .9976, .9978, .9979, .998, .9982, .9983, .9984, .9985, .9986, .9987, .9988, .9989, .999, 1 );
}

/* Cible le lien lui-même (zone de survol). */
#primary-menu .wp-block-navigation-item__content {
	position: relative;
}

/* Les deux copies se superposent dans une même cellule de grille. */
#primary-menu .tcg-navfx-wrap {
	pointer-events: none;           /* le survol/clic reste géré par le <a>. */
	display: grid;
}

#primary-menu .tcg-navfx-text {
	grid-area: 1 / 1;
}

/* Le libellé entrant (duplicata) est en couleur primaire. */
#primary-menu .tcg-navfx-text.is-second {
	color: var( --wp--preset--color--primary );
}

#primary-menu .tcg-navfx-char {
	display: inline-block;
}

/* Duplicata masqué par défaut. */
#primary-menu .tcg-navfx-text.is-second .tcg-navfx-char {
	opacity: 0;
}

/* Pas de soulignement au survol (surcharge le style de lien du thème). */
#primary-menu .wp-block-navigation-item__content:is( :hover, :focus-visible ) {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * L'animation n'est jouée que si l'utilisateur n'a pas demandé moins de
 * mouvement.
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

	#primary-menu .tcg-navfx-char {
		transition: translate .6s var( --tcg-navfx-ease ), transform .25s ease-out, opacity .15s ease-out;
	}

	/* État initial du duplicata : décalé à droite + skew. */
	#primary-menu .tcg-navfx-text.is-second .tcg-navfx-char {
		translate: 18px 0 0;
		transform: skew( -14deg );
	}

	/* Survol : le libellé visible part vers la gauche, caractère par caractère. */
	#primary-menu .wp-block-navigation-item__content:is( :hover, :focus-visible ) .tcg-navfx-text.is-first .tcg-navfx-char {
		translate: -18px 0 0;
		transform: skew( -14deg );
		opacity: 0;
		transition-delay: calc( ( var( --char ) - 1 ) * 22ms );
	}

	/* Survol : le duplicata arrive en place, caractère par caractère. */
	#primary-menu .wp-block-navigation-item__content:is( :hover, :focus-visible ) .tcg-navfx-text.is-second .tcg-navfx-char {
		translate: 0 0 0;
		transform: skew( 0 );
		opacity: 1;
		transition:
			translate .6s calc( ( var( --char ) - 1 ) * 22ms ) var( --tcg-navfx-ease ),
			transform .25s calc( ( var( --char ) - 1 ) * 29ms ) ease-out,
			opacity .15s calc( ( var( --char ) - 1 ) * 22ms ) ease-out;
	}
}

/* -------------------------------------------------------------------------
 * Repli sans mouvement : simple passage en couleur primaire au survol.
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	#primary-menu .wp-block-navigation-item__content:is( :hover, :focus-visible ) .tcg-navfx-text.is-first {
		color: var( --wp--preset--color--primary );
		transition: color .2s ease;
	}
}