/*
 * Think2Make — animations. Référence : prototype/source/v2.py (blocs « scroll-based motion » et « page transitions »).
 * Animations liées au défilement (animation-timeline) seulement là où elles sont prises en charge ;
 * tout est coupé avec prefers-reduced-motion.
 * Les animations propres aux sections (photos, cartes, frise…) arrivent avec les modèles de blocs.
 */

/* Ombre de l'en-tête dès que la page défile */
@supports (animation-timeline: scroll()) {
	.t2m-header .t2m-hd {
		animation: t2m-hd-shadow linear both;
		animation-timeline: scroll(root);
		animation-range: 0 120px;
	}
	@keyframes t2m-hd-shadow {
		to { box-shadow: var(--wp--custom--shadow--header); }
	}
}

/* Transitions entre les pages (navigation dans le même site) */
@view-transition {
	navigation: auto;
}
.t2m-header {
	view-transition-name: t2m-header;
}
::view-transition-old(root) {
	animation: t2m-vt-out .28s ease both;
}
::view-transition-new(root) {
	animation: t2m-vt-in .38s var(--wp--custom--ease) both;
}
@keyframes t2m-vt-out {
	to { opacity: 0; transform: translateY(-8px); }
}
@keyframes t2m-vt-in {
	from { opacity: 0; transform: translateY(12px); }
}

/* Entrée du hero au chargement (maquette : .in, .d1 à .d3) */
@keyframes t2m-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}
.t2m-in { animation: t2m-in .7s var(--wp--custom--ease) both; }
.t2m-d1 { animation-delay: .08s; }
.t2m-d2 { animation-delay: .16s; }
.t2m-d3 { animation-delay: .24s; }

/* Sections : animations liées au défilement */
@supports (animation-timeline: view()) {
	/* Photos : cadre qui se dévoile, image qui se resserre */
	.t2m-ph .t2m-im {
		animation: t2m-wipe linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 55%;
	}
	.t2m-ph .t2m-im img {
		animation: t2m-zoom linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 50%;
	}
	@keyframes t2m-wipe {
		from { clip-path: inset(0 0 18% 0); }
		to { clip-path: inset(0 0 0 0); }
	}
	@keyframes t2m-zoom {
		from { scale: 1.14; }
		to { scale: 1; }
	}

	/* Titres, chapeaux, cartes et éléments de liste qui montent */
	.t2m-sec h2,
	.t2m-sec .t2m-lead,
	.t2m-head .t2m-lnk,
	.wp-block-group.t2m-grid-2 > *,
	.wp-block-group.t2m-grid-3 > *,
	.wp-block-group.t2m-grid-4 > *,
	.t2m-checks > li {
		animation: t2m-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 70%;
	}
	.t2m-sec h2,
	.t2m-sec .t2m-lead,
	.t2m-head .t2m-lnk {
		animation-range: entry 0% entry 60%;
	}
	.wp-block-group[class*="t2m-grid-"] > :nth-child(2),
	.t2m-checks > li:nth-child(2) { animation-range: entry 8% entry 78%; }
	.wp-block-group[class*="t2m-grid-"] > :nth-child(3),
	.t2m-checks > li:nth-child(3) { animation-range: entry 16% entry 86%; }
	.wp-block-group[class*="t2m-grid-"] > :nth-child(4),
	.t2m-checks > li:nth-child(4) { animation-range: entry 24% entry 94%; }
	.t2m-ben__item,
	.t2m-faq .wp-block-details {
		animation: t2m-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 100%;
	}
	/*
	 * Lisibilité (WCAG 2.2 AA) : un élément entièrement à l'écran est toujours net. Le fondu se termine au premier
	 * tiers du mouvement, et chaque apparition est finie quand l'élément est entré en entier (plages « entry »),
	 * même si le visiteur s'arrête de défiler à ce moment-là.
	 */
	@keyframes t2m-up {
		from { opacity: 0; transform: translateY(28px); }
		35% { opacity: 1; }
		to { opacity: 1; transform: none; }
	}

	/* Mosaïque du hero : parallaxe légère */
	.t2m-mosaic > :nth-child(1) { animation: t2m-par1 linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
	.t2m-mosaic > :nth-child(2) { animation: t2m-par2 linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
	.t2m-mosaic > :nth-child(3) { animation: t2m-par3 linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
	@keyframes t2m-par1 { to { transform: translateY(-40px); } }
	@keyframes t2m-par2 { to { transform: translateY(-90px); } }
	@keyframes t2m-par3 { to { transform: translateY(-20px); } }

	/* Déroulement : la barre rouge avance avec la section, les numéros s'allument */
	.t2m-tl {
		view-timeline-name: --t2m-tl;
	}
	.t2m-tl .t2m-tl__title::after {
		animation: t2m-fill linear both;
		animation-timeline: --t2m-tl;
		animation-range: entry 40% cover 55%;
	}
	@keyframes t2m-fill {
		from { transform: scaleX(0); }
		to { transform: scaleX(1); }
	}
	.t2m-tl .t2m-num {
		animation: t2m-num linear both;
		animation-timeline: view();
		animation-range: entry 20% entry 90%;
	}
	/* Départ à .62 et non .15 : le numéro (grand texte) reste lisible, contraste 3:1 (WCAG 2.2 AA). */
	@keyframes t2m-num {
		from { opacity: .62; transform: translateY(12px); }
		to { opacity: 1; transform: none; }
	}

	/* Appel à l'action et grandes citations */
	.t2m-cta__img img {
		animation: t2m-zoom linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 60%;
	}
	.t2m-quote--big > p {
		animation: t2m-ink linear both;
		animation-timeline: view();
		animation-range: entry 10% cover 45%;
	}
	/* Du gris au noir : le gris de départ (texte discret, 5,3:1 au moins) reste lisible, la citation fait 18 px sur mobile. */
	@keyframes t2m-ink {
		from { color: var(--wp--preset--color--muted); }
		to { color: var(--wp--preset--color--ink); }
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after,
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
		transition: none !important;
	}
	/* Comme la maquette : pas de barre de progression du déroulement. */
	.t2m-tl .t2m-tl__title { padding-bottom: 0; margin-bottom: 48px; }
	.t2m-tl .t2m-tl__title::before,
	.t2m-tl .t2m-tl__title::after { display: none; }
}