/* Webbler Image */

.wimg-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
}

.wimg {
	--wimg-r: 24px;
	--wimg-ratio: auto;
	--wimg-px: 50%;
	--wimg-py: 50%;
	--wimg-speed: 500ms;
	--wimg-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
	--wimg-mask-size: 100% 100%;
	--wimg-frame-color: #ffc600;
	--wimg-frame-x: 20px;
	--wimg-frame-y: 20px;
	--wimg-frame-gap: 10px;
	--wimg-frame-w: 2px;

	position: relative;
	width: 100%;
	max-width: 100%;
}

/* Shapes made with rounded corners */
.wimg--circle { --wimg-r: 50%; }
.wimg--pill { --wimg-r: 10000px; }
.wimg--arch { --wimg-r: 10000px 10000px 0 0; }
.wimg--arch-down { --wimg-r: 0 0 10000px 10000px; }
.wimg--leaf { --wimg-r: var(--wimg-leaf, 40%) 0; }
.wimg--leaf-alt { --wimg-r: 0 var(--wimg-leaf, 40%); }
.wimg--masked { --wimg-r: 0; }

/* Shapes made with a mask */
.wimg--blob-1 {
	--wimg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M199.8 78.8C198.0 109.3 182.1 179.0 159.0 194.9C135.9 210.8 87.5 185.7 61.0 174.2C34.5 162.7 1.3 153.2 0.0 126.0C-1.2 98.9 25.3 30.2 53.5 11.2C81.7 -7.8 145.1 0.7 169.5 12.0C193.8 23.2 201.5 48.3 199.8 78.8Z'/%3E%3C/svg%3E");
}

.wimg--blob-2 {
	--wimg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M199.5 99.0C194.5 131.8 139.6 187.3 109.2 197.6C78.8 207.8 33.5 183.9 17.2 160.4C0.9 137.0 -8.9 83.4 11.5 56.8C31.9 30.2 108.1 -6.2 139.4 0.9C170.8 7.9 204.5 66.2 199.5 99.0Z'/%3E%3C/svg%3E");
}

.wimg--blob-3 {
	--wimg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M199.9 106.8C197.1 133.4 144.4 150.9 125.6 166.3C106.8 181.8 107.2 203.7 87.2 199.5C67.1 195.2 17.0 164.5 5.3 140.9C-6.5 117.3 3.2 79.3 16.7 58.1C30.2 37.0 65.1 22.5 86.0 13.9C107.0 5.4 123.4 -8.5 142.4 7.0C161.4 22.5 202.7 80.3 199.9 106.8Z'/%3E%3C/svg%3E");
}

.wimg--blob-4 {
	--wimg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M199.3 94.9C200.5 123.1 203.0 171.0 177.0 186.9C150.9 202.7 72.4 204.8 43.0 190.0C13.5 175.1 -2.4 128.5 0.3 97.9C3.1 67.2 31.2 19.6 59.5 6.2C87.8 -7.1 146.7 3.0 170.0 17.8C193.3 32.5 198.2 66.7 199.3 94.9Z'/%3E%3C/svg%3E");
}

/* ---------- Structure ---------- */

.wimg .wimg__frame {
	position: relative;
	z-index: 0;
	display: block;
	isolation: isolate;
	color: inherit;
	text-decoration: none;
	filter: drop-shadow(var(--wimg-shadow-x, 0px) var(--wimg-shadow-y, 16px) var(--wimg-shadow-blur, 30px) var(--wimg-shadow-color, transparent));
	transition: transform var(--wimg-speed) var(--wimg-ease);
}

.wimg .wimg__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--wimg-ratio);
	border-radius: var(--wimg-r);
	box-sizing: border-box;
	-webkit-mask-image: none;
	mask-image: none;
}

.wimg .wimg__media img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: var(--wimg-px) var(--wimg-py);
	transform-origin: var(--wimg-px) var(--wimg-py);
	transition:
		transform var(--wimg-speed) var(--wimg-ease),
		filter var(--wimg-speed) var(--wimg-ease);
}

