/**
 * Entrance and hover animations, taken over from the page builder.
 *
 * Nothing moves until the block enters the viewport: a small script adds
 * .est-visible. Without JavaScript the content shows normally, and anyone who
 * asked their system for less motion sees no movement at all.
 */

.af .af-anim {
	opacity: 0;
	transition:
		opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: var(--af-delai, 0ms);
	will-change: opacity, transform;
}

.af .af-anim--haut { transform: translateY(28px); }
.af .af-anim--bas { transform: translateY(-28px); }
.af .af-anim--gauche { transform: translateX(-36px); }
.af .af-anim--droite { transform: translateX(36px); }
.af .af-anim--zoom { transform: scale(0.92); }
.af .af-anim--fondu { transform: none; }

.af .af-anim.est-visible {
	opacity: 1;
	transform: none;
}

/* Sans script, rien ne doit rester caché. */
html.sans-js .af .af-anim,
.no-js .af .af-anim {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   Survol
   -------------------------------------------------------------------------- */

.af .af-survol--grandir,
.af .af-survol--flotter,
.af .af-survol--enfoncer {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.af .af-survol--grandir:hover { transform: scale(1.03); }
.af .af-survol--flotter:hover { transform: translateY(-8px); }
.af .af-survol--enfoncer:hover { transform: translateY(5px); }

@media (prefers-reduced-motion: reduce) {
	.af .af-anim {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.af .af-survol--grandir:hover,
	.af .af-survol--flotter:hover,
	.af .af-survol--enfoncer:hover { transform: none; }
}