/*!
 * Aveyron Basse-Cour – Animations au scroll
 * @version 1.0.0
 *
 * Principe : le JavaScript pose l'attribut [data-av="<effet>"] sur chaque élément à animer,
 * puis la classe .av-in quand l'élément entre dans l'écran. Une fois l'animation terminée,
 * le JavaScript retire ces attributs : l'élément retrouve son style Elementor d'origine
 * (pas de transform résiduel, pas de contexte d'empilement parasite, survols intacts).
 *
 * Réglages rapides : modifier les variables ci-dessous, ou les surcharger dans
 * Elementor > Réglages du site > CSS personnalisé.
 */

:root {
	--av-ease: cubic-bezier(0.22, 1, 0.36, 1); /* décélération "easeOutQuint" */
	--av-dur: 0.9s;                            /* durée des fondus / glissements */
	--av-dist: 40px;                           /* amplitude du glissement vertical */
	--av-line-step: 0.14s;                     /* décalage entre deux lignes d'un titre */
}

/* Un mot découpé ne se coupe jamais au tiret, avec ou sans animation :
   la mise en page reste identique avant, pendant et après. */
.av-w {
	white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {

	/* ------------------------------------------------------------------
	 * Fondus et glissements (blocs de texte, boutons, cartes…)
	 * ------------------------------------------------------------------ */
	[data-av="fade-up"],
	[data-av="fade-in"],
	[data-av="slide-left"],
	[data-av="slide-right"],
	[data-av="zoom-in"] {
		opacity: 0;
		transition:
			opacity calc(var(--av-dur) * 0.75) ease-out var(--av-delay, 0s),
			translate var(--av-dur) var(--av-ease) var(--av-delay, 0s),
			scale var(--av-dur) var(--av-ease) var(--av-delay, 0s);
	}

	[data-av="fade-up"]     { translate: 0 var(--av-dist); }
	[data-av="fade-in"]     { scale: 0.94; }
	[data-av="slide-left"]  { translate: calc(var(--av-dist) * -1.2) 0; }
	[data-av="slide-right"] { translate: calc(var(--av-dist) * 1.2) 0; }
	[data-av="zoom-in"]     { scale: 0.88; }

	[data-av="fade-up"].av-in,
	[data-av="fade-in"].av-in,
	[data-av="slide-left"].av-in,
	[data-av="slide-right"].av-in,
	[data-av="zoom-in"].av-in {
		opacity: 1;
		translate: 0 0;
		scale: 1;
	}

	/* ------------------------------------------------------------------
	 * Titres et textes : apparition ligne par ligne
	 * Chaque mot est dans un masque (.av-w) ; son contenu (.av-wi) remonte.
	 * Le retard dépend de la ligne (--av-line) : les lignes se succèdent.
	 * ------------------------------------------------------------------ */
	[data-av="lines"]:not([data-av-split]) {
		opacity: 0; /* masqué jusqu'au découpage en lignes */
	}

	[data-av="lines"] .av-w {
		--av-wd: calc(
			var(--av-delay, 0s)
			+ var(--av-line, 0) * var(--av-line-step)
			+ var(--av-word, 0) * 0.025s
		);
		display: inline-block;
		overflow: hidden;
		vertical-align: top;
		/* Marge de sécurité pour ne pas rogner jambages et accents,
		   compensée par des marges négatives : la hauteur de ligne ne change pas. */
		padding: 0.12em 0.06em 0.18em;
		margin: -0.12em -0.06em -0.18em;
	}

	[data-av="lines"] .av-wi {
		display: inline-block;
		opacity: 0;
		transform: translateY(115%) rotate(4deg);
		transform-origin: 0 100%;
		transition:
			transform 1.1s var(--av-ease) var(--av-wd),
			opacity 0.45s ease-out var(--av-wd);
	}

	[data-av="lines"].av-in .av-wi {
		opacity: 1;
		transform: none;
	}

	/* ------------------------------------------------------------------
	 * Images : dévoilement par le bas + léger zoom arrière
	 * ------------------------------------------------------------------ */
	[data-av="image"] {
		clip-path: inset(100% 0 0 0);
		transition: clip-path 1.3s var(--av-ease) var(--av-delay, 0s);
	}

	[data-av="image"].av-in {
		clip-path: inset(0 0 0 0);
	}

	/* L'élément ciblé peut être le widget (image à l'intérieur) ou l'image elle-même. */
	[data-av="image"]:not(.av-in) img,
	img[data-av="image"]:not(.av-in) {
		scale: calc(var(--av-img-scale, 1) + 0.2);
	}

	[data-av="image"] img,
	img[data-av="image"] {
		transition: scale 1.8s var(--av-ease) var(--av-delay, 0s);
	}

	/* ------------------------------------------------------------------
	 * Parallaxe (option .av-parallax sur un widget Image)
	 * L'image est agrandie de 15 % et se décale légèrement au scroll.
	 * ------------------------------------------------------------------ */
	[data-av-parallax] {
		--av-img-scale: 1.15;
		overflow: hidden;
	}

	[data-av-parallax] img {
		scale: var(--av-img-scale);
		translate: 0 var(--av-py, 0px);
		will-change: translate;
	}
}

/* Filet de sécurité : si l'utilisateur demande moins d'animations, tout reste visible. */
@media (prefers-reduced-motion: reduce) {
	[data-av] {
		opacity: 1 !important;
		translate: none !important;
		scale: none !important;
		clip-path: none !important;
		transition: none !important;
	}
}