/*
 * Variation de style de bloc "Texte animé" (is-style-anim-text) pour les
 * titres (core/heading, h1 à h6). Aucune règle de police ici : seuls
 * `transform: scaleY()` et `transform: skewX()` sont animés côté JS
 * (anim-text.js) sur les <span> de lettres générés dynamiquement.
 */

/*
 * Le retour à la ligne ne doit se faire qu'au niveau des espaces entre les
 * mots (voir data-anim-word dans anim-text.js) : on désactive donc toute
 * coupure forcée en plein mot qui serait héritée du thème parent.
 */
.is-style-anim-text {
	overflow-wrap: normal;
	word-break: normal;
}

.is-style-anim-text span[data-anim-word] {
	display: inline-block;
}

.is-style-anim-text span[data-anim-letter] {
	display: inline-block;
	transform-origin: bottom;
	will-change: transform, opacity;
	/*
	 * État initial (avant le premier frame de anim-text.js) : lettre 50%
	 * plus bas que sa position finale et invisible, pour que l'apparition
	 * en stagger démarre depuis cet état sans flash au chargement plutôt
	 * que d'attendre le premier requestAnimationFrame pour la cacher.
	 */
	opacity: 0;
	transform: translateY( 50% );
}

/*
 * Respect de prefers-reduced-motion : anim-text.js ne découpe déjà pas le
 * titre en lettres dans ce cas (donc aucun <span> n'est créé), mais cette
 * règle reste en filet de sécurité si des <span> existaient déjà (ex.
 * contenu mis en cache côté navigateur avant un changement de préférence
 * système) : on neutralise toute transformation résiduelle et on garantit
 * que le texte reste visible (l'état initial ci-dessus le cacherait sinon).
 */
@media ( prefers-reduced-motion: reduce ) {
	.is-style-anim-text span[data-anim-letter] {
		transform: none !important;
		opacity: 1 !important;
	}
}