/* ===== Apparition des sections au défilement =====
 *
 * Rien n'est masqué par défaut : c'est le script qui pose « js-anime » sur
 * <html>, et c'est seulement à partir de là que les sections partent cachées.
 * Sans JavaScript, ou si le script échoue, la page reste entièrement lisible —
 * ce qui vaut aussi pour les robots, les aperçus de partage et les captures.
 *
 * L'en-tête de page n'est jamais animé : c'est la première chose qu'on lit, et
 * la retarder d'une demi-seconde se paie en lisibilité, pas en élégance.
 */

/* « :where() » ne pèse rien dans le calcul de spécificité : avec deux
   « :not() » ordinaires, cette règle valait plus que celle qui révèle, et les
   sections restaient invisibles une fois marquées. */
.js-anime .section:not(:where(.page-hero, .hero)) {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s ease-out, transform .55s ease-out;
	will-change: opacity, transform;
}

.js-anime .section.est-visible {
	opacity: 1;
	transform: none;
}

/* Les variantes que le contenu peut demander, section par section, par le
   champ « animation ». Sans demande, c'est le glissement discret ci-dessus. */
.js-anime .section[data-anime="fade"]  { transform: none; }
.js-anime .section[data-anime="slide"] { transform: translateY(34px); }
.js-anime .section[data-anime="zoom"]  { transform: scale(.975); }
.js-anime .section[data-anime="zoom"].est-visible { transform: none; }

/* « none » : la section ne s'anime pas du tout — ce qu'on veut d'un bandeau
   d'alerte ou d'une section qu'on cible par une ancre. */
.js-anime .section[data-anime="none"] {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Les enfants d'une grille arrivent l'un après l'autre. Le décalage est
   plafonné : au-delà de six, la dernière carte paraîtrait oubliée. */
.js-anime .section.est-visible .grid-2 > *,
.js-anime .section.est-visible .grid-3 > *,
.js-anime .section.est-visible .grid-4 > *,
.js-anime .section.est-visible .gallery > *,
.js-anime .section.est-visible .pricing-three > * {
	animation: jolifish-monte .5s ease-out backwards;
	animation-delay: calc( var( --i, 0 ) * 70ms );
}

@keyframes jolifish-monte {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* Une demande système, pas une préférence décorative : on ne tente pas de
   « version douce », on supprime. */
@media ( prefers-reduced-motion: reduce ) {
	.js-anime .section,
	.js-anime .section.est-visible .grid-2 > *,
	.js-anime .section.est-visible .grid-3 > *,
	.js-anime .section.est-visible .grid-4 > *,
	.js-anime .section.est-visible .gallery > *,
	.js-anime .section.est-visible .pricing-three > * {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}
}