/* ==================================================
HOME HERO
================================================== */
/*
* Fond noir extérieur.
*
* Le groupe est constrained exactement comme
* .site-topbar et .site-navbar.
*/
.home-hero {
	width: 100%;
	margin: 0;
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.home-hero__inner {
	position: relative;
	width: 100%;
	min-height: 0;
	overflow: hidden;
}

.home-hero__background {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.home-hero__background::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;

	background:
		
		linear-gradient(
			to right,
			#0A0A0A 0%,
			#0A0A0A 12%,
			rgba(10, 10, 10, 0.95) 24%,
			rgba(10, 10, 10, 0.72) 38%,
			rgba(10, 10, 10, 0.30) 48%,
			rgba(10, 10, 10, 0) 58%
		),

		
		linear-gradient(
			to bottom,
			rgba(10, 10, 10, 0) 42%,
			rgba(10, 10, 10, 0.20) 55%,
			rgba(10, 10, 10, 0.55) 70%,
			rgba(10, 10, 10, 0.90) 84%,
			#0A0A0A 94%,
			#0A0A0A 100%
		),

	
		linear-gradient(
			to left,
			rgba(10, 10, 10, 0.75) 0%,
			rgba(10, 10, 10, 0.40) 6%,
			rgba(10, 10, 10, 0.15) 12%,
			rgba(10, 10, 10, 0) 20%
		);
}

.home-hero__background-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.home-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	box-sizing: border-box;
	padding:
	128px
	64px
	64px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 64px;
}

/* ==================================================
TEXT
================================================== */
.home-hero__text {
	width: min(100%, 720px);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.home-hero__title {
	margin: 0;
	color: inherit;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 900;
	font-size : var(--wp--preset--font-size--display);
	line-height: 0.95;
}

.home-hero__description {
	width: min(100%, 600px);
	margin: 0;
	color: inherit;
	line-height: 1.4;
}

/* ==================================================
BUTTONS
================================================== */
.home-hero__buttons {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 16px;
}

/* ==================================================
MOBILE
================================================== */
@media (max-width: 782px) {
	.home-hero__background-image {
		object-position: center;
	}

		.home-hero__background::after {
		background:
		
			linear-gradient(
				to right,
				#0A0A0A 0%,
				#0A0A0A 20%,
				rgba(10, 10, 10, 0.96) 35%,
				rgba(10, 10, 10, 0.82) 50%,
				rgba(10, 10, 10, 0.55) 62%,
				rgba(10, 10, 10, 0.25) 72%,
				rgba(10, 10, 10, 0) 80%
			),
			
			linear-gradient(
				to bottom,
				rgba(10, 10, 10, 0) 55%,
				rgba(10, 10, 10, 0.25) 68%,
				rgba(10, 10, 10, 0.60) 80%,
				rgba(10, 10, 10, 0.92) 91%,
				#0A0A0A 97%,
				#0A0A0A 100%
			);
	}

	.home-hero__content {
		padding:
		96px
		20px
		48px;
		gap: 48px;
	}

	.home-hero__text {
		width: min(80%, 520px);
	}

	.home-hero__description {
		width: 100%;
	}

}

/* ==================================================
HOME HERO — INTRO
================================================== */
.home-hero__title-line,
.home-hero__description-line {
	display: block;
}

/* H1 */
.home-hero__title-line {
	opacity: 0;
	transform: translateX(-32px);
	transition:
	opacity 650ms ease,
	transform 650ms cubic-bezier(.22, 1, .36, 1);
}

/* Description */
.home-hero__description-line {
	opacity: 0;
	transform: translateY(14px);
	transition:
	opacity 520ms ease,
	transform 520ms cubic-bezier(.22, 1, .36, 1);
}

/* Buttons */
.home-hero__buttons .wp-block-button {
	opacity: 0;
	transform: translateY(20px) scale(.97);
	transition:
	opacity 520ms ease,
	transform 520ms cubic-bezier(.22, 1, .36, 1);
}

/* ==================================================
HERO VISIBLE
================================================== */
.home-hero.is-intro-visible .home-hero__title-line,
.home-hero.is-intro-visible .home-hero__description-line,
.home-hero.is-intro-visible .home-hero__buttons .wp-block-button {
	opacity: 1;
	transform: translate(0) scale(1);
}

/* H1 stagger */
.home-hero.is-intro-visible .home-hero__title-line:nth-child(1) {
	transition-delay: 250ms;
}

.home-hero.is-intro-visible .home-hero__title-line:nth-child(2) {
	transition-delay: 350ms;
}

.home-hero.is-intro-visible .home-hero__title-line:nth-child(3) {
	transition-delay: 450ms;
}

.home-hero.is-intro-visible .home-hero__title-line:nth-child(4) {
	transition-delay: 550ms;
}

/* Description stagger */
.home-hero.is-intro-visible .home-hero__description-line:nth-child(1) {
	transition-delay: 700ms;
}

.home-hero.is-intro-visible .home-hero__description-line:nth-child(2) {
	transition-delay: 770ms;
}

.home-hero.is-intro-visible .home-hero__description-line:nth-child(3) {
	transition-delay: 840ms;
}

/* Buttons stagger */
.home-hero.is-intro-visible .home-hero__buttons .wp-block-button:nth-child(1) {
	transition-delay: 980ms;
}

.home-hero.is-intro-visible .home-hero__buttons .wp-block-button:nth-child(2) {
	transition-delay: 1080ms;
}

/* ==================================================
REDUCED MOTION
================================================== */
@media (prefers-reduced-motion: reduce) {
	.home-hero__title-line,
	.home-hero__description-line,
	.home-hero__buttons .wp-block-button {
		opacity: 1;
		transform: none;
		transition: none;
	}

}