/**
 * Loader : 1 contour → 2 bleu + logo-texte → 3 vidéo intro (option) → accueil.
 * --vaya-loader-speed : 0,7 = animation logo 30 % plus rapide.
 */

html.vaya-loader-pending,
html.vaya-loader-pending body {
	overflow: hidden;
	height: 100%;
}

/* Contenu masqué pendant le loader ; révélé avec body.vaya-home-intro */
html.vaya-loader-pending main {
	opacity: 0;
	transform: translateY(1.5rem);
}

body.vaya-home-intro main {
	animation: vayaHomeReveal 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes vayaHomeReveal {
	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.vaya-site-loader {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	background: #fafaf8;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	animation: vayaLoaderOverlayIn calc(0.45s * var(--vaya-loader-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1) forwards;
	transition:
		opacity 1.25s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes vayaLoaderOverlayIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.vaya-site-loader--exit {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* Laisse la transition de sortie sans conflit avec l’animation d’entrée */
	animation: none;
}

.vaya-site-loader__inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vaya-site-loader__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1rem, 3vw, 1.75rem);
	animation: vayaLoaderBrandIn calc(0.7s * var(--vaya-loader-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1)
		calc(0.08s * var(--vaya-loader-speed, 1)) both;
}

@keyframes vayaLoaderBrandIn {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* --- Carré logo : contour SVG + flash images au même format --- */
.vaya-site-loader__logo-box {
	position: relative;
	width: min(28vw, 22rem);
	height: min(28vw, 22rem);
	flex-shrink: 0;
	/* Découpe stricte : aucun débordement (trait SVG, images flash) */
	overflow: hidden;
	contain: paint;
}

.vaya-site-loader__logo-phase {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	transition: opacity 0.35s ease;
}

.vaya-site-loader--flash .vaya-site-loader__logo-phase {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.vaya-site-loader__svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Contour : stroke-dashoffset animé (pathLength=100 sur le rect) */
.vaya-site-loader__stroke {
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	animation: vayaLoaderStroke calc(1.35s * var(--vaya-loader-speed, 1)) cubic-bezier(0.33, 0, 0.13, 1) forwards;
}

@keyframes vayaLoaderStroke {
	to {
		stroke-dashoffset: 0;
	}
}

/* Fond bleu après le trait — derrière le stroke visuellement */
.vaya-site-loader__fill {
	opacity: 0;
	transition: opacity calc(0.55s * var(--vaya-loader-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1);
}

.vaya-site-loader__fill.is-visible {
	opacity: 1;
}

/* Phase flash : sous le logo-texte tant que l’étape 3 n’a pas commencé */
.vaya-site-loader__flash-phase {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	border-radius: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	box-sizing: border-box;
}

.vaya-site-loader--flash .vaya-site-loader__flash-phase {
	z-index: 4;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.vaya-site-loader__flash-img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	min-width: 0;
	min-height: 0;
	/* Couvre le carré sans jamais dépasser le cadre (rogne si besoin) */
	object-fit: cover;
	object-position: center;
	background: #023ac4;
	opacity: 0;
	transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	/* Pas de transformation qui ferait déborder hors du parent overflow:hidden */
	transform: none;
}

.vaya-site-loader--flash .vaya-site-loader__flash-img.is-on {
	opacity: 1;
}

/* Logo-texte (étape 2 : avec le remplissage bleu) — masqué pendant le défilement (étape 3) */
.vaya-site-loader__wordmark {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	padding: 9% 7% 10%;
	box-sizing: border-box;
	pointer-events: none;
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity calc(0.55s * var(--vaya-loader-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1)
			calc(0.05s * var(--vaya-loader-speed, 1)),
		transform calc(0.6s * var(--vaya-loader-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1)
			calc(0.05s * var(--vaya-loader-speed, 1));
}

.vaya-site-loader--has-fill .vaya-site-loader__wordmark {
	opacity: 1;
	transform: translateY(0);
}

.vaya-site-loader--flash .vaya-site-loader__wordmark {
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.vaya-site-loader__wordmark svg {
	display: block;
	width: 100%;
	height: auto;
}

.vaya-site-loader__wordmark svg path,
.vaya-site-loader__wordmark svg rect {
	fill: #fff;
}

/* Phase vidéo : même carré que le logo (remplace l’animation SVG) */
.vaya-site-loader__intro-phase {
	position: absolute;
	inset: 0;
	z-index: 5;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.vaya-site-loader--intro-video .vaya-site-loader__intro-phase {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.vaya-site-loader--intro-video .vaya-site-loader__logo-phase {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.vaya-site-loader--intro-video .vaya-site-loader__wordmark {
	opacity: 0;
	visibility: hidden;
}

.vaya-site-loader__intro-video {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	object-position: center;
	background: #023ac4;
}

@media (prefers-reduced-motion: reduce) {
	.vaya-site-loader {
		animation: none;
		opacity: 1;
		transition: none;
	}
	.vaya-site-loader__brand {
		animation: none;
		opacity: 1;
		transform: none;
	}
	.vaya-site-loader__stroke {
		animation: none;
		stroke-dashoffset: 0;
	}
	.vaya-site-loader__fill {
		transition: none;
		opacity: 1;
	}
	html.vaya-loader-pending main {
		opacity: 1;
		transform: none;
	}
	body.vaya-home-intro main {
		animation: none;
	}
	.vaya-site-loader__intro-phase {
		display: none;
	}
}