/**
 * AN Photo module (inc/elementor/modules/photo.php): main.css .an-figure (frame radius 12,
 * caption small 14/20 muted, 12 under the photo) plus the numbered points and the height.
 *
 * Points (Figma Home tray markers): a 44 tap area around a cream dot 36 with the number
 * (13 / 150% ink), placed by the centre in % of the photo.
 */

.an-m-photo__box {
	position: relative;
}

/* The dark layer: its colour (Style > Dark layer colour) and its strength (Dark layer %) apart. */
.an-m-photo .an-overlay {
	background: var(--an-overlay-color, rgb(var(--an-overlay-rgb)));
	opacity: var(--an-overlay-opacity, 0.4);
}

/* Clip rather than hide: the parallax follows the page's scroll, which overflow:hidden would stop. */
.an-m-photo__frame {
	overflow: clip;
}

.an-m-photo__spot {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	text-decoration: none;
}

.an-m-photo__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--an-c-cream);
	color: var(--an-c-ink);
	font-size: 13px;
	line-height: var(--an-lh-text);
}

/* The ring of the points' pulse, in cream like the points. */
.an-m-photo__spot[data-mgk~="loop.pulse"] {
	--mgk-pulse: var(--an-c-cream);
}

.an-m-photo__spot[data-mgk~="loop.pulse"]::after {
	border-radius: 50%;
}