/*!
 * FontAwesome - Animations supplementaires pour le plugin CMSimple
 * --------------------------------------------------------------
 * FontAwesome Free 5.15.4 ne fournit nativement que .fa-spin et .fa-pulse.
 * Ce fichier ajoute des animations dans l'esprit de FontAwesome 6
 * (beat, bounce, shake, fade, beat-fade) afin d'enrichir le plugin.
 *
 * Ces classes s'appliquent sur une icone, en plus de "fas/fab fa-...".
 * Exemple : <span class="fas fa-heart fa-beat">&zwj;</span>
 *
 * Charge a la fois dans le back-office (galerie) et sur le site public
 * (via index.php) pour que les icones copiees s'animent reellement.
 */

/* ---- beat : pulsation d'echelle ---- */
.fa-beat {
	animation: fa-beat 1s ease-in-out infinite;
}
@keyframes fa-beat {
	0%, 90% { transform: scale(1); }
	45%     { transform: scale(1.25); }
}

/* ---- fade : variation d'opacite ---- */
.fa-fade {
	animation: fa-fade 1s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes fa-fade {
	0%, 100% { opacity: .4; }
	50%      { opacity: 1; }
}

/* ---- beat-fade : echelle + opacite ---- */
.fa-beat-fade {
	animation: fa-beat-fade 1s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes fa-beat-fade {
	0%, 100% { opacity: .4; transform: scale(1); }
	50%      { opacity: 1; transform: scale(1.125); }
}

/* ---- bounce : rebond vertical ---- */
.fa-bounce {
	animation: fa-bounce 1s cubic-bezier(.28, .84, .42, 1) infinite;
}
@keyframes fa-bounce {
	0%       { transform: scale(1, 1)        translateY(0); }
	10%      { transform: scale(1.1, .9)     translateY(0); }
	30%      { transform: scale(.9, 1.1)     translateY(-25%); }
	50%      { transform: scale(1.05, .95)   translateY(0); }
	57%      { transform: scale(1, 1)        translateY(-3%); }
	64%      { transform: scale(1, 1)        translateY(0); }
	100%     { transform: scale(1, 1)        translateY(0); }
}

/* ---- shake : tremblement / rotation ---- */
.fa-shake {
	animation: fa-shake 1s linear infinite;
}
@keyframes fa-shake {
	0%   { transform: rotate(-15deg); }
	4%   { transform: rotate(15deg); }
	8%, 24%  { transform: rotate(-18deg); }
	12%, 28% { transform: rotate(18deg); }
	16%  { transform: rotate(-22deg); }
	20%  { transform: rotate(22deg); }
	32%  { transform: rotate(-12deg); }
	36%  { transform: rotate(12deg); }
	40%, 100% { transform: rotate(0deg); }
}

/* ---- spin-pulse : rotation par crans (8 etapes) ---- */
.fa-spin-pulse {
	animation: fa-spin 1s steps(8) infinite;
}

/* ---- once : ne joue l'animation qu'une seule fois ---- */
/* A combiner avec une animation, ex : <span class="fas fa-bell fa-shake fa-once">&zwj;</span> */
.fa-once {
	animation-iteration-count: 1 !important;
}

/* Respecte la preference systeme "reduire les animations" */
@media (prefers-reduced-motion: reduce) {
	.fa-beat,
	.fa-fade,
	.fa-beat-fade,
	.fa-bounce,
	.fa-shake,
	.fa-spin-pulse {
		animation-delay: -1ms;
		animation-duration: 1ms;
		animation-iteration-count: 1;
	}
}