/**
 * SS4Y — apparitions au défilement.
 *
 * Fichier volontairement isolé : il ne contient aucune règle de mise en page,
 * seulement de l'opacité et une translation de quelques pixels. Le supprimer
 * de la file d'attente dans inc/assets.php rend le site strictement identique,
 * sans effet de bord.
 *
 * Trois garde-fous :
 * - `@supports` : sans animations liées au défilement, rien ne s'applique et
 *   le contenu s'affiche normalement. Jamais de texte bloqué à l'invisible.
 * - `prefers-reduced-motion` : réglage système respecté, aucune animation.
 * - opacité et `translate` uniquement : rien qui décale le rendu final, donc
 *   le design reste celui validé.
 *
 * Volontairement absents : le hero et le bandeau promo, déjà visibles à
 * l'arrivée, et les sections sombres dont le fond trahirait la translation.
 */

@keyframes ss4y-reveal {

	from {
		opacity: 0;
		translate: 0 14px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@supports (animation-timeline: view()) {

	@media (prefers-reduced-motion: no-preference) {

		/* ─── Unités qui apparaissent ──────────────────────────────────────
		   En-têtes de section, cartes et colonnes de contenu : les blocs que
		   l'œil lit comme un ensemble. */
		.ss4y-advantages__header,
		.ss4y-advantages__card,
		.ss4y-services__header,
		.ss4y-services__item,
		.ss4y-solutions__header,
		.ss4y-solutions__feature,
		.ss4y-solutions__card,
		.ss4y-pricing__header,
		.ss4y-plan,
		.ss4y-process__header,
		.ss4y-process__step,
		.ss4y-team__header,
		.ss4y-team__member,
		.ss4y-mediatext__figure,
		.ss4y-mediatext__content,
		.ss4y-testimonials__intro,
		.ss4y-testimonials__card,
		.ss4y-cta__panel,
		.ss4y-form-section__header,
		.ss4y-form-section__cols,
		.ss4y-loop__list > li {

			/*
			 * Décalage de départ, redéfini plus bas pour échelonner les
			 * éléments d'une même rangée.
			 */
			--ss4y-reveal-start: 6%;

			animation: ss4y-reveal linear both;
			animation-timeline: view();
			animation-range: entry var(--ss4y-reveal-start) cover 34%;
		}

		/* ─── Échelonnement ────────────────────────────────────────────────
		   Trois crans suffisent : au-delà, le dernier élément d'une rangée
		   arriverait trop tard et l'effet se remarquerait. */
		.ss4y-advantages__card:nth-child(2),
		.ss4y-services__item:nth-child(2),
		.ss4y-solutions__card:nth-child(2),
		.ss4y-plan:nth-child(2),
		.ss4y-process__step:nth-child(2),
		.ss4y-team__member:nth-child(2),
		.ss4y-testimonials__card:nth-child(2),
		.ss4y-loop__list > li:nth-child(3n + 2) {
			--ss4y-reveal-start: 13%;
		}

		.ss4y-advantages__card:nth-child(n + 3),
		.ss4y-services__item:nth-child(n + 3),
		.ss4y-solutions__card:nth-child(n + 3),
		.ss4y-plan:nth-child(n + 3),
		.ss4y-process__step:nth-child(n + 3),
		.ss4y-team__member:nth-child(n + 3),
		.ss4y-loop__list > li:nth-child(3n) {
			--ss4y-reveal-start: 20%;
		}

		/* La photo arrive après le texte : le regard part du titre. */
		.ss4y-mediatext__figure {
			--ss4y-reveal-start: 13%;
		}
	}
}