/* 
 * SaasBuilder Front-End - Animations & Micro-interactions
 */

/* 
 * Utilitaires : Skeleton Loading (Fluidité Absolue)
 * Animation fluide pour l'attente des requêtes AJAX.
 */
.saasbuilder-skeleton {
	background: var(--skeleton-bg);
	background-image: linear-gradient(90deg, var(--skeleton-bg) 0px, var(--skeleton-shine) 40px, var(--skeleton-bg) 80px);
	background-size: 200vw 100%;
	animation: saasbuilder-skeleton-shine 1.5s infinite linear;
	border-radius: var(--border-radius);
	color: transparent !important;
	user-select: none;
	pointer-events: none;
}

.saasbuilder-skeleton * {
	visibility: hidden;
}

@keyframes saasbuilder-skeleton-shine {
	0% {
		background-position: -100vw 0;
	}
	100% {
		background-position: 100vw 0;
	}
}

/* 
 * Transitions de Page (App-Like Flow)
 * Élimine le clignotement brusque au rechargement.
 */
/*
 * Fondu d'entrée uniquement (PAS de transform) : un transform sur ce conteneur
 * deviendrait le bloc englobant des overlays position:fixed (drawer, bottomsheet,
 * popup, toasts) — ils défileraient avec la page et leur translate hors-écran
 * ajouterait de la hauteur (espace vide sous le footer). L'opacité seule évite ça.
 */
.saasbuilder-page-transition {
	opacity: 0;
	transition: opacity 0.3s ease-out;
}

.saasbuilder-page-loaded .saasbuilder-page-transition {
	opacity: 1;
}

.saasbuilder-page-exiting .saasbuilder-page-transition {
	opacity: 0;
}