/**
 * Masque animé (dc-eap) — voir docs/masque-anime.md.
 *
 * Variables posées par les réglages Elementor sur le conteneur :
 *   --dc-masque-image, --dc-masque-couverture  forme choisie
 *   --dc-masque-debut, --dc-masque-fin         tailles (en % de la largeur du conteneur)
 *   --dc-masque-position, --dc-masque-fond
 *   --dc-masque-delai, --dc-masque-duree, --dc-masque-easing, --dc-masque-contenu-decalage
 *   --dc-masque-off       « none » coupe tout sur l'appareil, « initial » laisse faire
 *   --dc-masque-anim-off  « none » coupe seulement les animations (déjà joué, mouvement réduit)
 *
 * Les keyframes ne décrivent que la transition : l'état de base est l'état final,
 * si bien qu'une animation coupée affiche directement le résultat.
 */

.dc-masque-anime-yes {
	--dc-masque-fond: #fff;
	--dc-masque-position: center center;
	--dc-masque-debut: 25%;
	--dc-masque-delai: 2s;
	--dc-masque-duree: 1.8s;
	--dc-masque-easing: cubic-bezier(.65, 0, .35, 1);
	--dc-masque-contenu-decalage: .2s;
}

/* Taille de départ (a) et d'arrivée (b) selon le type d'animation */
.dc-masque-anime-yes.dc-masque-type-ouverture {
	--dc-masque-a: var(--dc-masque-debut);
	--dc-masque-b: var(--dc-masque-fin, var(--dc-masque-couverture, 300%));
}
.dc-masque-anime-yes.dc-masque-type-revelation {
	--dc-masque-a: var(--dc-masque-debut);
	--dc-masque-b: var(--dc-masque-fin, 100%);
}
.dc-masque-anime-yes.dc-masque-type-fermeture {
	--dc-masque-a: var(--dc-masque-couverture, 300%);
	--dc-masque-b: var(--dc-masque-fin, 100%);
}

/* ── Mode « couleur de fond » : voile troué par la forme ──
   ::after est libre sur les conteneurs (Elementor n'utilise que ::before, pour l'overlay). */
