/* ============================================================
   Blob Card Block – frontend styles v3
   ============================================================ */

.bcb-blob-card {
	position: relative;
	width: 100%; /* fallback; responsive width is set via scoped inline <style> */
	overflow: hidden;
	display: block;
	border-radius: 4px;
	box-sizing: border-box; /* border doesn't push dimensions out */
}

/* Full-surface link */
.bcb-link {
	display: block;
	position: absolute;
	inset: 0;
	text-decoration: none;
	overflow: hidden;
}

/* ── Full background image (always visible behind blob) ── */
.bcb-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 0;
}

/* ── Blob mask wrapper ── */
.bcb-mask-wrapper {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/*
   mask-image approach: blob SVG encoded as base64 data URL applied via CSS mask-image.
   No ID references, no clipPath, works in all browsers including Firefox and Gutenberg iframe.
   mask-size: 100% 100% stretches blob SVG to fill the card (equiv. preserveAspectRatio="none").
*/
.bcb-blob-reveal {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	/* mask-position set via inline style (maskOffsetX/Y attrs); fallback = center */
	mask-position: 50% 50%;
	-webkit-mask-position: 50% 50%;
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;
}

/* ── Overlay ── */
.bcb-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	/* background gradient set inline (direction from overlayDirection attribute) */
	pointer-events: none;
	transition: opacity 0.25s ease;
}

/* ── Text layer ── */
.bcb-text {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	/* padding is controlled via inline style (textPadding attribute); default 1.25rem 1.5rem */
	pointer-events: none;
	transition:
		transform var(--bcb-text-duration, 350ms) cubic-bezier(0.4, 0, 0.2, 1),
		opacity   var(--bcb-text-duration, 350ms) ease;
	transform-origin: center center;
}

.bcb-text-inner {
	max-width: 100%;
	pointer-events: auto;
	/* text-shadow set via inline style (textShadow attribute) */
}

.bcb-text-inner span,
.bcb-text-inner p {
	display: block;
}

/* ── Text hover effects (class on .bcb-blob-card) ── */
.bcb-hover-text-zoom:hover       .bcb-text,
.bcb-hover-text-zoom:focus-within .bcb-text { transform: scale(1.04); }

.bcb-hover-text-up:hover         .bcb-text,
.bcb-hover-text-up:focus-within   .bcb-text { transform: translateY(calc(-1 * var(--bcb-text-distance, 4px))); }

.bcb-hover-text-down:hover       .bcb-text,
.bcb-hover-text-down:focus-within .bcb-text { transform: translateY(var(--bcb-text-distance, 4px)); }

.bcb-hover-text-left:hover       .bcb-text,
.bcb-hover-text-left:focus-within .bcb-text { transform: translateX(calc(-1 * var(--bcb-text-distance, 4px))); }

.bcb-hover-text-right:hover       .bcb-text,
.bcb-hover-text-right:focus-within .bcb-text { transform: translateX(var(--bcb-text-distance, 4px)); }

/* hide: text fades out on hover */
.bcb-hover-text-hide:hover       .bcb-text,
.bcb-hover-text-hide:focus-within .bcb-text { opacity: 0; }

/* show: text hidden at rest, fades in on hover – pure opacity, no shift */
.bcb-hover-text-show .bcb-text { opacity: 0; }
.bcb-hover-text-show:hover       .bcb-text,
.bcb-hover-text-show:focus-within .bcb-text { opacity: 1; }

/* zoom-out: text gently shrinks on hover */
.bcb-hover-text-zoom-out:hover       .bcb-text,
.bcb-hover-text-zoom-out:focus-within .bcb-text { transform: scale(0.96); }

/* ── Blob hover EXPAND: blob mask → full image on hover ──────────────────────
   mask-size: 100% 100% is the resting state (set in .bcb-blob-reveal, NOT inline).

   Two-speed easing:
   • Mouse-leave (collapse): ease-out on the BASE rule – no overshoot below 100% → no flicker.
     A spring reversing 300%→100% would dip below 100% momentarily.
   • Mouse-enter (expand):   spring on the :hover rule – organic bounce effect.
   The transition active at the START of each leg governs the whole leg.
*/
.bcb-hover-expand .bcb-blob-reveal {
	/* collapse: smooth, no bounce */
	transition:
		mask-size         var(--bcb-hover-out-duration, 300ms) ease-out,
		-webkit-mask-size var(--bcb-hover-out-duration, 300ms) ease-out;
}
.bcb-hover-expand:hover .bcb-blob-reveal,
.bcb-hover-expand:focus-within .bcb-blob-reveal {
	mask-size:         calc(var(--bcb-hover-scale, 3) * 100%) calc(var(--bcb-hover-scale, 3) * 100%);
	-webkit-mask-size: calc(var(--bcb-hover-scale, 3) * 100%) calc(var(--bcb-hover-scale, 3) * 100%);
	/* expand: spring */
	transition:
		mask-size         var(--bcb-hover-duration, 500ms) cubic-bezier(0.34, 1.56, 0.64, 1),
		-webkit-mask-size var(--bcb-hover-duration, 500ms) cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Blob hover SHRINK (inverted): full image at rest, blob mask on hover ─────
   Resting: mask stretched to hover-scale → blob covers entire card → full image visible.
   Hover:   mask shrinks back to 100% → only the blob shape shows the image.

   Two-speed easing (reversed from expand):
   • Mouse-enter (shrink to blob): ease-out – smooth reveal of the blob shape.
   • Mouse-leave (expand back):    spring  – organic bounce back to full image.
     Overshoot above hover-scale is harmless (still covers the full card).
*/
.bcb-hover-shrink .bcb-blob-reveal {
	/* resting: blob stretched large → full image visible */
	mask-size:         calc(var(--bcb-hover-scale, 3) * 100%) calc(var(--bcb-hover-scale, 3) * 100%);
	-webkit-mask-size: calc(var(--bcb-hover-scale, 3) * 100%) calc(var(--bcb-hover-scale, 3) * 100%);
	/* mouse-leave: spring back (overshoot above scale = still covers card) */
	transition:
		mask-size         var(--bcb-hover-out-duration, 300ms) cubic-bezier(0.34, 1.56, 0.64, 1),
		-webkit-mask-size var(--bcb-hover-out-duration, 300ms) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bcb-hover-shrink:hover .bcb-blob-reveal,
.bcb-hover-shrink:focus-within .bcb-blob-reveal {
	/* hover: shrink to blob shape */
	mask-size:         100% 100%;
	-webkit-mask-size: 100% 100%;
	/* mouse-enter: smooth, no bounce below 100% */
	transition:
		mask-size         var(--bcb-hover-duration, 500ms) ease-out,
		-webkit-mask-size var(--bcb-hover-duration, 500ms) ease-out;
}

/* ── Accessibility ── */
.bcb-link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}