/**
 * Reveal — apparition progressive au scroll.
 *
 * Approche à amelioration progressive : sans JS, ou moteur de recherche,
 * tout le contenu est visible immediatement (aucune regle ci-dessous ne
 * s'applique). Seule la presence de la classe .js sur <html> — posee par
 * un script synchrone dans <head> — active l'etat cache initial, pour
 * eviter tout flash de contenu non anime au premier rendu.
 *
 * Les selecteurs couvrent les blocs natifs (titres, mosaiques, cartes) :
 * aucune classe a ajouter dans le contenu, un nouveau titre cree par le
 * client dans l'editeur herite du comportement sans intervention.
 *
 * Deux composants sont traites comme des cases : la mosaique et les
 * cartes a indice. Leur contenu entre ligne par ligne, tandis que le cadre
 * ou le filet de tete reste fixe.
 *
 * Regle du systeme : un element anime n'en contient jamais un autre.
 * Deux translations superposees donnent une course molle et desordonnee,
 * d'ou le :not() sur les descendants de case.
 */

@media (prefers-reduced-motion: no-preference) {
	html.js :where(
		h1, h2, h3,
		.eyebrow, .lede,
		.card,
		.stat,
		.wp-block-image,
		.wp-block-buttons
	):not(:is(.mosaic__cell, .cards-numbered > .wp-block-column, .columns-ruled--promises > .wp-block-column) *),
	html.js :is(.mosaic__cell, .cards-numbered > .wp-block-column, .columns-ruled--promises > .wp-block-column) > * {
		opacity: 0;
		transform: translateY(var(--reveal-shift, var(--reveal-offset)));
		transition:
			opacity var(--duration-slow) var(--ease),
			transform var(--duration-slow) var(--ease);
		transition-delay: calc(
			var(--reveal-index, 0) * var(--reveal-stagger) +
			var(--reveal-child, 0) * var(--reveal-stagger-tight)
		);
	}

	html.js :where(
		h1, h2, h3,
		.eyebrow, .lede,
		.card,
		.stat,
		.wp-block-image,
		.wp-block-buttons
	):not(:is(.mosaic__cell, .cards-numbered > .wp-block-column, .columns-ruled--promises > .wp-block-column) *).is-inview,
	html.js :is(.mosaic__cell, .cards-numbered > .wp-block-column, .columns-ruled--promises > .wp-block-column).is-inview > * {
		opacity: 1;
		transform: none;
	}

	/* La case de mosaique ne bouge pas et ne s'efface pas : ses filets sont
	   le fond de la grille vu dans la gouttiere de 1px. La faire glisser
	   decouvre ce fond et fait flotter les traits. Seul son contenu entre,
	   sur une course courte, ligne par ligne. */
	html.js :is(.mosaic__cell, .cards-numbered > .wp-block-column, .columns-ruled--promises > .wp-block-column) > * {
		--reveal-shift: var(--reveal-offset-tight);
	}

	html.js :is(.mosaic__cell, .cards-numbered > .wp-block-column, .columns-ruled--promises > .wp-block-column) > :nth-child(2) {
		--reveal-child: 1;
	}

	html.js :is(.mosaic__cell, .cards-numbered > .wp-block-column, .columns-ruled--promises > .wp-block-column) > :nth-child(3) {
		--reveal-child: 2;
	}

	html.js :is(.mosaic__cell, .cards-numbered > .wp-block-column, .columns-ruled--promises > .wp-block-column) > :nth-child(n + 4) {
		--reveal-child: 3;
	}
}