/*
 * Reusable blob clips — the organic brand shape from the Figma design.
 *
 * Add .hd-blob to any element to clip it to the blob silhouette. Uses an
 * SVG <clipPath clipPathUnits="objectBoundingBox"> that is output once per
 * page (functions.php → heidesee_blob_clips), so the shape scales to any
 * element box. Pair with .hd-blob--fixed to keep the shape's proportions.
 * Works on <img>, background images and solid color fills alike.
 *
 * clip-path is a geometric clip, which avoids the alpha/luminance ambiguity
 * of mask-image. Shape sources live in assets/blobs/*.svg; the normalized
 * (0–1) paths are inlined in heidesee_blob_clips().
 *
 * NOTE: the `.hd-blob { clip-path: url(#…) }` binding itself is emitted inline
 * by heidesee_blob_clips(), NOT here — Chrome resolves url(#id) in an external
 * stylesheet against the stylesheet URL, so the fragment would not be found.
 * This file only carries the shape-agnostic helpers below.
 */

:root {
	--hd-blob-aspect: 1.483; /* width : height of the blob shapes */
}

/* Keep the blob's native proportions instead of stretching to the box */
.hd-blob--fixed {
	aspect-ratio: var(--hd-blob-aspect);
}

/* Mirror horizontally. NB: .hd-blob already sets transform: translateZ(0)
   (in the inline block from heidesee_blob_clips) to force clip-path to resolve,
   so a flipped variant must keep that layer hint alongside the flip. */
.hd-blob--flip-x {
	transform: scaleX(-1) translateZ(0);
}

/* Convenience: let a direct child image fill and cover the blob box */
.hd-blob > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}