.image-scroll-widget {
	display: flex;
	justify-content: center;
}

.is-viewport {
	position: relative;
	overflow: hidden;
	/* Width/Height set by control */
	display: flex;
	/* Flex align for initial pos */
}

.is-viewport::after {
	content: '';
	position: absolute;
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
	pointer-events: none;
	z-index: 5;
	transition: background-color 0.3s;
}

.is-image {
	display: block;
	width: 100%; /* For vertical */
	height: auto; /* For vertical */
	line-height: 0;
	transition-timing-function: ease-in-out;
	/* Transition duration set by control */
	will-change: transform;
}

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

/* Horizontal Mode Logic */
.dir-horizontal .is-image {
	width: auto;
	height: 100%; /* Match viewport height */
	display: flex;
}

.dir-horizontal .is-image img {
	width: auto;
	max-width: none; /* Allow overflow width */
	height: 100%;
}

/* --- Initial Positions --- */
/* Vertical */
.init-v-top { align-items: flex-start; }
.init-v-center { align-items: center; }
.init-v-bottom { align-items: flex-end; }

/* Horizontal */
.init-h-left { justify-content: flex-start; }
.init-h-center { justify-content: center; }
.init-h-right { justify-content: flex-end; }


/* --- Hover Trigger --- */
/* Vertical Hover */
.trigger-hover.dir-vertical:hover .is-image {
	transform: translateY(var(--scroll-dist-y));
}
/* Reverse Vertical Hover */
.trigger-hover.dir-vertical.is-reverse:hover .is-image {
	transform: translateY(0); /* Return to top/start */
}
/* If reverse is true, we assume start pos is bottom/end? 
   Actually, standard logic:
   Default: Start Top -> Hover -> Scroll to Bottom
   Reverse: Start Bottom -> Hover -> Scroll to Top
   
   Wait, let's simplify.
   Default: 
   Start: 0
   Hover: --scroll-dist-y
   
   Reverse Checkbox: 
   Let's swap the logic via CSS classes if needed, but usually users 
   just want "Scroll Up" or "Scroll Down".
   
   Let's stick to standard:
   Default: Moves element UP (revealing bottom).
   Reverse: Moves element DOWN (revealing top) - valid if initial pos is bottom.
*/

/* Horizontal Hover */
.trigger-hover.dir-horizontal:hover .is-image {
	transform: translateX(var(--scroll-dist-x));
}


/* --- Auto Trigger (Animation) --- */
@keyframes scrollVertical {
	0% { transform: translateY(0); }
	50% { transform: translateY(var(--scroll-dist-y)); }
	100% { transform: translateY(0); }
}

@keyframes scrollHorizontal {
	0% { transform: translateX(0); }
	50% { transform: translateX(var(--scroll-dist-x)); }
	100% { transform: translateX(0); }
}

.trigger-auto.dir-vertical .is-image {
	animation: scrollVertical 10s ease-in-out infinite alternate;
}
.trigger-auto.dir-horizontal .is-image {
	animation: scrollHorizontal 10s ease-in-out infinite alternate;
}

/* --- Scroll Trigger --- */
.trigger-scroll .is-image {
	transition: transform 0.1s linear; /* Smooth sync */
}