/**
 * Styles motion — intro FR-16 + reveals FR-17 (AD-C7).
 *
 * Intro : fond noir (primary) ; contour / plein ; révélation Hero/nav/cercle.
 * Tokens : primary=#000 (intro-background), intro-type-outline, background=#fff (solid).
 * État pending reveal : opacity 0 + translateY (<= 24 px).
 * prefers-reduced-motion : pas de morph long / pas de transition.
 * pointer-events : CTA actifs dès nav visible (étape 4+) ; overlay ne capte plus les clics.
 */

/*
 * Reveal FR-17 — scrub au scroll (réf. jorge-template.framer.website).
 * --cheval-reveal-p (0→1) piloté par JS selon la position viewport.
 * Pas de transition CSS one-shot : l’anim suit le scroll sans recharger.
 */
[data-cheval-reveal='true'] {
	--cheval-reveal-p: 0;
	--cheval-reveal-ty: 12px;
	--cheval-reveal-title-ty: 10px;
	--cheval-reveal-title-scale-from: 0.95;
	--cheval-reveal-title-lh-from: 1.35;
	--cheval-reveal-title-lh-to: 1.1;
}

[data-cheval-reveal='true'].is-cheval-reveal-pending {
	opacity: var( --cheval-reveal-p );
	transform: translateY(
		calc( var( --cheval-reveal-ty ) * ( 1 - var( --cheval-reveal-p ) ) )
	);
	/* Ne jamais bloquer les CTA pendant le reveal. */
	pointer-events: auto;
	will-change: opacity, transform;
	/* Scrub scroll : pas de transition temporelle. */
	transition: none;
}

[data-cheval-reveal='true'].is-cheval-revealed {
	opacity: 1;
	transform: translateY( 0 );
	will-change: auto;
	transition: none;
}

/* Titres : Y + scale + interlignage suivent le même progrès scroll. */
[data-cheval-reveal='true'].is-cheval-reveal-pending
	.wp-block-techniconcept-title {
	--cheval-reveal-title-lh: calc(
		var( --cheval-reveal-title-lh-from ) * ( 1 - var( --cheval-reveal-p ) ) +
			var( --cheval-reveal-title-lh-to ) * var( --cheval-reveal-p )
	);
	/* Opacity gérée par le parent — évite double fondu. */
	opacity: 1;
	transform: translateY(
			calc(
				var( --cheval-reveal-title-ty ) *
					( 1 - var( --cheval-reveal-p ) )
			)
		)
		scale(
			calc(
				var( --cheval-reveal-title-scale-from ) +
					( 1 - var( --cheval-reveal-title-scale-from ) ) *
						var( --cheval-reveal-p )
			)
		);
	transform-origin: left center;
	transition: none;
}

[data-cheval-reveal='true'].is-cheval-revealed
	.wp-block-techniconcept-title {
	--cheval-reveal-title-lh: var( --cheval-reveal-title-lh-to );
	opacity: 1;
	transform: translateY( 0 ) scale( 1 );
	transition: none;
}

@media ( prefers-reduced-motion: reduce ) {
	[data-cheval-reveal='true'],
	[data-cheval-reveal='true'].is-cheval-reveal-pending,
	[data-cheval-reveal='true'].is-cheval-revealed,
	[data-cheval-reveal='true'] .wp-block-techniconcept-title {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		--cheval-reveal-p: 1;
		--cheval-reveal-title-lh: 1.1;
	}
}

/*
 * Cartes — stagger Expertise & Services (Patrick Jane) : R→L + décalage lignes.
 * Entrée complete depuis la droite (100%) ; durée volontairement plus lente.
 */
[data-cheval-cartes-stagger] {
	--cheval-cartes-duration: 1400ms;
	--cheval-cartes-tx: 100%;
	--cheval-cartes-stagger: 110ms;
}

/* Clip uniquement pendant l'entrée — sinon la flèche hover est coupée. */
[data-cheval-cartes-stagger].is-cheval-cartes-pending {
	overflow-x: clip;
}

[data-cheval-cartes-stagger].is-cheval-cartes-in {
	overflow-x: visible;
}

[data-cheval-cartes-stagger].is-cheval-cartes-pending .cheval-cartes-list__row {
	opacity: 0;
	transform: translateX( var( --cheval-cartes-tx ) );
	pointer-events: auto;
}

