/**
 * Smart Sync demo — choreographed style changes rippling across the slides
 * of a carousel marked with the `ollie-sync-demo` class. The companion
 * script (assets/js/sync-demo.js) tags the moving parts with sync-* classes
 * at init; everything here keys off those.
 */

/* Card = the cover block inside each slide. Pointer cursor invites the
   click that makes a card the sync source. */
.ollie-sync-demo .ollie-carousel-slide > .wp-block-cover {
	cursor: pointer;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

/* The overlay span is the card's background color. */
.ollie-sync-demo .sync-overlay {
	transition: background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.ollie-sync-demo .sync-stat,
.ollie-sync-demo .sync-title,
.ollie-sync-demo .sync-sub {
	transition: color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
		font-size 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Preset font-size classes ship with !important, so the scale override
 * needs to match it; the two-class selector wins the tie. */
.ollie-sync-demo .sync-stat {
	font-size: calc(var(--wp--preset--font-size--x-large) * var(--sync-stat-scale, 1)) !important;
}

.ollie-sync-demo .sync-title {
	font-size: calc(1em * var(--sync-title-scale, 1));
}

/* The stat/text order swap; !important beats the generated layout CSS. */
.ollie-sync-demo .sync-card-body.is-sync-flipped {
	flex-direction: column-reverse !important;
}

/* The half-second acknowledgment before siblings adopt a change.
   Fade intentionally disabled — siblings hold still, then adopt. Restore
   this rule to bring the dim/scale pulse back.
.ollie-sync-demo .ollie-carousel-slide > .wp-block-cover.is-sync-pulsing {
	opacity: 0.45;
	transform: scale(0.985);
}
*/

@media (prefers-reduced-motion: reduce) {
	.ollie-sync-demo .ollie-carousel-slide > .wp-block-cover,
	.ollie-sync-demo .sync-overlay,
	.ollie-sync-demo .sync-stat,
	.ollie-sync-demo .sync-title,
	.ollie-sync-demo .sync-sub {
		transition: none;
	}
}