/*
 * Masque les éléments animés avant l'exécution du JS, pour éviter qu'ils apparaissent
 * puis disparaissent au chargement (Framer obtient le même effet côté serveur).
 * La classe bp-anim est posée dans le <head> sauf si l'utilisateur a demandé à
 * réduire les animations.
 */
html.bp-anim [data-anim]:not(.bp-anim-ready) {
	opacity: 0;
	/* Filet de sécurité : si le JS ne s'exécute jamais, tout réapparaît après 4 s. */
	animation: bp-anim-failsafe 0s 4s forwards;
}

/* Éléments animés uniquement sur mobile (point de rupture Framer : 810 px). */
@media (max-width: 809px) {
	html.bp-anim [data-anim-mobile]:not([data-anim-mobile="none"]):not(.bp-anim-ready) {
		opacity: 0;
		animation: bp-anim-failsafe 0s 4s forwards;
	}
}

/* Texte animé lettre par lettre : masqué jusqu'au découpage. */
html.bp-anim [data-anim-text]:not(.bp-anim-ready) {
	opacity: 0;
	animation: bp-anim-failsafe 0s 4s forwards;
}

/* Mots insécables et lettres transformables (créés par bp-animations.js) */
.bp-w {
	display: inline-block;
	white-space: nowrap;
}

.bp-c {
	display: inline-block;
}

@keyframes bp-anim-failsafe {
	to { opacity: 1; }
}