/*
 * Animations progressives des articles SAG.
 * Aucun état masqué n'est actif tant que le JavaScript n'a pas posé sag-anim-ready.
 */
.sag-anim-ready .sag-art :is(
	.sag-a-fade-up,
	.sag-a-fade-in,
	.sag-a-slide-left,
	.sag-a-slide-right,
	.sag-a-zoom-in,
	.sag-a-blur-in
) {
	opacity: 0;
	transition-duration: 620ms;
	transition-property: opacity, transform, filter;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform, filter;
}

.sag-anim-ready .sag-art .sag-a-fade-up {
	transform: translate3d(0, 28px, 0);
}

.sag-anim-ready .sag-art .sag-a-fade-in {
	transform: none;
}

.sag-anim-ready .sag-art .sag-a-slide-left {
	transform: translate3d(-36px, 0, 0);
}

.sag-anim-ready .sag-art .sag-a-slide-right {
	transform: translate3d(36px, 0, 0);
}

.sag-anim-ready .sag-art .sag-a-zoom-in {
	transform: scale(0.94);
}

.sag-anim-ready .sag-art .sag-a-blur-in {
	filter: blur(10px);
	transform: translate3d(0, 12px, 0);
}

.sag-anim-ready .sag-art :is(
	.sag-a-fade-up,
	.sag-a-fade-in,
	.sag-a-slide-left,
	.sag-a-slide-right,
	.sag-a-zoom-in,
	.sag-a-blur-in
).sag-a-visible {
	filter: blur(0);
	opacity: 1;
	transform: none;
}

.sag-anim-ready .sag-art .sag-a-stagger > * {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
	transition-duration: 580ms;
	transition-property: opacity, transform;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.sag-anim-ready .sag-art .sag-a-stagger.sag-a-visible > * {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--sag-animation-delay, 0ms) + var(--sag-stagger-index, 0) * 90ms);
}

.sag-anim-ready .sag-art .sag-d-1 { --sag-animation-delay: 100ms; transition-delay: var(--sag-animation-delay); }
.sag-anim-ready .sag-art .sag-d-2 { --sag-animation-delay: 200ms; transition-delay: var(--sag-animation-delay); }
.sag-anim-ready .sag-art .sag-d-3 { --sag-animation-delay: 300ms; transition-delay: var(--sag-animation-delay); }
.sag-anim-ready .sag-art .sag-d-4 { --sag-animation-delay: 400ms; transition-delay: var(--sag-animation-delay); }
.sag-anim-ready .sag-art .sag-d-5 { --sag-animation-delay: 500ms; transition-delay: var(--sag-animation-delay); }

@media (prefers-reduced-motion: reduce) {
	.sag-anim-ready .sag-art :is(
		.sag-a-fade-up,
		.sag-a-fade-in,
		.sag-a-slide-left,
		.sag-a-slide-right,
		.sag-a-zoom-in,
		.sag-a-blur-in,
		.sag-a-stagger,
		.sag-a-stagger > *
	) {
		filter: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}