/**
 * Image CercleKit — effets au scroll.
 *
 * Le JS (cd-image.js) écrit la progression `--ck-sp` (0 → 1) sur le wrapper du
 * widget et lui ajoute `[data-ck-scroll-active]` une fois initialisé. Les règles
 * ci-dessous ne s'appliquent QU'APRÈS cette activation : si le JS ne tourne pas
 * (ou dans l'éditeur), l'image reste affichée normalement — pas d'image masquée.
 */

/* Perf : on prévient le navigateur des propriétés animées, sans transition CSS
   (le lissage est géré en JS, image par image). */
[data-ck-scroll-fx][data-ck-scroll-active] img {
	will-change: transform, width, opacity, clip-path;
	backface-visibility: hidden;
}

/* ---------------------------------------------------------------- Agrandissement */
[data-ck-scroll-fx="grow"][data-ck-scroll-active] img {
	display: block;
	max-width: 100%;
	margin-inline: auto;
	/* !important : le réglage « Largeur » natif du widget (.elementor-N .elementor-element-X img)
	   est plus spécifique et écraserait l'effet — les curseurs départ/arrivée font foi. */
	width: calc(
		var(--ck-grow-min, 90%) +
		(var(--ck-grow-max, 100%) - var(--ck-grow-min, 90%)) * var(--ck-sp, 0)
	) !important;
}

/* ------------------------------------------------------------------------- Zoom */
[data-ck-scroll-fx="zoom"][data-ck-scroll-active] > .elementor-widget-container,
[data-ck-scroll-fx="zoom"][data-ck-scroll-active] .elementor-widget-container {
	overflow: hidden;
}
[data-ck-scroll-fx="zoom"][data-ck-scroll-active] img {
	display: block;
	transform-origin: center center;
	transform: scale( calc( 1 + (var(--ck-zoom-to, 1.15) - 1) * var(--ck-sp, 0) ) ) !important;
}

/* --------------------------------------------------------------------- Apparition */
[data-ck-scroll-fx="fade"][data-ck-scroll-active] img {
	opacity: var(--ck-sp, 0) !important;
}

/* ------------------------------------------------------------------------- Montée */
[data-ck-scroll-fx="rise"][data-ck-scroll-active] img {
	opacity: var(--ck-sp, 0) !important;
	transform: translateY( calc( var(--ck-rise-from, 60px) * (1 - var(--ck-sp, 0)) ) ) !important;
}

/* --------------------------------------------------------------------- Dévoilement */
[data-ck-scroll-fx="reveal"][data-ck-scroll-active] img {
	/* révèle du bas vers le haut : à 0 tout est masqué, à 1 tout est visible */
	clip-path: inset( calc( (1 - var(--ck-sp, 0)) * 100% ) 0 0 0 ) !important;
	-webkit-clip-path: inset( calc( (1 - var(--ck-sp, 0)) * 100% ) 0 0 0 ) !important;
}

/* Respecte la préférence système « réduire les animations » : effet neutralisé,
   image affichée à son état final. */
@media (prefers-reduced-motion: reduce) {
	[data-ck-scroll-fx][data-ck-scroll-active] img {
		width: var(--ck-grow-max, 100%) !important;
		transform: none !important;
		opacity: 1 !important;
		clip-path: none !important;
		-webkit-clip-path: none !important;
	}
}