/* ==========================================================================
   Apparitions au scroll : [data-apparition="texte | image | tampon | trait | fondu"].
   apparition.js ajoute .est-visible quand l'élément entre dans l'écran.
   --ordre (0, 1, 2…) décale les éléments qui apparaissent ensemble.

   Propriétés individuelles (translate, scale, rotate) : elles se combinent avec les
   transform existants (titre retourné, etc.) sans les écraser.
   Sans JS, avec prefers-reduced-motion ou si le script ne se charge pas
   (.apparition-secours), tout est visible immédiatement.
   ========================================================================== */

.js [data-apparition] {
	transition:
		opacity var(--t-apparition) var(--courbe-apparition),
		translate var(--t-apparition) var(--courbe-apparition),
		scale var(--t-apparition) var(--courbe-apparition),
		rotate var(--t-apparition) var(--courbe-apparition),
		clip-path var(--t-apparition) var(--courbe-apparition);
	transition-delay: calc(var(--ordre, 0) * var(--t-apparition-pas));
}

/* Image : son premier enfant est dévoilé de bas en haut avec un léger dézoom.
   (Le clip-path n'est pas posé sur l'élément observé : IntersectionObserver le verrait vide.)
   Le débord négatif garde l'anneau de focus visible. */
.js [data-apparition="image"] > :first-child {
	clip-path: inset(calc(-1 * var(--space-s)));
	transition:
		clip-path var(--t-apparition) var(--courbe-apparition),
		scale var(--t-apparition) var(--courbe-apparition);
	transition-delay: calc(var(--ordre, 0) * var(--t-apparition-pas));
}

.js:not(.apparition-secours) {
	& [data-apparition="texte"]:not(.est-visible) {
		opacity: 0;
		translate: 0 var(--apparition-decalage);
	}

	& [data-apparition="image"]:not(.est-visible) > :first-child {
		clip-path: inset(100% 0 0 0);
		scale: var(--apparition-zoom);
	}

	& [data-apparition="tampon"]:not(.est-visible) {
		opacity: 0;
		rotate: var(--apparition-rotation);
		scale: var(--apparition-tampon);
	}

	& [data-apparition="trait"]:not(.est-visible) {
		scale: 1 0;
	}

	& [data-apparition="fondu"]:not(.est-visible) {
		opacity: 0;
	}
}

.js [data-apparition="trait"] {
	transform-origin: top;
}

/* Éléments réaffichés par un filtre de thème. */
.filtre-apparait {
	animation: filtre-apparition var(--t-apparition) var(--courbe-apparition) both;
}

@keyframes filtre-apparition {
	from {
		opacity: 0;
		translate: 0 var(--apparition-decalage);
	}
}

@media (prefers-reduced-motion: reduce) {
	.js [data-apparition],
	.js [data-apparition] > :first-child {
		opacity: 1 !important;
		translate: none !important;
		scale: none !important;
		rotate: none !important;
		clip-path: none !important;
	}
}