/**
 * Focal point and zoom, front end.
 *
 * inc/photo-focus.php prints object-position inline (that needs no help — every
 * frame in this theme already crops with object-fit: cover) plus a --smr-zoom
 * multiplier and the focal point as --smr-focal-x/y.
 *
 * The zoom deliberately does NOT arrive as an inline transform. Five cards in
 * style.css scale their image on hover, and an inline transform would win
 * against those rules and kill the effect. Multiplying the two here keeps both:
 * a zoomed photo still lifts on hover, by the same proportion as an unzoomed
 * one. The multipliers below mirror style.css exactly — if a hover scale
 * changes there, change it here too.
 *
 * transform-origin is pinned to the focal point so zooming in moves toward the
 * part of the photo that was chosen, rather than toward the middle.
 */

img.smr-focal {
	transform: scale(var(--smr-zoom, 1));
	transform-origin: var(--smr-focal-x, 50%) var(--smr-focal-y, 50%);
}

/* Composed hover states — multipliers match style.css. */
.product-card:hover .product-image img.smr-focal {
	transform: scale(calc(var(--smr-zoom, 1) * 1.08));
}

.gallery-item:hover img.smr-focal {
	transform: scale(calc(var(--smr-zoom, 1) * 1.1));
}

.recipe-card:hover .recipe-image img.smr-focal {
	transform: scale(calc(var(--smr-zoom, 1) * 1.08));
}

.team-card:hover .team-image img.smr-focal {
	transform: scale(calc(var(--smr-zoom, 1) * 1.05));
}

.blog-post-card:hover .blog-post-image img.smr-focal {
	transform: scale(calc(var(--smr-zoom, 1) * 1.05));
}

/* A zoomed image has to be clipped by something or it spills over its
   neighbours. Most frames already set overflow; these two set the height on the
   image itself, so the clipping belongs on the parent. */
.gallery-item,
.team-image {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	img.smr-focal {
		transition: none;
	}
}