/* Rollover Image Effect — base styles (ported from the UE css template).
 * Per-instance styling (transition duration, object-fit, filters, border,
 * radius, shadow, height, ratio) is emitted by Elementor's own selector-based
 * control CSS, not this file. */

.ue-rollover-image-effect {
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.ue-rollover-image-effect img {
	width: 100%;
	display: block;
}

.ue-rollover-image-effect .ue-overlay-image {
	opacity: 0;
	position: absolute;
	top: 0 !important;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Hover trigger: reveal the overlay on pointer hover. */
.ue-rollover-image-effect[data-trigger="hover"]:hover .ue-overlay-image {
	opacity: 1;
}

/* Click / Scroll triggers: JS toggles the .is-active class. */
.ue-rollover-image-effect.is-active .ue-overlay-image {
	opacity: 1;
}