/*
 * Brique apparition : un élément marqué data-dqb-apparition glisse et se dévoile quand il entre à
 * l'écran ; plusieurs éléments qui entrent ensemble se suivent (décalage posé par le JS).
 * Effets : monter (par défaut), fondu, gauche, droite, zoom. Réglages locaux, sur la section :
 * --apparition-duree (600ms) et --apparition-distance (--espace-5).
 *
 * Rien n'est masqué tant que le script n'a pas posé dqb-apparition-prete sur <html> : sans JS, ou si
 * le script échoue, tout reste visible. En mouvement réduit, le script ne se lance pas. Ce qui est
 * déjà à l'écran au chargement (le hero, l'image principale) n'est jamais animé.
 * Seuls opacity, translate et scale bougent : aucun recalcul de mise en page.
 */

@media (prefers-reduced-motion: no-preference) {
	/* La transition n'est que sur l'état visible : le masquage, à l'activation, est instantané. */
	.dqb-apparition-prete [data-dqb-apparition] {
		&:not(.is-visible) {
			opacity: 0;
			translate: 0 var(--apparition-distance, var(--espace-5));
		}

		&.is-visible {
			transition:
				opacity var(--apparition-duree, 600ms) ease-out,
				translate var(--apparition-duree, 600ms) ease-out,
				scale var(--apparition-duree, 600ms) ease-out;
			transition-delay: var(--apparition-delai, 0ms);
		}
	}

	.dqb-apparition-prete [data-dqb-apparition="fondu"]:not(.is-visible) {
		translate: none;
	}

	.dqb-apparition-prete [data-dqb-apparition="gauche"]:not(.is-visible) {
		translate: calc(-1 * var(--apparition-distance, var(--espace-5))) 0;
	}

	.dqb-apparition-prete [data-dqb-apparition="droite"]:not(.is-visible) {
		translate: var(--apparition-distance, var(--espace-5)) 0;
	}

	.dqb-apparition-prete [data-dqb-apparition="zoom"]:not(.is-visible) {
		translate: none;
		scale: 0.96;
	}
}

/* À l'impression, tout est visible : même poids que les règles qui masquent, placé après elles. */
@media print {
	.dqb-apparition-prete [data-dqb-apparition]:not(.is-visible) {
		opacity: 1;
		translate: none;
		scale: none;
	}
}

/* Compteur : les chiffres ne font pas bouger le texte autour pendant qu'ils défilent. */
.dqb-compteur {
	font-variant-numeric: tabular-nums;
}