.ws-image-circle-swoop {
	--icon-swoop: black;
	position: relative;
	aspect-ratio: 1;
	.swoop-decoration {
		--icon-swoop: hsl(0 0% 0% / 0.3);
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		opacity: 0;
		transition: opacity 0.4s ease;
	}
	.ws-image-circle-swoop-frame {
		position: absolute;
		inset: 7%;
		border-radius: 50%;
		overflow: hidden;
		z-index: 1;
	}
	.ws-image-circle-swoop-frame img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.ws-image-circle-swoop-frame a {
		display: block;
		width: 100%;
		height: 100%;
	}
	&:hover .swoop-decoration {
		opacity: 1;
	}
	/* Unlinked images have no <a> in the frame: show the swoop permanently
	   (the linked variant keeps the hover reveal above). */
	&:not(:has(.ws-image-circle-swoop-frame a)) .swoop-decoration {
		opacity: 1;
	}
	@media (prefers-reduced-motion: reduce) {
		.swoop-decoration {
			transition: none;
		}
	}
}