/**
 * Bricksify widget: Hover Image. See hover-image.js for the contract.
 *
 * Timings are the reference's: card clip/scale/opacity 1s, image
 * blur/opacity (and zoom) 1.5s, all on cubic-bezier(.19,1,.22,1).
 */

/* The image printed inside the element: hidden by default... */
.bx-himg > .bx-himg__img {
	display: none;
}

/* ...shown inline under 992px / on touch when the panel asks for it. */
@media (max-width: 991px), (hover: none) {
	.bx-himg[data-bx-himg-inline="1"] > .bx-himg__img {
		display: block;
		width: min(60vw, 320px);
		max-width: 100%;
		height: auto;
		aspect-ratio: var(--bx-himg-ratio, 300 / 370);
		object-fit: cover;
		border-radius: var(--bx-himg-radius, 8px);
	}
}

/* Layer "behind": neighbours under the card, the hovered one over it. */
.bx-himg-on .bx-himg[data-bx-himg-layer="behind"] {
	position: relative;
	z-index: 10;
}

.bx-himg-on .bx-himg[data-bx-himg-layer="behind"].is-himg-active {
	z-index: 16;
}

/* ------------------------------------------------------------ card */

.bx-himg-card {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 15;
	display: flex;
	width: var(--bx-himg-w, clamp(120px, 8.21vw, 320px));
	aspect-ratio: var(--bx-himg-ratio, 300 / 370);
	border-radius: var(--bx-himg-radius, 8px);
	overflow: hidden;
	pointer-events: none;
	will-change: transform;
}

.bx-himg-card__inner {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: var(--bx-himg-bg, transparent);
	opacity: 0;
	transform: scale(0);
	clip-path: inset(20% 20% 20% 20% round var(--bx-himg-radius, 8px));
	transition: opacity 1s cubic-bezier(.19, 1, .22, 1), transform 1s cubic-bezier(.19, 1, .22, 1), clip-path 1s cubic-bezier(.19, 1, .22, 1);
	will-change: transform, opacity, clip-path;
}

.bx-himg-card.is-active .bx-himg-card__inner {
	opacity: 1;
	transform: scale(1);
	clip-path: inset(0 0 0 0 round var(--bx-himg-radius, 8px));
}

.bx-himg-card__img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	opacity: 0;
	visibility: hidden;
	filter: blur(1vw);
	transition: opacity 1.5s cubic-bezier(.19, 1, .22, 1), filter 1.5s cubic-bezier(.19, 1, .22, 1), transform 1.5s cubic-bezier(.19, 1, .22, 1), visibility 1.5s;
	will-change: filter, opacity;
}

.bx-himg-card.is-zoom .bx-himg-card__img {
	transform: scale(1.2);
}

.bx-himg-card .bx-himg-card__img.is-active {
	z-index: 3;
	opacity: 1;
	visibility: visible;
	filter: blur(0);
	transform: scale(1);
}

@media (max-width: 991px), (hover: none), (prefers-reduced-motion: reduce) {
	.bx-himg-card {
		display: none;
	}
}