/**
 * ET Astra — les douze transitions de page, jouées sur un voile.
 *
 * Deux temps, deux animations : `is-sortie` couvre la page que l'on quitte,
 * `is-entree` découvre celle qui arrive. L'arrivée part seule au premier
 * affichage, sans script ; le départ est déclenché par le script, qui retient
 * le clic le temps de l'animation.
 *
 * Le voile ne touche jamais au contenu : une transformation posée sur la page
 * casserait ses éléments fixes — en-tête collant, bouton de retour en haut —
 * pendant toute l'animation.
 *
 * @package ET_Astra
 */

.eta-trans {
	--eta-trans-sortie: 320ms;
	--eta-trans-entree: 420ms;
	--eta-trans-courbe: cubic-bezier(.4, 0, .2, 1);
	--eta-trans-couleur: #fff;
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: block;
	pointer-events: none;
	visibility: hidden;
}

.eta-trans.is-entree,
.eta-trans.is-sortie {
	visibility: visible;
}

/* Pendant le départ, le voile prend les clics : deux clics sur deux liens
   pendant l'animation partiraient sur deux pages. */
.eta-trans.is-sortie {
	pointer-events: auto;
}

.eta-trans__panneau {
	position: absolute;
	inset: 0;
	display: block;
	background: var(--eta-trans-couleur);
	transform-origin: 50% 50%;
	will-change: transform, opacity;
}

/* ─────────── 1. Fondu — 2. Voile coloré ─────────── */

.eta-trans--fondu .eta-trans__panneau,
.eta-trans--voile .eta-trans__panneau {
	opacity: 0;
}

.eta-trans--fondu.is-sortie .eta-trans__panneau,
.eta-trans--voile.is-sortie .eta-trans__panneau {
	animation: eta-trans-opacite-entre var(--eta-trans-sortie) var(--eta-trans-courbe) forwards;
}

.eta-trans--fondu.is-entree .eta-trans__panneau,
.eta-trans--voile.is-entree .eta-trans__panneau {
	animation: eta-trans-opacite-sort var(--eta-trans-entree) var(--eta-trans-courbe) forwards;
}

/* ─────────── 3. Glissement ─────────── */

.eta-trans--glissement .eta-trans__panneau {
	transform: translateX(100%);
}

.eta-trans--glissement.is-sortie .eta-trans__panneau {
	animation: eta-trans-glisse-entre var(--eta-trans-sortie) var(--eta-trans-courbe) forwards;
}

.eta-trans--glissement.is-entree .eta-trans__panneau {
	animation: eta-trans-glisse-sort var(--eta-trans-entree) var(--eta-trans-courbe) forwards;
}

/* ─────────── 4. Montée ─────────── */

.eta-trans--montee .eta-trans__panneau {
	transform: translateY(100%);
}

.eta-trans--montee.is-sortie .eta-trans__panneau {
	animation: eta-trans-monte-entre var(--eta-trans-sortie) var(--eta-trans-courbe) forwards;
}

.eta-trans--montee.is-entree .eta-trans__panneau {
	animation: eta-trans-monte-sort var(--eta-trans-entree) var(--eta-trans-courbe) forwards;
}

/* ─────────── 5. Rideau ─────────── */

.eta-trans--rideau .eta-trans__panneau {
	width: 50%;
	transform: translateX(-100%);
}

.eta-trans--rideau .eta-trans__panneau:nth-child(2) {
	left: 50%;
	transform: translateX(100%);
}

.eta-trans--rideau.is-sortie .eta-trans__panneau {
	animation: eta-trans-rideau-gauche-entre var(--eta-trans-sortie) var(--eta-trans-courbe) forwards;
}

.eta-trans--rideau.is-sortie .eta-trans__panneau:nth-child(2) {
	animation-name: eta-trans-rideau-droite-entre;
}

.eta-trans--rideau.is-entree .eta-trans__panneau {
	animation: eta-trans-rideau-gauche-sort var(--eta-trans-entree) var(--eta-trans-courbe) forwards;
}

