/*
 * Couche d'animation Metal-X : etats masques (anti-flash), preparation parallax, micro-interactions
 * de survol et signatures. Consommee par assets/js/anim.js (revelations + parallax + intro).
 *
 * Garde-fous (cf. _dev-docs/PIEGES-A-EVITER.md §4) :
 *  - L'etat masque n'est pose que sous .mx-anim (JS actif + mouvement autorise), jamais sans JS ni en
 *    reduced-motion : le contenu reste alors visible (progressive enhancement).
 *  - Masque = OPACITY SEULE (aucune transform figee ici : GSAP possede seul les transforms, sinon la
 *    baseline est faussee et le tween « saute »). Aucune hauteur animee : zero CLS.
 *  - Les survols sont sous @media (hover: hover) : rien ne se declenche/masque au toucher (mobile).
 */

/* =============================================================================
 * 1. Etats masques a la revelation (opacity seule). Le JS anime vers l'etat final
 *    et laisse l'opacity/transform finale INLINE (bat ces regles apres coup).
 * ========================================================================== */
.mx-anim [data-anim],
.mx-anim .mx-media-texte__media,
.mx-anim .mx-media-texte__eyebrow,
.mx-anim .mx-media-texte__title,
.mx-anim .mx-media-texte__body,
.mx-anim .mx-media-texte__puces-titre,
.mx-anim .mx-media-texte__puces .mx-list > li,
.mx-anim .mx-media-texte__cta,
.mx-anim .mx-slider__head,
.mx-anim .mx-logos__title,
.mx-anim .mx-temoignages__head,
.mx-anim .mx-certificats__head,
.mx-anim .mx-slider-card,
.mx-anim .mx-logo-card,
.mx-anim .mx-badge__media,
.mx-anim .mx-badge__text,
.mx-anim .mx-4-cartes__head,
.mx-anim .mx-carte-valeur,
.mx-anim .mx-chiffres__head,
.mx-anim .mx-chiffres__item,
.mx-anim .mx-timeline__head,
.mx-anim .mx-timeline__jalon,
.mx-anim .mx-linkedin__head,
.mx-anim .mx-onglets__head,
.mx-anim .mx-onglets__tablist,
.mx-anim .mx-texte-cta__head,
.mx-anim .mx-texte-cta__texte,
.mx-anim .mx-texte-cta__cta,
.mx-anim .mx-hero-interne__title,
.mx-anim .mx-hero-interne__breadcrumb {
	opacity: 0;
}

/* Intro du hero (Accueil) : contenu du hero + cartes valeurs masques le temps de l'intro,
   posee seulement quand elle va jouer (classe .mx-intro, script d'en-tete). Opacity seule. */
.mx-intro .mx-hero__title,
.mx-intro .mx-hero__lead,
.mx-intro .mx-hero__cta,
.mx-intro .mx-hero-card {
	opacity: 0;
}

/* =============================================================================
 * 2. Preparation du parallax (uniquement sous .mx-anim : sans JS, images intactes).
 *    Conteneurs clippes + medias pre-agrandis par le JS (scale) pour translater sans bord.
 * ========================================================================== */
.mx-anim .mx-hero__media,
.mx-anim .mx-media-texte__image {
	overflow: hidden;
}

/* Motif du bloc slider : glissement vertical doux pilote par --mx-motif-y (anime par le JS). */
.mx-slider {
	--mx-motif-y: 0px;
}

/* =============================================================================
 * 3. Signatures.
 * ========================================================================== */

/* 3a. Balayage de lumiere metallique sur le titre du hero. Le ::after est une bande de
 *     lumiere diagonale positionnee par --mx-shine (animee de -20% a 120% par le JS pendant
 *     l'intro). Au repos (200%), il est hors cadre : invisible. Zero CLS (overlay absolu). */
.mx-hero__title {
	position: relative;
	--mx-shine: 200%;
}
/* Le ::after couvre EXACTEMENT le titre (inset:0) : aucun debordement possible. La bande de lumiere est
   dessinee dans le degrade et deplacee par background-position (--mx-shine, animee de -20% a 120% pendant
   l'intro). Au repos (200%), la bande est hors du cadre du degrade : invisible. */
.mx-hero__title::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient( 105deg, transparent 42%, rgba( 255, 255, 255, 0.5 ) 50%, transparent 58% );
	background-size: 250% 100%;
	background-position: var(--mx-shine) 0;
	mix-blend-mode: screen;
}

/* 3a-bis. Frise chronologique : la ligne horizontale se « trace » de gauche a droite a l'entree.
 *        Sous .mx-anim elle part a scaleX(0) ; .is-in (pose par le JS a la revelation) la deploie.
 *        Sans JS / reduced-motion : ligne pleine (regles ignorees). */
