/*
 * ToolPoint Parallax Image. The frame takes the width of its container; theme
 * it with --tppx-ring (colour) and --tppx-ring-w (thickness).
 */
.tppx {
	--tppx-ring: rgba(27, 95, 170, .55);
	--tppx-ring-w: 10px;
	position: relative;
	width: 100%;
}
/* The clipping lives on an inner box so the ring (a box-shadow on the outer
   one) is not clipped with it. */
.tppx-clip {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
	isolation: isolate;
	/* Safari clips a rounded parent's transformed children only with this. */
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}
.tppx--oval    { aspect-ratio: 16 / 10; border-radius: 50%; }
.tppx--circle  { aspect-ratio: 1 / 1;   border-radius: 50%; }
.tppx--rounded { aspect-ratio: 16 / 10; border-radius: 18px; }

.tppx--ring { box-shadow: 0 0 0 var(--tppx-ring-w) var(--tppx-ring); }

.tppx-move {
	position: absolute;
	inset: 0;
	will-change: transform;
}

.tppx-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: scale(var(--tppx-zoom, 1.15));
}

/* Underneath: the whole photo, blurred. Scaled a touch more so the blur's
   soft outer edge stays outside the frame. */
.tppx-img--blur {
	filter: blur(var(--tppx-blur, 10px));
	transform: scale(calc(var(--tppx-zoom, 1.15) + .06));
}

/* On top: sharp at the focus point, fading to nothing towards the edge. */
.tppx-img--sharp {
	-webkit-mask-image: radial-gradient(ellipse at var(--tppx-x, 50%) var(--tppx-y, 50%), #000 var(--tppx-sharp, 45%), transparent calc(var(--tppx-sharp, 45%) + 28%));
	mask-image: radial-gradient(ellipse at var(--tppx-x, 50%) var(--tppx-y, 50%), #000 var(--tppx-sharp, 45%), transparent calc(var(--tppx-sharp, 45%) + 28%));
}