/* Homepage-only polish: same hero photo as macotisation.fr (home-header.webp,
   set by the base theme stylesheet) with a readability overlay added — the
   original had none, and white text directly on open sky is low-contrast —
   plus subtle entrance motion and consistent hover states on the content
   blocks already authored in the page content (.mc-band, .mc-cols,
   .mc-trust, wp-block-button). Loaded only on "/" — kept out of every other
   page's payload. */

.home-header {
	background-image:
		linear-gradient(180deg, rgba(27, 58, 107, .55) 0%, rgba(27, 58, 107, .32) 45%, rgba(27, 58, 107, .55) 100%),
		url(/wp-content/themes/macotisation/img/home-header.webp) !important;
	background-size: cover !important;
	background-position: 0 80% !important;
}

.home-header h1,
.home-header .sub-title,
.home-header .create-association {
	animation: mcHeroUp .7s cubic-bezier(.16, 1, .3, 1) both;
}
.home-header .sub-title { animation-delay: .08s; }
.home-header .create-association { animation-delay: .16s; }

@keyframes mcHeroUp {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

.home-header .create-association {
	transition: box-shadow .25s ease, transform .25s ease;
}
.home-header .create-association:hover {
	box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
	transform: translateY(-2px);
}

/* Stat band cards (.mc-item, from the page content) get a soft hover lift. */
.mc-item { transition: transform .2s ease, background-color .2s ease; }
.mc-item:hover { transform: translateY(-3px); background-color: #2f5c94; }

/* CTA buttons authored in the page content share one hover treatment. */
.mc-cta,
.wp-block-button__link {
	transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease !important;
}
.mc-cta:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(211, 17, 72, .28);
}

.mc-trust .item { transition: background-color .2s ease; }
.mc-trust .item:hover { background-color: #eef3fb; border-radius: 10px; }

/* Scroll-reveal for the page's content sections (progressive enhancement —
   sections are visible by default; JS only adds the motion). */
.reveal-on-scroll {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s ease;
}
.reveal-on-scroll.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.home-header h1, .home-header .sub-title, .home-header .create-association {
		animation: none;
	}
	.reveal-on-scroll {
		opacity: 1;
		transform: none;
		transition: none;
	}
}