/*
 * Mouvement et hauteurs d'écran — intégration Bricks (issue 221).
 *
 * Apparitions : l'état initial est celui de la classe, l'état final celui de
 * l'attribut data-in. Rien ne pose data-in dans le thème : c'est une
 * Interaction Bricks (entrée dans la fenêtre → setAttribute data-in) qui le
 * fait, élément par élément (bricks/animations.md). Sobre, décidé par Will le
 * 01/10 : un fondu, ou un fondu qui monte de 16 px, rien d'autre.
 *
 * Le délai d'un élément est sa variable --d, en millisecondes (0 par défaut) :
 * un décalage entre les cartes d'une grille, posé en attribut de style.
 */

.pel-fx-fade {
	opacity: 0;
	transition-property: opacity;
	transition-duration: var(--pel-duree-apparition);
	transition-timing-function: var(--pel-courbe-sortie);
	transition-delay: calc(var(--d, 0) * 1ms);
}

.pel-fx-fade[data-in] {
	opacity: 1;
}

.pel-fx-rise {
	opacity: 0;
	transform: translateY(var(--pel-fx-decalage));
	transition-property: opacity, transform;
	transition-duration: var(--pel-duree-apparition);
	transition-timing-function: var(--pel-courbe-sortie);
	transition-delay: calc(var(--d, 0) * 1ms);
}

.pel-fx-rise[data-in] {
	opacity: 1;
	transform: none;
}

/* Animations réduites : le contenu est là d'emblée, sans attendre data-in. */
@media (prefers-reduced-motion: reduce) {
	.pel-fx-fade,
	.pel-fx-rise {
		opacity: 1;
		transform: none;
		transition-property: none;
	}
}

/* --- Hauteur d'écran sous l'en-tête --------------------------------------- */
/* --header-h est posée sur <html> par js/motion.js (l'en-tête collant mesuré
   refermé) ; avant le script, ou sans lui, le jeton de la barre. Jamais 100vh :
   svh suit la barre d'adresse mobile. */
.pel-u-screen {
	height: calc(100svh - var(--header-h, var(--pel-entete-h)));
}

.pel-u-screen--min {
	min-height: calc(100svh - var(--header-h, var(--pel-entete-h)));
}