.eta-trans--rideau.is-entree .eta-trans__panneau:nth-child(2) {
	animation-name: eta-trans-rideau-droite-sort;
}

/* ─────────── 6. Store ─────────── */

.eta-trans--store .eta-trans__panneau {
	top: calc(var(--eta-trans-rang, 0) * 16.667%);
	height: 16.8%;
	transform: translateY(-100%);
	animation-delay: calc(var(--eta-trans-rang, 0) * 55ms);
}

.eta-trans--store.is-sortie .eta-trans__panneau {
	animation: eta-trans-store-entre var(--eta-trans-sortie) var(--eta-trans-courbe) forwards;
	animation-delay: calc(var(--eta-trans-rang, 0) * 55ms);
}

.eta-trans--store.is-entree .eta-trans__panneau {
	animation: eta-trans-store-sort var(--eta-trans-entree) var(--eta-trans-courbe) forwards;
	animation-delay: calc(var(--eta-trans-rang, 0) * 55ms);
}

/* ─────────── 7. Cercle ─────────── */

.eta-trans--cercle .eta-trans__panneau {
	clip-path: circle(0% at 50% 50%);
}

.eta-trans--cercle.is-sortie .eta-trans__panneau {
	animation: eta-trans-cercle-entre var(--eta-trans-sortie) var(--eta-trans-courbe) forwards;
}

.eta-trans--cercle.is-entree .eta-trans__panneau {
	animation: eta-trans-cercle-sort var(--eta-trans-entree) var(--eta-trans-courbe) forwards;
}

/* ─────────── 8. Diagonale ─────────── */

.eta-trans--diagonale .eta-trans__panneau {
	transform: translate(-110%, -110%) rotate(-12deg) scale(1.6);
}

.eta-trans--diagonale.is-sortie .eta-trans__panneau {
	animation: eta-trans-diagonale-entre var(--eta-trans-sortie) var(--eta-trans-courbe) forwards;
}

.eta-trans--diagonale.is-entree .eta-trans__panneau {
	animation: eta-trans-diagonale-sort var(--eta-trans-entree) var(--eta-trans-courbe) forwards;
}

/* ─────────── 9. Balayage ─────────── */

