/**
 * PF Clap — the clapperboard stick.
 *
 * The stripes are painted on Kadence's own .kt-divider, so the spacer keeps its
 * alignment and width controls. Every tunable arrives as a custom property set
 * on the block wrapper by pf-clap.php; the values here are only fallbacks for
 * the case where the inline style never made it.
 */

.pf-clap {
	--pf-clap-h: 11px;
	--pf-clap-angle: 115deg;
	--pf-clap-stripe: 13px;
	--pf-clap-light: rgba(245, 243, 247, .86);
	--pf-clap-dark: rgba(20, 18, 26, .62);
	--pf-clap-speed: 240ms;
}

/* Kadence gives the spacer an inner box with its own height; the stripes are
   the divider itself, so that box collapses to the stripe height. */
.pf-clap .kt-block-spacer {
	height: var(--pf-clap-h);
	min-height: var(--pf-clap-h);
	display: block;
	padding: 0;
}

.pf-clap .kt-divider {
	height: var(--pf-clap-h);
	width: 100%;
	margin: 0;
	border: 0;
	max-width: none;
	background: repeating-linear-gradient(
		var(--pf-clap-angle),
		var(--pf-clap-light) 0 var(--pf-clap-stripe),
		var(--pf-clap-dark) var(--pf-clap-stripe) calc(var(--pf-clap-stripe) * 2)
	);
}

/* Full bleed: the stick runs to both edges of the viewport regardless of the
   container it sits in. Vertical scrollbars are already accounted for by using
   the containing block's centre rather than 50vw on its own. */
.pf-clap-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* The clap: one wipe, left to right, on load. Never repeats. */
@media (prefers-reduced-motion: no-preference) {
	.pf-clap-animate .kt-divider {
		animation: pf-clap-wipe var(--pf-clap-speed) cubic-bezier(.22, .61, .36, 1) both;
	}

	@keyframes pf-clap-wipe {
		from { clip-path: inset(0 100% 0 0); }
		to   { clip-path: inset(0 0 0 0); }
	}
}

/* In the editor the spacer is wrapped in the block list layout, and the bleed
   would push it out of the canvas. Keep the stripes, drop the bleed. */
.editor-styles-wrapper .pf-clap-bleed {
	width: auto;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}