.dc-masque-anime-yes.dc-masque-mode-voile::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 99;
	display: var(--dc-masque-off, block);
	pointer-events: none;
	background-color: var(--dc-masque-fond);
	-webkit-mask-image: var(--dc-masque-image, none), linear-gradient(#000 0 0);
	        mask-image: var(--dc-masque-image, none), linear-gradient(#000 0 0);
	-webkit-mask-position: var(--dc-masque-position), 0 0;
	        mask-position: var(--dc-masque-position), 0 0;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-size: var(--dc-masque-b) auto, 100% 100%;
	        mask-size: var(--dc-masque-b) auto, 100% 100%;
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	animation-name: var(--dc-masque-off, var(--dc-masque-anim-off, dc-masque-voile));
	animation-duration: var(--dc-masque-duree);
	animation-timing-function: var(--dc-masque-easing);
	animation-delay: var(--dc-masque-delai);
	animation-fill-mode: backwards;
}
/* Ouverture : le voile n'existe que pendant l'animation */
.dc-masque-anime-yes.dc-masque-mode-voile.dc-masque-type-ouverture::after {
	visibility: hidden;
}

@keyframes dc-masque-voile {
	from {
		visibility: visible;
		-webkit-mask-size: var(--dc-masque-a) auto, 100% 100%;
		        mask-size: var(--dc-masque-a) auto, 100% 100%;
	}
	to {
		visibility: visible;
		-webkit-mask-size: var(--dc-masque-b) auto, 100% 100%;
		        mask-size: var(--dc-masque-b) auto, 100% 100%;
	}
}

/* ── Mode « transparent » : masque posé sur le conteneur lui-même ── */
.dc-masque-anime-yes.dc-masque-mode-decoupe {
	-webkit-mask-position: var(--dc-masque-position);
	        mask-position: var(--dc-masque-position);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	animation-name: var(--dc-masque-off, var(--dc-masque-anim-off, dc-masque-decoupe));
	animation-duration: var(--dc-masque-duree);
	animation-timing-function: var(--dc-masque-easing);
	animation-delay: var(--dc-masque-delai);
	animation-fill-mode: backwards;
}
/* Révélation et fermeture gardent la forme à la fin ; l'ouverture n'a de masque que pendant l'animation */
.dc-masque-anime-yes.dc-masque-mode-decoupe:not(.dc-masque-type-ouverture) {
	-webkit-mask-image: var(--dc-masque-off, var(--dc-masque-image, none));
	        mask-image: var(--dc-masque-off, var(--dc-masque-image, none));
	-webkit-mask-size: var(--dc-masque-b) auto;
	        mask-size: var(--dc-masque-b) auto;
}

@keyframes dc-masque-decoupe {
	from {
		-webkit-mask-image: var(--dc-masque-image, none);
		        mask-image: var(--dc-masque-image, none);
		-webkit-mask-size: var(--dc-masque-a) auto;
		        mask-size: var(--dc-masque-a) auto;
	}
	to {
		-webkit-mask-image: var(--dc-masque-image, none);
		        mask-image: var(--dc-masque-image, none);
		-webkit-mask-size: var(--dc-masque-b) auto;
		        mask-size: var(--dc-masque-b) auto;
	}
}

/* ── Contenu : enfants directs du conteneur (boxed ou pleine largeur) ── */
.dc-masque-anime-yes.dc-masque-contenu-fondu      { --dc-masque-contenu-opacite: 0; --dc-masque-contenu-echelle: 1; }
.dc-masque-anime-yes.dc-masque-contenu-zoom       { --dc-masque-contenu-opacite: 1; --dc-masque-contenu-echelle: .8; }
.dc-masque-anime-yes.dc-masque-contenu-fondu_zoom { --dc-masque-contenu-opacite: 0; --dc-masque-contenu-echelle: .8; }

.dc-masque-anime-yes:not(.dc-masque-contenu-aucune) > .elementor-element,
.dc-masque-anime-yes:not(.dc-masque-contenu-aucune) > .e-con-inner > .elementor-element {
	animation-name: var(--dc-masque-off, var(--dc-masque-anim-off, dc-masque-contenu));
	animation-duration: var(--dc-masque-duree);
	animation-timing-function: cubic-bezier(.22, 1, .36, 1);
	animation-delay: calc(var(--dc-masque-delai) + var(--dc-masque-contenu-decalage));
	animation-fill-mode: backwards;
}

@keyframes dc-masque-contenu {
	from {
		opacity: var(--dc-masque-contenu-opacite, 0);
		transform: scale(var(--dc-masque-contenu-echelle, .8));
	}
}

/* ── Déclencheur « apparition » : en attente jusqu'à ce que le JS ajoute .dc-masque-en-cours ── */
.dc-masque-anime-yes.dc-masque-declencheur-apparition:not(.dc-masque-en-cours),
.dc-masque-anime-yes.dc-masque-declencheur-apparition:not(.dc-masque-en-cours)::after,
.dc-masque-anime-yes.dc-masque-declencheur-apparition:not(.dc-masque-en-cours) > .elementor-element,
.dc-masque-anime-yes.dc-masque-declencheur-apparition:not(.dc-masque-en-cours) > .e-con-inner > .elementor-element {
	animation-play-state: paused;
}

/* Déjà joué dans la session, ou bouton « Rejouer » de l'éditeur (retrait puis remise) */
.dc-masque-anime-yes.dc-masque-joue,
.dc-masque-anime-yes.dc-masque-reset {
	--dc-masque-anim-off: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.dc-masque-anime-yes {
		--dc-masque-anim-off: none;
	}
}