[data-cheval-cartes-stagger].is-cheval-cartes-in .cheval-cartes-list__row {
	opacity: 1;
	transform: translateX( 0 );
	transition:
		opacity var( --cheval-cartes-duration ) ease,
		transform var( --cheval-cartes-duration ) ease;
	transition-delay: calc(
		var( --cheval-cartes-i, 0 ) * var( --cheval-cartes-stagger )
	);
}

@media ( prefers-reduced-motion: reduce ) {
	[data-cheval-cartes-stagger] .cheval-cartes-list__row,
	[data-cheval-cartes-stagger].is-cheval-cartes-pending .cheval-cartes-list__row,
	[data-cheval-cartes-stagger].is-cheval-cartes-in .cheval-cartes-list__row {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		transition-delay: 0ms !important;
	}
}

/*
 * Section Galerie — pleine largeur fluide (marges root site).
 */
.wp-block-techniconcept-project-galerie,
.wp-block-techniconcept-project-galerie.alignfull {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
}

/*
 * Carrousel Galerie — proportions natives, hauteurs variables, alignement bas
 * (spécificité > CSS bloc éventuellement cache).
 */
.wp-block-techniconcept-project-galerie .cheval-galerie-carousel__strip {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	gap: var( --cheval-carousel-gap, 24px );
	width: max-content;
	height: auto;
	min-height: 0;
}

.wp-block-techniconcept-project-galerie .cheval-galerie-carousel__cell {
	flex: 0 0 auto;
	width: auto;
	height: auto;
	overflow: visible;
}

.wp-block-techniconcept-project-galerie .cheval-galerie-carousel__cell img {
	display: block;
	width: auto;
	height: auto;
	max-width: var( --cheval-carousel-max-w, 566px );
	max-height: var( --cheval-carousel-max-h, 480px );
	object-fit: contain;
	object-position: bottom center;
}

