/* ============================================================
   ARTISTIK — MOTION  ·  révélations au scroll
   Propriétés indépendantes uniquement (opacity, translate,
   scale, clip-path) : aucun conflit avec les transform /
   filter / mix-blend-mode posés par Elementor.
   Les états cachés n'existent que si html.am-js est présent
   (ajouté par JS, jamais en no-JS ni en reduced-motion).
   ============================================================ */

:root {
	--am-ease: cubic-bezier(.22, 1, .36, 1);   /* expo-out doux */
	--am-dur: .95s;
	--am-dur-word: .9s;
	--am-dur-img: 1.15s;
	--am-rise: 38px;
}

/* ---------- Blocs (textes, boutons, cartes…) ---------- */

html.am-js .am-fade {
	opacity: 0;
	translate: 0 var(--am-rise);
	transition: none;
}

html.am-js .am-fade.am-in {
	opacity: 1;
	translate: 0 0;
	transition:
		opacity var(--am-dur) var(--am-ease) var(--am-d, 0s),
		translate var(--am-dur) var(--am-ease) var(--am-d, 0s);
}

/* ---------- Titres : mot à mot, masque ligne ---------- */

html.am-js .am-split { visibility: visible; }

.am-w-mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	/* évite de rogner jambages et accents pendant l'animation */
	padding-block: .1em;
	margin-block: -.1em;
}

html.am-js .am-w {
	display: inline-block;
	translate: 0 115%;
	transition: none;
}

html.am-js .am-in .am-w {
	translate: 0 0;
	transition: translate var(--am-dur-word) var(--am-ease) var(--am-d, 0s);
}

/* ---------- Images : wipe haut → bas + léger dézoom ---------- */

html.am-js .am-img {
	clip-path: inset(0 0 100% 0);
	transition: none;
}

html.am-js .am-img img,
html.am-js img.am-img {
	scale: 1.08;
	transition: none;
}

html.am-js .am-img.am-in {
	clip-path: inset(0 0 0 0);
	transition: clip-path var(--am-dur-img) var(--am-ease) var(--am-d, 0s);
}

html.am-js .am-img.am-in img {
	scale: 1;
	transition: scale calc(var(--am-dur-img) + .25s) var(--am-ease) var(--am-d, 0s);
}

/* l'élément EST l'img : wipe ET zoom dans la MÊME déclaration,
   sinon la seconde transition écrase la première */
html.am-js img.am-img.am-in {
	scale: 1;
	transition:
		clip-path var(--am-dur-img) var(--am-ease) var(--am-d, 0s),
		scale calc(var(--am-dur-img) + .25s) var(--am-ease) var(--am-d, 0s);
}

/* Une fois révélé, on libère clip-path & will-change
   (posé par JS après transitionend) */
html.am-js .am-done,
html.am-js .am-done img {
	clip-path: none;
	will-change: auto;
}

/* ---------- Textes longs : cascade bloc par bloc ---------- */

.am-blk { display: block; }

html.am-js .am-blocks .am-blk {
	opacity: 0;
	translate: 0 24px;
	transition: none;
}

html.am-js .am-blocks.am-in .am-blk {
	opacity: 1;
	translate: 0 0;
	transition:
		opacity .85s var(--am-ease) var(--am-d, 0s),
		translate .85s var(--am-ease) var(--am-d, 0s);
}

/* ---------- Boutons : apparition avec léger gonflement ---------- */

html.am-js .am-btn {
	opacity: 0;
	translate: 0 18px;
	scale: .96;
	transition: none;
}

html.am-js .am-btn.am-in {
	opacity: 1;
	translate: 0 0;
	scale: 1;
	transition:
		opacity .8s var(--am-ease) var(--am-d, 0s),
		translate .8s var(--am-ease) var(--am-d, 0s),
		scale .8s var(--am-ease) var(--am-d, 0s);
}

/* ---------- Héro : défilé de photos (wipe haut → bas) ---------- */

html.am-js .am-cycle {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.1s var(--am-ease);
	will-change: clip-path;
}
html.am-js .am-cycle.am-cycle-go { clip-path: inset(0 0 0 0); }

/* ---------- Accessibilité / garde-fous ---------- */

@media (prefers-reduced-motion: reduce) {
	.am-fade, .am-img, .am-img img, .am-w, .am-btn, .am-blk {
		opacity: 1 !important;
		translate: 0 0 !important;
		scale: 1 !important;
		clip-path: none !important;
		transition: none !important;
	}
}

/* Jamais d'état caché dans l'éditeur Elementor */
.elementor-editor-active .am-fade,
.elementor-editor-active .am-img,
.elementor-editor-active .am-w {
	opacity: 1 !important;
	translate: 0 0 !important;
	clip-path: none !important;
}