/* ==========================================================================
   Image Stack block — ACF block styles
   Jewelry Studio

   Figma source values (px):
     Bounding box  : 826.16 × 487
     Primary       : left 0,      top 0,     width 498,   height 487
     Secondary     : left 435.34, top 29.22, width 390.82, height 395.30, rotate(5deg)

   All positions expressed as percentages of the 826.16 × 487 bounding box so
   the layout scales proportionally at any container width.
   ========================================================================== */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
/*
 * aspect-ratio locks the wrapper to the full Figma bounding box.
 * Both images are absolute so neither drives the wrapper height —
 * the ratio alone does.
 */
.image-stack {
	position: relative;
	aspect-ratio: 826 / 487;
	width: 100%;
}

/* ── Primary image ────────────────────────────────────────────────────────── */
/*
 * Flush left, covers 60.27% of the bounding box width (498 / 826.16).
 * aspect-ratio keeps it proportional as the wrapper scales.
 */
.image-stack__primary {
	position: absolute;
	left: 0;
	top:  0;
	width: 60.27%; /* 498 / 826.16 */
}

.image-stack__primary img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 498 / 487;
	object-fit: cover;
}

/* ── Secondary image ──────────────────────────────────────────────────────── */
/*
 * Overlaps primary from the right, rotated 5° clockwise.
 * left / top / width derived from Figma coordinates ÷ bounding box dimensions.
 */
.image-stack__secondary {
	position: absolute;
	left:  52.69%; /* 435.34 / 826.16 */
	top:    5.99%; /* 29.22  / 487    */
	width: 47.30%; /* 390.82 / 826.16 */
	transform: rotate( 5deg );
	transform-origin: top left;
}

.image-stack__secondary img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 391 / 395;
	object-fit: cover;
}

/* ── Editor placeholder ───────────────────────────────────────────────────── */
.image-stack--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
	background: #f0f0f0;
	border: 2px dashed #ccc;
	color: #888;
	font-size: 0.875rem;
}

/* ── Scroll-reveal animations ─────────────────────────────────────────────── */
/*
 * Hidden state: applied by PHP on the frontend via the `.js-animate` class.
 * Visible state: `.is-visible` is added by scroll-animations.js via
 * IntersectionObserver the first time the element enters the viewport.
 *
 * Wrapped in `prefers-reduced-motion` so users who opt out of motion
 * see images at full opacity with no transition whatsoever.
 *
 * ⚠  transform composition note:
 *   `.image-stack__secondary` already has `transform: rotate(5deg)` in its
 *   base rule above. The `.js-animate` selectors below are more specific,
 *   so they take over the full `transform` value in both the hidden and
 *   visible states — preserving the 5° tilt throughout the animation.
 */
@media (prefers-reduced-motion: no-preference) {

	/* Primary — slides in from the left ------------------------------------ */
	.image-stack__primary.js-animate {
		opacity: 0;
		transform: translateX( -28px );
		transition: opacity 0.60s ease, transform 0.60s ease;
	}

	.image-stack__primary.js-animate.is-visible {
		opacity: 1;
		transform: translateX( 0 );
	}

	/* Secondary — slides in from the right, maintaining 5° rotation -------- */
	.image-stack__secondary.js-animate {
		opacity: 0;
		/* Compose rotation + slide so neither property clobbers the other */
		transform: rotate( 5deg ) translateX( 28px );
		transition: opacity 0.60s ease, transform 0.60s ease;
		transition-delay: 200ms; /* reveal after primary settles */
	}

	.image-stack__secondary.js-animate.is-visible {
		opacity: 1;
		transform: rotate( 5deg ); /* restore tilt-only state, no translation */
	}

}