.wp-block-techniconcept-project-galerie
	.cheval-galerie-carousel.is-marquee-ready
	.cheval-galerie-carousel__track.is-active
	.cheval-galerie-carousel__strip {
	animation-name: cheval-galerie-marquee;
	animation-duration: 20s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes cheval-galerie-marquee {
	from {
		transform: translateX( 0 );
	}
	to {
		transform: translateX( -50% );
	}
}

/*
 * Texte circulaire Footer — reduced-motion : pas de lerp continu.
 * pointer-events reste auto (CTA ZenChef toujours cliquable).
 */
[data-cheval-circular-text] {
	pointer-events: auto;
}

[data-cheval-circular-text].is-circular-reduced-motion {
	--cheval-circular-spin: 0deg !important;
}

@media ( prefers-reduced-motion: reduce ) {
	[data-cheval-circular-text] {
		--cheval-circular-spin: 0deg !important;
	}

	[data-cheval-circular-text] .cheval-circular-text__char {
		transition: none !important;
	}

	.wp-block-techniconcept-project-galerie
		.cheval-galerie-carousel
		.cheval-galerie-carousel__strip {
		animation: none !important;
	}

	.cheval-arrival,
	.cheval-arrival__veil,
	.cheval-arrival__line {
		transition: none !important;
		animation: none !important;
	}
}

/* -------------------------------------------------------------------------
 * Séquence d’arrivée FR-16
 * 1 outline : fond noir + wordmarks SVG stroke-draw (sans LE/BY)
 * 2 solid   : plein blanc + LE/BY
 * 3 morph   : lockup → wordmarks header + révélation Hero/nav
 * 4 unlock  : fin overlay
 * ------------------------------------------------------------------------- */

html.is-cheval-intro-locked {
	overflow: hidden;
	scrollbar-gutter: stable;
}

/*
 * Intro : fond page reste noir jusqu'a la fin (complete).
 * Ne pas passer au blanc au morph (wordmarks) — sinon flash blanc
 * derriere le voile avant la nav / Hero (surtout mobile).
 */
html.is-cheval-intro-locked,
html.is-cheval-intro-locked body {
	background-color: var( --wp--preset--color--primary, #000 );
}

html.is-cheval-arrival-complete,
html.is-cheval-arrival-complete body {
	background-color: var( --wp--preset--color--background, #fff );
	transition: background-color 0.6s ease;
}

/* Overlay plein viewport : lockup toujours centre ecran. */
.cheval-arrival {
	position: fixed;
	inset: 0;
	z-index: 190;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.cheval-arrival.is-cheval-arrival-done {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.55s ease, visibility 0s linear 0.55s;
}

.cheval-arrival__veil {
	position: absolute;
	inset: 0;
	background: var( --wp--preset--color--primary, #000 );
	opacity: 1;
	/* Fond blanc derriere : fondu long et fluide. */
	transition: opacity 1.6s cubic-bezier( 0.4, 0, 0.2, 1 );
}

/* Morph / unlock : le voile s’efface (Hero / blanc derrière). */
.cheval-arrival--step-3 .cheval-arrival__veil,
.cheval-arrival--step-4 .cheval-arrival__veil,
.cheval-arrival.is-cheval-arrival-done .cheval-arrival__veil {
	opacity: 0;
}

/*
 * Composition SoT : lockup en marche, centre dans le viewport (flex parent).
 * Les 2 marks restent dans 0–100 % pour que le centre visuel = centre ecran.
 */
.cheval-arrival__lockup {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: min( 92vw, 36rem );
	aspect-ratio: 16 / 10;
	max-height: min( 50vh, 28rem );
	margin: 0;
	overflow: visible;
}

.cheval-arrival__filters {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.cheval-arrival__mark {
	position: absolute;
	width: min( 58%, 19rem );
	aspect-ratio: 389 / 150;
	transition:
		transform 2.4s cubic-bezier( 0.22, 1, 0.36, 1 ),
		opacity 1.8s ease;
	will-change: transform, opacity;
}

.cheval-arrival__mark--left {
	left: 0;
	top: 12%;
}

.cheval-arrival__mark--right {
	right: 0;
	top: 38%;
	bottom: auto;
	aspect-ratio: 375 / 150;
}

/*
 * Desktop — Y du BY sous le L de CHEVAL, duo centre dans le lockup.
 * Marks ~55 % ; right left 45 % → emprise 0–100 %, centre = 50 %.
 */
@media ( min-width: 782px ) {
	.cheval-arrival__mark {
		width: min( 55%, 18rem );
	}

	.cheval-arrival__mark--left {
		left: 0;
		top: 10%;
	}

	.cheval-arrival__mark--right {
		left: 45%;
		right: auto;
		top: 28%;
	}
}

/* Mobile : air vertical ; marks aux bords pour rester centres horizontalement. */
@media ( max-width: 781px ) {
	.cheval-arrival__mark--left {
		top: 8%;
	}

	.cheval-arrival__mark--right {
		top: 40%;
	}
}

/* SVG inline : dessin contour glyphe par glyphe (fin). */
.cheval-arrival__svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.cheval-arrival--step-1 .cheval-arrival__svg path {
	fill: transparent;
	stroke: var( --wp--preset--color--intro-type-outline, #c8c8c8 );
	stroke-width: 0.9;
	stroke-linejoin: miter;
	stroke-linecap: square;
	vector-effect: non-scaling-stroke;
	/* Pas de transition fill/stroke : le plein est un cut, pas une 2e anim. */
	transition: none;
}

.cheval-arrival--step-1 .is-cheval-glyph-draw {
	animation: cheval-glyph-draw 1.35s cubic-bezier( 0.4, 0, 0.2, 1 ) forwards;
	animation-delay: var( --cheval-draw-delay, 0ms );
}

@keyframes cheval-glyph-draw {
	to {
		stroke-dashoffset: 0;
	}
}

/*
 * LE / BY : invisibles pendant tout le contour (pas de transition ici —
 * sinon au fetch SVG ils restent visibles en fade-out pendant le stroke).
 */
.cheval-arrival--step-1 .is-cheval-outline-skip {
	opacity: 0;
	visibility: hidden;
	transition: none;
}

.cheval-arrival--step-1 .is-cheval-outline-skip path {
	fill: none !important;
	stroke: none !important;
	animation: none !important;
}

/*
 * Plein blanc : cut instantane, sans changement de silhouette.
 * On conserve le meme stroke-width (blanc) — retirer le stroke
 * faisait « retrecir » les lettres (= faux mouvement apres contour).
 */
.cheval-arrival--step-2 .cheval-arrival__svg path,
.cheval-arrival--step-3 .cheval-arrival__svg path,
.cheval-arrival--step-4 .cheval-arrival__svg path {
	fill: var( --wp--preset--color--background, #fff );
	stroke: var( --wp--preset--color--background, #fff );
	stroke-width: 0.9;
	stroke-linejoin: miter;
	stroke-linecap: square;
	vector-effect: non-scaling-stroke;
	animation: none;
	stroke-dashoffset: 0;
	transition: none;
}

/* LE / BY : fondu tres progressif (depart lent) apres le plein. */
.cheval-arrival--step-2 .is-cheval-outline-skip,
.cheval-arrival--step-3 .is-cheval-outline-skip,
.cheval-arrival--step-4 .is-cheval-outline-skip {
	opacity: 1;
	visibility: visible;
	transition: opacity 2.8s cubic-bezier( 0.22, 0.05, 0.2, 1 );
}

/* Fallback img si fetch SVG impossible. */
.cheval-arrival__logo-contour {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: url( #cheval-arrival-outline );
	opacity: 0;
	transition: none;
}

.cheval-arrival__logo-solid {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: brightness( 0 ) invert( 1 );
	opacity: 0;
	transition: none;
}

.cheval-arrival__mark.is-cheval-mark-inlined .cheval-arrival__logo-contour,
.cheval-arrival__mark.is-cheval-mark-inlined .cheval-arrival__logo-solid {
	visibility: hidden;
}

/* Étape 1 fallback : wipe simultane gauche + droite. */
.cheval-arrival--step-1 .cheval-arrival__logo-contour {
	opacity: 1;
	clip-path: inset( 0 100% 0 0 );
	animation: cheval-wipe-draw 1.15s cubic-bezier( 0.4, 0, 0.2, 1 ) forwards;
	animation-delay: 0s;
}

@keyframes cheval-wipe-draw {
	to {
		clip-path: inset( 0 0 0 0 );
	}
}

.cheval-arrival__mark.is-cheval-mark-inlined .cheval-arrival__logo-contour {
	animation: none;
	clip-path: none;
	opacity: 0;
}

/* Étape 2+ : plein remplace le contour (cut, sans fondu). */
.cheval-arrival--step-2 .cheval-arrival__logo-solid,
.cheval-arrival--step-3 .cheval-arrival__logo-solid,
.cheval-arrival--step-4 .cheval-arrival__logo-solid {
	opacity: 1;
}

.cheval-arrival--step-2 .cheval-arrival__logo-contour,
.cheval-arrival--step-3 .cheval-arrival__logo-contour,
.cheval-arrival--step-4 .cheval-arrival__logo-contour {
	opacity: 0;
	animation: none;
	clip-path: none;
	transition: none;
}

/* Morph : les 2 logos partent vers les coins Header. */
.cheval-arrival--step-3 .cheval-arrival__mark--left,
.cheval-arrival--step-4 .cheval-arrival__mark--left {
	transform: translate( -32vw, -42vh ) scale( 0.38 );
	opacity: 0;
}

.cheval-arrival--step-3 .cheval-arrival__mark--right,
.cheval-arrival--step-4 .cheval-arrival__mark--right {
	transform: translate( 32vw, -42vh ) scale( 0.38 );
	opacity: 0;
}

.cheval-arrival--step-3 .cheval-arrival__logo-solid,
.cheval-arrival--step-4 .cheval-arrival__logo-solid {
	filter: none;
}

/* Hero masqué pendant contour / plein. */
html.is-cheval-intro-locked [data-cheval-hero-media].is-cheval-arrival-pending {
	opacity: 0;
}

html.is-cheval-arrival-hero-visible [data-cheval-hero-media],
[data-cheval-hero-media].is-cheval-arrival-revealed {
	opacity: 1;
	transition: opacity 0.85s ease;
}

html.is-cheval-intro-locked [data-cheval-circular-text]:not( .is-cheval-arrival-revealed ) {
	opacity: 0;
	visibility: hidden;
}

html.is-cheval-arrival-circular-visible [data-cheval-circular-text],
[data-cheval-circular-text].is-cheval-arrival-revealed {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease;
}

html.is-cheval-arrival-nav-visible .cheval-arrival {
	pointer-events: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.cheval-arrival__mark,
	.cheval-arrival__logo-contour,
	.cheval-arrival__logo-solid,
	.cheval-arrival__veil,
	.cheval-arrival--step-1 .is-cheval-glyph-draw {
		transition: none !important;
		animation: none !important;
	}
}