/*
 * BLVNK Sticky Cards
 * Pure-CSS "sticky stacking cards" scroll effect for WordPress FSE markup.
 *
 * Two variants share the same `.sticky-wrapper` / `.sticky-card` markup:
 *
 * 1) Default (`.sticky-wrapper`)
 *    - Intro heading pins above the stack for the whole effect.
 *    - Cards pin below the heading with a small vertical peek.
 *    - JS adds depth scale + unison release of heading + last card.
 *
 * 2) Case stack (`.sticky-wrapper.sticky-wrapper--case`) — AIFusionX-style
 *    - No pinned heading (intro scrolls away normally).
 *    - All cards pin at the SAME top. Each next card shifts right so covered
 *      cards stay visible as a vertical strip on the LEFT (not on top).
 *    - Same `.sticky-card` content/styling as the default variant.
 *
 * Desktop only: below 782px nothing is applied, so the cards keep their
 * standard in-flow appearance on mobile/tablet.
 *
 * The JS enhancement (sticky-cards.js) measures heading height (default only),
 * assigns --blvnk-sc-index, compensating bottom margins for unison release,
 * and (default only) a subtle depth scale. It stays idle below the breakpoint.
 */

@media (min-width: 782px) {

	.sticky-wrapper {
		/* Tunable knobs (overridable per-instance via inline style). */
		--blvnk-sc-sticky-top: 6vh;   /* where the heading pins from the top */
		--blvnk-sc-heading-gap: 4vh;  /* gap between the pinned heading and cards */
		--blvnk-sc-peek: 20px;        /* extra offset per card => peeking headers */
		--blvnk-sc-peek-x: 0px;       /* horizontal cascade (case variant) */
		--blvnk-sc-step-last: 0;      /* optional extra settle for the last card (0 = none) */
		--blvnk-sc-scale-step: 0.04;  /* how much each covered card shrinks */
		--blvnk-sc-min-scale: 0.9;    /* never shrink past this */
		--blvnk-sc-heading-h: 0px;    /* measured heading height (set by JS) */

		position: relative;
	}

	/*
	 * The intro heading (first group child) stays pinned and visible on top of the
	 * whole stack for the duration of the effect.
	 */
	.sticky-wrapper > .wp-block-group:not(.sticky-card) {
		position: sticky;
		top: var(--blvnk-sc-sticky-top);
		z-index: 2;
	}

	/*
	 * Cards pin below the pinned heading and stack. Their own height provides the
	 * scroll distance for the next card to rise; the per-card compensating
	 * `margin-bottom` (unison release) is set by JS.
	 */
	.sticky-wrapper .sticky-card {
		position: sticky;
		top: calc(
			var(--blvnk-sc-sticky-top) +
			var(--blvnk-sc-heading-h, 0px) +
			var(--blvnk-sc-heading-gap) +
			var(--blvnk-sc-index, 0) * var(--blvnk-sc-peek)
		);
		/* Shrink toward the pinned top edge, driven by JS for depth. */
		transform: scale(var(--blvnk-sc-scale, 1));
		transform-origin: 50% 0%;
		transition: transform 0.15s linear;
		will-change: transform;
		z-index: calc(10 + var(--blvnk-sc-index, 0));
	}

	/*
	 * Optional trailing settle for the last card. With --blvnk-sc-step-last: 0 the
	 * last card leaves immediately together with the wrapper bottom (no gap); raise
	 * it if you want the completed stack to hold for a moment before scrolling away.
	 */
	.sticky-wrapper::after {
		content: "";
		display: block;
		height: var(--blvnk-sc-step-last);
	}

	/*
	 * No-JS fallback: assign a static index so the peek/stacking still works even
	 * before (or without) JavaScript. JS overrides these precisely for any count.
	 */
	.sticky-wrapper .sticky-card:nth-of-type(1) { --blvnk-sc-index: 0; }
	.sticky-wrapper .sticky-card:nth-of-type(2) { --blvnk-sc-index: 1; }
	.sticky-wrapper .sticky-card:nth-of-type(3) { --blvnk-sc-index: 2; }
	.sticky-wrapper .sticky-card:nth-of-type(4) { --blvnk-sc-index: 3; }
	.sticky-wrapper .sticky-card:nth-of-type(5) { --blvnk-sc-index: 4; }
	.sticky-wrapper .sticky-card:nth-of-type(6) { --blvnk-sc-index: 5; }
	.sticky-wrapper .sticky-card:nth-of-type(7) { --blvnk-sc-index: 6; }
	.sticky-wrapper .sticky-card:nth-of-type(8) { --blvnk-sc-index: 7; }

	/* ------------------------------------------------------------------ */
	/* Case stack variant — AIFusionX-style cascade (same card chrome)     */
	/* ------------------------------------------------------------------ */

	.sticky-wrapper.sticky-wrapper--case {
		/*
		 * Horizontal stack only: every card pins at the same top.
		 * peek-x = width of the left strip of each covered card that stays visible.
		 * peek stays 0 so JS unison margins do not invent a fake vertical gap.
		 */
		--blvnk-sc-sticky-top: 5rem;
		--blvnk-sc-heading-gap: 0px;
		--blvnk-sc-heading-h: 0px;
		--blvnk-sc-peek: 0px;
		--blvnk-sc-peek-x: 10%;
		--blvnk-sc-scale-step: 0;
		--blvnk-sc-min-scale: 1;
	}

	/* Intro group scrolls away; it is not part of the sticky stack. */
	.sticky-wrapper.sticky-wrapper--case > .wp-block-group:not(.sticky-card) {
		position: static;
		top: auto;
		z-index: auto;
	}

	.sticky-wrapper.sticky-wrapper--case .sticky-card {
		/* Same pin line for every card — no top peek. */
		top: var(--blvnk-sc-sticky-top);
		/* Shift right + shrink so only the LEFT strip of previous cards shows. */
		box-sizing: border-box;
		width: calc(100% - var(--blvnk-sc-index, 0) * var(--blvnk-sc-peek-x)) !important;
		max-width: calc(100% - var(--blvnk-sc-index, 0) * var(--blvnk-sc-peek-x)) !important;
		margin-left: calc(var(--blvnk-sc-index, 0) * var(--blvnk-sc-peek-x)) !important;
		margin-right: 0 !important;
		/* No depth scale — horizontal offset carries the stack reading. */
		transform: none;
		transform-origin: unset;
		transition: none;
		will-change: auto;
	}

	/* Accessibility: no transforms for users who prefer reduced motion. */
	@media (prefers-reduced-motion: reduce) {
		.sticky-wrapper .sticky-card {
			transform: none !important;
			transition: none;
		}
	}
}

/*
 * Mobile/tablet: plain document flow, standard card layout. Nothing is pinned or
 * transformed here; the inline values JS may have written on a wider viewport are
 * cleared by the script itself when the breakpoint is crossed.
 */
@media (max-width: 781px) {
	.sticky-wrapper .sticky-card,
	.sticky-wrapper > .wp-block-group:not(.sticky-card) {
		position: static;
	}

	.sticky-wrapper.sticky-wrapper--case .sticky-card {
		width: auto;
		margin-left: 0;
	}
}