/**
 * Sellio Image Widget Styles
 */

.sellio-image-wrapper {
	display: block;
}

.sellio-image-wrapper img {
	display: block;
	height: auto;
	max-width: 100%;
}

/* Alignment using classes and CSS variables */
.sellio-image-align-left img,
.sellio-image-wrapper[style*="--image-align: left"] img,
.sellio-image-wrapper[style*="--image-align:left"] img {
	margin-left: 0;
	margin-right: auto;
}

.sellio-image-align-center img,
.sellio-image-wrapper[style*="--image-align: center"] img,
.sellio-image-wrapper[style*="--image-align:center"] img {
	margin-left: auto;
	margin-right: auto;
}

.sellio-image-align-right img,
.sellio-image-wrapper[style*="--image-align: right"] img,
.sellio-image-wrapper[style*="--image-align:right"] img {
	margin-left: auto;
	margin-right: 0;
}

.sellio-image-wrapper figure {
	margin: 0;
	padding: 0;
}

.sellio-image-caption {
	display: block;
	margin-top: 10px;
	font-style: italic;
	color: #666;
}

/* Reveal Animation Styles */
.sellio-image-reveal {
	will-change: opacity, transform, filter;
}

.sellio-image-reveal img {
	will-change: opacity, transform, filter;
	/* Prevent CSS transitions from interfering with GSAP */
	transition: none;
}

/* Base reveal states - JavaScript/GSAP will set initial values dynamically */
.sellio-image-reveal.revealed img {
	/* Final state - set by JavaScript/GSAP */
}

/* Fallback for non-GSAP environments */
.sellio-image-reveal:not(.gsap-enabled) img {
	transition: opacity 1s ease-out, transform 1s ease-out, filter 1s ease-out;
}