/**
 * Image Mask - Common base CSS ( loads for every style ).
 *
 * Owns the shared skeleton: the stage, the masked media box, the backdrop
 * shape ( hidden until a style shows it ) and every selectable SVG mask
 * shape as a scalable data-URI. Per-style files paint the backdrop and
 * hover treatments. CSS variables drive theme and sizing:
 *   --captwiki-imask-shape   → active SVG mask ( set by the shape class )
 *   --captwiki-imask-accent  → backdrop colour
 *   --captwiki-imask-ratio   → image aspect ratio ( auto = natural )
 *
 * @package captain-widgets-kit
 * @since   1.7.0
 */

.captwiki-imask {
	--captwiki-imask-accent: #6d5efc;
	--captwiki-imask-ratio: 1 / 1;
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.captwiki-imask *,
.captwiki-imask *::before,
.captwiki-imask *::after {
	box-sizing: border-box;
}

/* ── Stage ─────────────────────────────────────────────── */
.captwiki-imask__stage {
	position: relative;
	width: 100%;
}

/* ── Masked media ──────────────────────────────────────── */
.captwiki-imask__media {
	position: relative;
	z-index: 1;
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: var( --captwiki-imask-shape );
	mask-image: var( --captwiki-imask-shape );
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.captwiki-imask__img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	aspect-ratio: var( --captwiki-imask-ratio );
	object-fit: cover;
	transition: transform 0.5s ease, filter 0.5s ease;
}

.captwiki-imask--zoom .captwiki-imask__media:hover .captwiki-imask__img {
	transform: scale( 1.07 );
}

/* ── Backdrop shape ( shown by offset / ring / glow styles ) ── */
.captwiki-imask__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: none;
	background: var( --captwiki-imask-accent );
	-webkit-mask-image: var( --captwiki-imask-shape );
	mask-image: var( --captwiki-imask-shape );
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	pointer-events: none;
}

/* ── Shapes ────────────────────────────────────────────── */
.captwiki-imask--shape-circle {
	--captwiki-imask-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='100'/%3E%3C/svg%3E");
}

.captwiki-imask--shape-squircle {
	--captwiki-imask-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' rx='62'/%3E%3C/svg%3E");
}

.captwiki-imask--shape-hexagon {
	--captwiki-imask-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='100,0%20193,50%20193,150%20100,200%207,150%207,50'/%3E%3C/svg%3E");
}

.captwiki-imask--shape-pentagon {
	--captwiki-imask-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='100,0%20200,76%20162,200%2038,200%200,76'/%3E%3C/svg%3E");
}

.captwiki-imask--shape-rhombus {
	--captwiki-imask-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='100,0%20200,100%20100,200%200,100'/%3E%3C/svg%3E");
}

.captwiki-imask--shape-arch {
	--captwiki-imask-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M0,100A100,100,0,0,1,200,100L200,200L0,200Z'/%3E%3C/svg%3E");
}

.captwiki-imask--shape-shield {
	--captwiki-imask-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100,0L200,38L200,110C200,164,158,193,100,200C42,193,0,164,0,110Z'/%3E%3C/svg%3E");
}

.captwiki-imask--shape-blob-1 {
	--captwiki-imask-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg transform='translate(100,100)'%3E%3Cpath d='M44.3,-76.5C57.9,-69.6,69.8,-58.2,77.9,-44.4C86,-30.6,90.3,-15.3,89.6,-0.4C88.9,14.5,83.2,28.9,75.1,42.4C67,55.9,56.5,68.4,43.2,75.9C29.9,83.4,14.9,85.9,0.3,85.4C-14.4,84.9,-28.8,81.5,-42.3,74.1C-55.8,66.7,-68.4,55.4,-76.1,41.6C-83.8,27.8,-86.6,11.4,-85.7,-4.7C-84.8,-20.8,-80.2,-36.6,-71.2,-49.5C-62.2,-62.4,-48.8,-72.4,-34.4,-78.7C-20,-85,-5,-90,9.8,-89.4C24.6,-88.8,30.7,-83.4,44.3,-76.5Z'/%3E%3C/g%3E%3C/svg%3E");
}

.captwiki-imask--shape-blob-2 {
	--captwiki-imask-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg transform='translate(100,100)'%3E%3Cpath d='M38.1,-65.3C50.4,-58.6,61.9,-50.2,69.8,-38.7C77.6,-27.2,81.8,-13.6,81.5,-0.2C81.2,13.2,76.4,26.5,68.7,38C61,49.5,50.3,59.2,38.1,66.1C25.8,73,12.9,77,-0.7,78.2C-14.3,79.4,-28.6,77.8,-41.1,71C-53.6,64.2,-64.4,52.3,-71.5,38.5C-78.6,24.7,-82.1,9,-80.9,-6.3C-79.7,-21.6,-73.8,-36.4,-64.2,-48.2C-54.6,-60,-41.2,-68.7,-27.3,-74.5C-13.5,-80.3,0.9,-83.1,14.2,-79.6C27.5,-76.1,25.8,-72,38.1,-65.3Z'/%3E%3C/g%3E%3C/svg%3E");
}

.captwiki-imask--shape-blob-3 {
	--captwiki-imask-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg transform='translate(100,100)'%3E%3Cpath d='M51.9,-73.9C66.3,-65.4,76.5,-49.5,81.4,-32.3C86.3,-15.2,85.9,3.3,80.3,19.5C74.7,35.7,63.9,49.7,50.2,60.3C36.5,70.9,18.2,78.2,0.2,77.9C-17.8,77.6,-35.5,69.7,-49.6,58.4C-63.7,47.1,-74.1,32.4,-78.4,15.9C-82.7,-0.7,-80.9,-19.1,-72.9,-33.8C-64.9,-48.5,-50.7,-59.5,-36,-67.8C-21.3,-76.1,-6.1,-81.7,9.4,-81.5C24.9,-81.3,37.5,-82.4,51.9,-73.9Z'/%3E%3C/g%3E%3C/svg%3E");
}