.wimg .wimg__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-color: transparent;
	transition: background-color var(--wimg-speed) var(--wimg-ease);
}

/* Masked shapes: the image and the frame share the same mask */
.wimg--masked .wimg__media,
.wimg--masked .wimg__frame::before {
	-webkit-mask-image: var(--wimg-mask);
	mask-image: var(--wimg-mask);
	-webkit-mask-size: var(--wimg-mask-size);
	mask-size: var(--wimg-mask-size);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* ---------- Decorative frame (prefix classes on the widget wrapper) ---------- */

.wimg-frame-behind .wimg__frame::before,
.wimg-frame-outline .wimg__frame::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	border-radius: var(--wimg-r);
	transition: transform var(--wimg-speed) var(--wimg-ease);
}

.wimg-frame-behind .wimg__frame::before {
	inset: 0;
	background-color: var(--wimg-frame-color);
	transform: translate(var(--wimg-frame-x), var(--wimg-frame-y));
}

.wimg-frame-hover-yes .wimg:hover .wimg__frame::before {
	transform: translate(0, 0);
}

.wimg-frame-outline .wimg--rounded .wimg__frame::before {
	inset: calc((var(--wimg-frame-gap) + var(--wimg-frame-w)) * -1);
	border: var(--wimg-frame-w) solid var(--wimg-frame-color);
}

.wimg-frame-outline .wimg--masked .wimg__frame::before {
	inset: calc((var(--wimg-frame-gap) + var(--wimg-frame-w)) * -1);
	background-color: var(--wimg-frame-color);
}

/* Room for the outline so it doesn't touch neighbouring elements */
.wimg-frame-outline .wimg-wrap {
	padding: calc(var(--wimg-frame-gap, 10px) + var(--wimg-frame-w, 2px));
}

/* ---------- Hover effects ---------- */

.wimg-hover-zoom .wimg:hover .wimg__media img,
.wimg-hover-zoom .wimg:focus-within .wimg__media img {
	transform: scale(1.08);
}

.wimg-hover-zoom-out .wimg .wimg__media img {
	transform: scale(1.1);
}

.wimg-hover-zoom-out .wimg:hover .wimg__media img,
.wimg-hover-zoom-out .wimg:focus-within .wimg__media img {
	transform: scale(1);
}

.wimg-hover-tilt .wimg:hover .wimg__media img,
.wimg-hover-tilt .wimg:focus-within .wimg__media img {
	transform: scale(1.12) rotate(2deg);
}

.wimg-hover-pan .wimg .wimg__media img {
	transform: scale(1.12) translateX(3%);
}

.wimg-hover-pan .wimg:hover .wimg__media img,
.wimg-hover-pan .wimg:focus-within .wimg__media img {
	transform: scale(1.12) translateX(-3%);
	transition-duration: calc(var(--wimg-speed) * 4);
}

.wimg-motion-lift .wimg:hover .wimg__frame,
.wimg-motion-lift .wimg:focus-within .wimg__frame {
	transform: translateY(-8px);
}

.wimg-motion-grow .wimg:hover .wimg__frame,
.wimg-motion-grow .wimg:focus-within .wimg__frame {
	transform: scale(1.03);
}

.wimg-color-to-color .wimg .wimg__media img {
	filter: grayscale(1);
}

.wimg-color-to-color .wimg:hover .wimg__media img,
.wimg-color-to-color .wimg:focus-within .wimg__media img {
	filter: grayscale(0);
}

.wimg-color-to-gray .wimg:hover .wimg__media img,
.wimg-color-to-gray .wimg:focus-within .wimg__media img {
	filter: grayscale(1);
}

.wimg .wimg__frame:focus-visible {
	outline: 2px solid #163e35;
	outline-offset: 4px;
}

/* ---------- Caption ---------- */

.wimg__caption {
	width: 100%;
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.wimg .wimg__frame,
	.wimg .wimg__media img,
	.wimg .wimg__overlay,
	.wimg .wimg__frame::before {
		transition: none !important;
	}
}