// Micro-effets d'apparition : blocs révélés au scroll et images qui passent du flou au net.
// Tout est conditionné à html.has-fx, posé par le script inline du <head> (header.php)
// seulement si IntersectionObserver est disponible et sans « réduire les animations » :
// sans JS, rien n'est masqué. JS : assets/js/custom/reveal.js.

$fx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
$fx-blur: 10px;

.has-fx {
	// Blocs sous la ligne de flottaison au chargement (.fx-reveal posé par reveal.js).
	// La transition n'est portée que par .is-revealed : le masquage initial, hors champ,
	// est instantané et ne coûte aucune animation.
	.fx-reveal {
		opacity: 0;
		transform: translateY(24px);

		&.is-revealed {
			opacity: 1;
			transform: none;
			transition: opacity 0.6s $fx-ease, transform 0.6s $fx-ease;
		}
	}

	// Les conteneurs rognent le flou et le léger zoom de l'image.
	.article-preview__cover,
	.linked-article__thumb,
	.block-favorites-photos__media {
		overflow: hidden;
	}

	// Flou → net des images en lazy-load (.is-loaded posé par le script du <head>) ;
	// le fond gris du conteneur sert de placeholder. Les images prioritaires (une, LCP)
	// ne sont pas en loading="lazy" et s'affichent sans effet.
	.article-preview__cover img[loading="lazy"],
	.linked-article__thumb img[loading="lazy"],
	.block-favorites-photos__media img[loading="lazy"] {
		opacity: 0;
		filter: blur($fx-blur);
		transform: scale(1.04);
		transition: opacity 0.4s ease-out, filter 0.8s $fx-ease, transform 0.8s $fx-ease;

		&.is-loaded {
			opacity: 1;
			filter: none;
			transform: none;
		}
	}

	// Images du contenu d'article : pas de conteneur à ratio fixe, donc pas de zoom.
	.article-body .wp-block-image img[loading="lazy"] {
		opacity: 0;
		filter: blur($fx-blur);
		transition: opacity 0.4s ease-out, filter 0.8s $fx-ease;

		&.is-loaded {
			opacity: 1;
			filter: none;
		}
	}

	// Bloc pas encore révélé : son image reste floue, sans transition, et ne devient
	// nette qu'une fois le bloc à l'écran (le lazy-load natif charge en avance, hors champ).
	.fx-reveal:not(.is-revealed) {
		.article-preview__cover img[loading="lazy"],
		.linked-article__thumb img[loading="lazy"],
		.block-favorites-photos__media img[loading="lazy"] {
			filter: blur($fx-blur);
			transform: scale(1.04);
			transition: none;
		}
	}

	.article-body .fx-reveal.wp-block-image:not(.is-revealed) img[loading="lazy"] {
		filter: blur($fx-blur);
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.has-fx {
		.fx-reveal,
		.article-preview__cover img,
		.linked-article__thumb img,
		.block-favorites-photos__media img,
		.article-body .wp-block-image img {
			opacity: 1 !important;
			filter: none !important;
			transform: none !important;
			transition: none !important;
		}
	}
}

@media print {
	.has-fx {
		.fx-reveal,
		.article-preview__cover img,
		.linked-article__thumb img,
		.block-favorites-photos__media img,
		.article-body .wp-block-image img {
			opacity: 1 !important;
			filter: none !important;
			transform: none !important;
		}
	}
}