/* AB Hover Image Reveal 1.0.0 - allBLANCO */

.ab-hir-root {
	position: static;
	pointer-events: none;
}

.ab-hir-card {
	position: fixed;
	left: 0;
	top: 0;
	width: var(--ab-hir-w, 260px);
	max-width: 90vw;
	z-index: var(--ab-hir-z, 60);
	pointer-events: none;
	will-change: transform;
	mix-blend-mode: var(--ab-hir-blend, normal);
	transform-origin: 50% 50%;
	--ab-hir-ease: cubic-bezier(.2, .8, .2, 1);
}

.ab-hir-inner {
	position: relative;
	width: 100%;
	aspect-ratio: var(--ab-hir-ratio, 4/5);
	border-radius: var(--ab-hir-r, 6px);
	overflow: hidden;
	box-shadow: var(--ab-hir-shadow, none);
	opacity: 0;
	transform: scale(1);
	transition:
		opacity var(--ab-hir-d, 450ms) ease,
		transform var(--ab-hir-d, 450ms) var(--ab-hir-ease),
		filter var(--ab-hir-d, 450ms) ease,
		clip-path var(--ab-hir-d, 450ms) var(--ab-hir-ease);
	backface-visibility: hidden;
}

.ab-hir-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--ab-hir-fit, cover);
	-webkit-user-drag: none;
	user-select: none;
}

/* Original aspect ratio: let the image define the height */
.ab-hir-card[style*="--ab-hir-ratio: auto"] .ab-hir-img,
.ab-hir-card[style*="--ab-hir-ratio:auto"] .ab-hir-img {
	height: auto;
}

/* crossfade for interval cycling */
.ab-hir-img-next {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--ab-hir-d, 450ms) ease;
}
.ab-hir-img-next.is-on {
	opacity: 1;
}

/* ---- start states ---- */
.ab-hir-a-scale .ab-hir-inner { transform: scale(.82); }
.ab-hir-a-blur .ab-hir-inner { transform: scale(1.06); filter: blur(14px); }
.ab-hir-a-reveal .ab-hir-inner {
	opacity: 1;
	clip-path: inset(100% 0 0 0 round var(--ab-hir-r, 6px));
}
.ab-hir-a-reveal .ab-hir-img {
	transform: scale(1.18);
	transition: transform calc(var(--ab-hir-d, 450ms) * 1.6) var(--ab-hir-ease);
}

/* ---- visible ---- */
.ab-hir-card.is-in .ab-hir-inner {
	opacity: var(--ab-hir-o, 1);
	transform: none;
	filter: none;
	clip-path: inset(0 0 0 0 round var(--ab-hir-r, 6px));
}
.ab-hir-a-reveal.is-in .ab-hir-img { transform: none; }

/* ---- leaving ---- */
.ab-hir-card.is-out .ab-hir-inner { opacity: 0; }
.ab-hir-a-scale.is-out .ab-hir-inner { transform: scale(.9); }
.ab-hir-a-blur.is-out .ab-hir-inner { filter: blur(10px); }
.ab-hir-a-reveal.is-out .ab-hir-inner {
	opacity: var(--ab-hir-o, 1);
	clip-path: inset(0 0 100% 0 round var(--ab-hir-r, 6px));
}

@media (prefers-reduced-motion: reduce) {
	.ab-hir-inner,
	.ab-hir-img {
		transform: none !important;
		filter: none !important;
	}
}