.mx-anim .mx-timeline__track::after {
	transform: scaleX(0);
	transform-origin: left center;
}
.mx-anim .mx-timeline__track.is-in::after {
	transform: scaleX(1);
	transition: transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease);
}

/* 3b. Signature « double-chevron » : le chevron des titres a chevron glisse a l'entree.
 *     Sous .mx-anim, il part legerement decale et transparent ; .is-in (pose par le JS a la
 *     revelation) le ramene en place. Sans JS / reduced-motion : chevron normal (regles ignorees). */
.mx-anim .mx-title-chevron::before {
	opacity: 0;
	transform: translateX( -8px );
}
.mx-anim .mx-title-chevron.is-in::before {
	opacity: 1;
	transform: none;
	transition: opacity var(--wp--custom--motion--slow) var(--wp--custom--motion--ease),
	            transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease);
}

/* =============================================================================
 * 4. Micro-interactions de survol (pointeur fin uniquement : rien au toucher).
 * ========================================================================== */
@media ( hover: hover ) {

	/* Cartes en elevation : cartes valeurs (hero) et cartes de traitements (page Traitement de surface,
	   cartes SOMBRES SANS IMAGE, donc pas de zoom possible : on eleve la carte). Meme regle pour les deux,
	   une seule valeur d'ombre a maintenir. translateY SEUL (pas de scale sur une tuile en aspect-ratio :
	   bug WebKit connu, cf. PIEGES §4). */
	.mx-hero-card,
	.mx-traitements__carte {
		transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
		            box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
	}
	.mx-hero-card:hover,
	.mx-traitements__carte:hover {
		transform: translateY( var(--wp--custom--motion--lift) );
		box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.28 );
	}

	/* Cartes « valeur » (bloc 4 cartes) : au survol d'une COLONNE (cellule pleine hauteur = zone FIXE),
	   les cartes des AUTRES colonnes DESCENDENT (jusqu'a --mx-4c-hover-shift, 40px max), la carte survolee
	   reste a sa position de repos. La cellule ne bouge pas -> en glissant horizontalement, pas de
	   clignotement. Le translateY s'AJOUTE au repos (les cartes n'ont pas d'autre transform au repos). */
	.mx-carte-valeur {
		transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
	}
	.mx-4-cartes__grid:has( .mx-4-cartes__cell:hover ) .mx-4-cartes__cell:not( :hover ) .mx-carte-valeur {
		transform: translateY( var(--mx-4c-hover-shift, 40px) );
	}

	/* Images de cartes du slider : leger zoom (conteneur clippe, transform only). */
	.mx-slider-card__media {
		overflow: hidden;
	}
	.mx-slider-card__media img {
		transition: transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease);
	}
	.mx-slider-card:hover .mx-slider-card__media img {
		transform: scale( var(--wp--custom--motion--zoom) );
	}

	/* Items de liste (puces / atouts) : fond legerement teinte + puce qui avance. */
	.mx-list > li {
		border-radius: var(--mx-radius-s);
		transition: background-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
	}
	.mx-list > li::before {
		transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
	}
	.mx-list > li:hover {
		background-color: var(--wp--preset--color--grey-ultralight);
	}
	.mx-list > li:hover::before {
		transform: translateX( 3px );
	}

	/* Nav : soulignement qui grandit sous l'item survole (en plus de la bascule couleur). */
	.mx-header__nav .wp-block-navigation-item__content {
		position: relative;
	}
	.mx-header__nav .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -4px;
		height: 2px;
		background-color: var(--wp--preset--color--orange-dark);
		transform: scaleX( 0 );
		transform-origin: left center;
		transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
	}
	.mx-header__nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
	.mx-header__nav .wp-block-navigation-item__content:focus-visible::after {
		transform: scaleX( 1 );
	}
}

/* =============================================================================
 * 5. Reduced-motion : ceinture + bretelles. Meme si .mx-anim n'est pas posee (le script
 *    d'en-tete s'en charge), on neutralise toute transition/parallax residuelle.
 * ========================================================================== */
@media ( prefers-reduced-motion: reduce ) {
	.mx-hero__title::after {
		display: none;
	}
	.mx-hero-card,
	.mx-traitements__carte,
	.mx-slider-card__media img,
	.mx-carte-valeur,
	.mx-list > li,
	.mx-list > li::before,
	.mx-header__nav .wp-block-navigation-item__content::after {
		transition: none !important;
	}
	/* 4 cartes : pas de descente au survol sous reduced-motion. */
	.mx-4-cartes__grid:has( .mx-4-cartes__cell:hover ) .mx-4-cartes__cell:not( :hover ) .mx-carte-valeur {
		transform: none;
	}
}