/**
 * YEP'S — Splash screen d'accueil.
 *
 * Animation SVG/CSS pure, sans librairie. Séquence « barre blanche »
 * (≈ 2,9 s), cohérente avec Yeps_Splash::DURATION_MS (3000 ms) :
 *   0.1–1.25 s   les deux logos (Région | YEP'S) séparés par une barre blanche
 *                apparaissent en fondu décalé (staggered) depuis le haut
 *   1.35–2.55 s  la barre séparatrice s'agrandit (rectangle blanc) jusqu'à
 *                remplir l'écran (le bloc grossit légèrement en parallaxe)
 *   2.55–2.85 s  sortie en fondu de l'overlay, révélant la page
 *
 * Easing emprunté aux tokens de motion du design system (fallback inline).
 */

/* Masquage avant paint si le splash a déjà été vu dans la session (no-flash). */
html.yeps-splash-seen #yeps-splash {
	display: none !important;
}

.yeps-splash {
	position: fixed;
	inset: 0;
	/* Au-dessus du widget chat (#yeps-chat-wrapper, z-index 99999). */
	z-index: 2147483600;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #2B2D6E; /* bleu YEP'S */
	overflow: hidden;
}

/* Supersampling anti-crénelage : tout le contenu est dimensionné en DOUBLE puis
   réduit de moitié ici (scale 0.5). Les couches GPU (entrée/zoom) se rastérisent
   ainsi depuis une source 2×, ce qui garde les courbes nettes PENDANT
   l'animation (Chrome rastérise en moindre fidélité les couches animées, visible
   surtout aux échelles d'affichage fractionnaires type Windows 125/150 %). */
.yeps-splash__stage {
	display: grid;
	place-items: center;
	padding: 48px;
	transform: scale(0.5);
	transform-origin: center;
}

/* Bloc « lockup » : Région | barre | YEP'S, alignés horizontalement.
   Dimensions internes en 2× (compensées par le scale 0.5 du stage). */
.yeps-splash__lockup {
	position: relative;
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(28px, 8vw, 60px);
	transform-origin: center;
}

.yeps-splash svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	shape-rendering: geometricPrecision;
}

.yeps-splash__region {
	/* Réduit pour que la hauteur du bloc texte (3 lignes) égale celle du logo
	   YEP'S (~69 px). Dimensions en 2× (scale 0.5 du stage) → affiché ~183 px. */
	width: min(60vw, 366px);
}

/* Le symbole (cœur/Loire) en haut du logo Région le rend optiquement bas :
   son texte (RÉGION CENTRE VAL DE LOIRE) est sous le centre de la boîte.
   On remonte le SVG pour aligner son texte avec l'ensemble du bloc YEP'S
   (mot + tagline). Valeur recalée après la réduction de taille de la Région. */
.yeps-splash__region svg {
	transform: translateY(-14%);
}

.yeps-splash__yeps {
	width: min(64vw, 370px);
}

/* Logo YEP'S vectoriel : aplats sombres recolorés en blanc sur fond bleu,
   le triangle jaune (#FFED00) est conservé tel quel. */
.yeps-splash__yeps svg [fill="#200E13"] {
	fill: #fff;
}

/* Triangle jaune du « Y » : aucune animation propre. Il apparaît simplement
   avec le logo (fondu d'entrée du bloc YEP'S). Toute animation de transform à
   l'intérieur du SVG le ferait passer en couche GPU rastérisée hors
   supersampling → logo pixelisé pendant/après l'effet. On laisse donc le
   triangle statique pour garder le YEP'S net en permanence. */

/* Barre blanche verticale de séparation entre les deux logos. Posée au-dessus
   des logos (z-index) : quand elle s'agrandit, elle les recouvre. */
.yeps-splash__bar {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	width: 6px;
	height: min(52vw, 200px);
	border-radius: 4px;
	background: #fff;
}

/* Iris = rectangle blanc calé EXACTEMENT sur la barre (inset 0). Il s'agrandit
   depuis la barre jusqu'à couvrir l'écran : c'est la barre qui « grandit ». */
.yeps-splash__iris {
	position: absolute;
	inset: 0;
	border-radius: 2px;
	background: #fff;
	transform: scale(1);
	transform-origin: center;
	pointer-events: none;
}

/* ── Séquence ─────────────────────────────────────────────────── */

/* Entrée en fondu TRÈS décalé depuis le haut : Région, puis la barre, puis YEP'S. */
.yeps-splash__region,
.yeps-splash__bar,
.yeps-splash__yeps {
	opacity: 0;
	animation: yeps-splash-in 450ms var(--wp--custom--yeps--motion--easing--out, cubic-bezier(0.2, 0.7, 0.1, 1)) both;
}

/* Cascade gauche → droite dans le nouvel ordre : YEP'S, puis barre, puis Région. */
.yeps-splash__yeps {
	animation-delay: 100ms;
}

.yeps-splash__bar {
	animation-delay: 450ms;
}

.yeps-splash__region {
	animation-delay: 800ms;
}

@keyframes yeps-splash-in {
	0% {
		opacity: 0;
		transform: translateY(-40px); /* 2× (compensé par scale 0.5 du stage) → ~20px affiché */
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Zoom : léger grossissement du bloc en parallaxe (origine centre = barre). */
.yeps-splash__lockup {
	animation: yeps-splash-dive 1200ms cubic-bezier(0.55, 0, 0.85, 0.15) 1350ms forwards;
}

@keyframes yeps-splash-dive {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(3);
	}
}

/* La barre séparatrice s'agrandit (rectangle) jusqu'à couvrir l'écran de blanc. */
.yeps-splash__iris {
	animation: yeps-splash-iris 1200ms cubic-bezier(0.55, 0, 0.85, 0.15) 1350ms forwards;
}

@keyframes yeps-splash-iris {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(700);
	}
}

/* Overlay : sortie en fondu après le plein blanc, puis neutralisé
   (utilisable même sans JS). */
.yeps-splash {
	animation: yeps-splash-exit 300ms ease 2550ms forwards;
}

@keyframes yeps-splash-exit {
	0% {
		opacity: 1;
		visibility: visible;
	}
	99% {
		opacity: 0;
	}
	100% {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

/* ── Accessibilité : réduire les animations ───────────────────── */
@media (prefers-reduced-motion: reduce) {
	/* Pas de zoom : composition affichée statiquement, sortie rapide. */
	.yeps-splash__region,
	.yeps-splash__bar,
	.yeps-splash__yeps {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.yeps-splash__lockup {
		transform: none;
		animation: none;
	}

	.yeps-splash__iris {
		transform: scale(1);
		animation: none;
	}

	.yeps-splash {
		animation: yeps-splash-exit 400ms ease 1200ms forwards;
	}
}