.eta-trans--balayage .eta-trans__panneau {
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.eta-trans--balayage.is-sortie .eta-trans__panneau {
	animation: eta-trans-balaye-entre var(--eta-trans-sortie) var(--eta-trans-courbe) forwards;
}

.eta-trans--balayage.is-entree .eta-trans__panneau {
	animation: eta-trans-balaye-sort var(--eta-trans-entree) var(--eta-trans-courbe) forwards;
	transform-origin: 100% 50%;
}

/* ─────────── 10. Zoom ─────────── */

.eta-trans--zoom .eta-trans__panneau {
	opacity: 0;
	transform: scale(.4);
	border-radius: 50%;
}

.eta-trans--zoom.is-sortie .eta-trans__panneau {
	animation: eta-trans-zoom-entre var(--eta-trans-sortie) var(--eta-trans-courbe) forwards;
}

.eta-trans--zoom.is-entree .eta-trans__panneau {
	animation: eta-trans-zoom-sort var(--eta-trans-entree) var(--eta-trans-courbe) forwards;
}

/* ─────────── 11. Flou ─────────── */

.eta-trans--flou .eta-trans__panneau {
	background: none;
	opacity: 0;
	backdrop-filter: blur(0);
}

.eta-trans--flou.is-sortie .eta-trans__panneau {
	animation: eta-trans-flou-entre var(--eta-trans-sortie) var(--eta-trans-courbe) forwards;
}

.eta-trans--flou.is-entree .eta-trans__panneau {
	animation: eta-trans-flou-sort var(--eta-trans-entree) var(--eta-trans-courbe) forwards;
}

/* Sans flou d'arrière-plan, la même transition se joue en fondu : mieux vaut
   un effet plus simple qu'un voile opaque qui cacherait la page. */
@supports not (backdrop-filter: blur(4px)) {

	.eta-trans--flou .eta-trans__panneau {
		background: var(--eta-trans-couleur);
	}
}

/* ─────────── 12. Bascule ─────────── */

.eta-trans {
	perspective: 1400px;
}

.eta-trans--bascule .eta-trans__panneau {
	opacity: 0;
	transform: rotateX(-90deg);
	transform-origin: 50% 0;
}

.eta-trans--bascule.is-sortie .eta-trans__panneau {
	animation: eta-trans-bascule-entre var(--eta-trans-sortie) var(--eta-trans-courbe) forwards;
}

.eta-trans--bascule.is-entree .eta-trans__panneau {
	animation: eta-trans-bascule-sort var(--eta-trans-entree) var(--eta-trans-courbe) forwards;
}

/* ─────────── Les mouvements ─────────── */

@keyframes eta-trans-opacite-entre {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes eta-trans-opacite-sort {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes eta-trans-glisse-entre {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

@keyframes eta-trans-glisse-sort {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
}

@keyframes eta-trans-monte-entre {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

@keyframes eta-trans-monte-sort {
	from { transform: translateY(0); }
	to { transform: translateY(-100%); }
}

@keyframes eta-trans-rideau-gauche-entre {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}

@keyframes eta-trans-rideau-droite-entre {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

@keyframes eta-trans-rideau-gauche-sort {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
}

@keyframes eta-trans-rideau-droite-sort {
	from { transform: translateX(0); }
	to { transform: translateX(100%); }
}

@keyframes eta-trans-store-entre {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

@keyframes eta-trans-store-sort {
	from { transform: translateY(0); }
	to { transform: translateY(100%); }
}

@keyframes eta-trans-cercle-entre {
	from { clip-path: circle(0% at 50% 50%); }
	to { clip-path: circle(75% at 50% 50%); }
}

@keyframes eta-trans-cercle-sort {
	from { clip-path: circle(75% at 50% 50%); }
	to { clip-path: circle(0% at 50% 50%); }
}

@keyframes eta-trans-diagonale-entre {
	from { transform: translate(-110%, -110%) rotate(-12deg) scale(1.6); }
	to { transform: translate(0, 0) rotate(-12deg) scale(1.6); }
}

@keyframes eta-trans-diagonale-sort {
	from { transform: translate(0, 0) rotate(-12deg) scale(1.6); }
	to { transform: translate(110%, 110%) rotate(-12deg) scale(1.6); }
}

@keyframes eta-trans-balaye-entre {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes eta-trans-balaye-sort {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

@keyframes eta-trans-zoom-entre {
	from { opacity: 0; transform: scale(.4); border-radius: 50%; }
	to { opacity: 1; transform: scale(2.2); border-radius: 0; }
}

@keyframes eta-trans-zoom-sort {
	from { opacity: 1; transform: scale(2.2); border-radius: 0; }
	to { opacity: 0; transform: scale(.4); border-radius: 50%; }
}

@keyframes eta-trans-flou-entre {
	from { opacity: 0; backdrop-filter: blur(0); }
	to { opacity: 1; backdrop-filter: blur(14px); }
}

@keyframes eta-trans-flou-sort {
	from { opacity: 1; backdrop-filter: blur(14px); }
	to { opacity: 0; backdrop-filter: blur(0); }
}

@keyframes eta-trans-bascule-entre {
	from { opacity: 0; transform: rotateX(-90deg); }
	to { opacity: 1; transform: rotateX(0); }
}

@keyframes eta-trans-bascule-sort {
	from { opacity: 1; transform: rotateX(0); }
	to { opacity: 0; transform: rotateX(90deg); }
}

/* Moins d'animations : aucun voile, aucun clic retenu. La navigation redevient
   celle d'un site sans transition — c'est ce qui est demandé. */
@media (prefers-reduced-motion: reduce) {

	.eta-trans {
		display: none;
	}
}