/**
 * Forwise Group — transition entre les pages (voir inc/transition.php et assets/js/transition.js).
 *
 * Voile noir, logo blanc (assets/img/transition.svg) : il arrive en très grand,
 * dépassant les bords de l'écran, et rétrécit très vite jusqu'à une petite taille au centre.
 * À l'arrivée sur la page, il disparaît et le voile s'efface.
 *
 * Le logo est dessiné en blanc à partir du SVG utilisé comme masque :
 * la forme du logo (quelle que soit sa couleur) devient blanche, le fond reste transparent.
 * Le SVG doit donc avoir un fond transparent.
 * Si ton SVG a un fond noir et un logo clair, remplace « alpha » par « luminance » ci-dessous.
 */

.fwg-transition {
	--fwg-transition-bg: var(--fwg-black, #1d1d1d);

	position: fixed;
	inset: 0;
	z-index: 100000;               /* Au-dessus du header et des popups */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: var(--fwg-transition-bg);
	pointer-events: none;
	transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	/* Sécurité si le JS ne se charge pas : le voile disparaît seul. */
	animation: fwg-transition-fallback 0.3s 2.5s forwards;
}

.fwg-transition__logo {
	display: block;
	flex-shrink: 0;
	width: 48px;                   /* Taille finale, au centre */
	height: 48px;
	background-color: #fff;        /* Couleur du logo */
	-webkit-mask: var(--fwg-transition-logo) center / contain no-repeat;
	mask: var(--fwg-transition-logo) center / contain no-repeat;
	mask-mode: alpha;
	transform: scale(1);
	opacity: 1;
	animation: fwg-transition-logo 0.45s cubic-bezier(0.25, 1, 0.5, 1) both;
}

/* Arrivée en venant d'une autre page du site : le logo est déjà affiché, pas de réapparition. */
.fwg-transition.is-arriving .fwg-transition__logo {
	animation: none;
}

/* Arrivée : la page est prête. Le petit logo s'efface, puis le voile laisse voir la page. */
.fwg-transition.is-done {
	background-color: transparent;
	visibility: hidden;
	transition: background-color 0.3s 0.1s ease, visibility 0s 0.4s;
	animation: none;
}

.fwg-transition.is-done .fwg-transition__logo {
	transform: scale(0.6);
	opacity: 0;
	transition: transform 0.2s ease-in, opacity 0.2s ease-in;
	animation: none;
}

/* Départ : le voile noir revient, le logo arrive en très grand et rétrécit au centre. */
.fwg-transition.is-leaving {
	background-color: var(--fwg-transition-bg);
	visibility: visible;
	transition: background-color 0.2s ease;
	animation: none;
}

.fwg-transition.is-leaving .fwg-transition__logo {
	transition: none;
	animation: fwg-transition-logo 0.45s cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes fwg-transition-logo {
	from { transform: scale(80); }   /* 48 px × 80 : bien plus grand que l'écran */
	to   { transform: scale(1); }
}

@keyframes fwg-transition-fallback {
	to { opacity: 0; visibility: hidden; }
}

/* Mouvement réduit : pas de voile. */
@media (prefers-reduced-motion: reduce) {
	.fwg-transition {
		display: none;
	}
}