/**
 * SO Style Kit - Button Styler.
 *
 * Every colour comes from the theme.json selection the user makes (a solid
 * preset colour or a preset gradient). Nothing here bakes in a colour that
 * overrides that choice: no white shine overlays and no coloured glows.
 *
 * Hover fills are painted on a dedicated overlay pseudo element
 * (.wp-block-button__link::before) that sits ABOVE the button's own background
 * but BELOW its text. Because the overlay has its own background-image, it never
 * fights the button's own background - so a button that already has a solid or
 * gradient background keeps it at rest, and the hover fill reveals cleanly on
 * top. Icons are painted on ::after (placed with flex order), leaving ::before
 * free for the fill. Only a few depth effects use a neutral drop shadow that
 * sits behind the button and never recolours its face.
 */

@property --so-btn-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

/* -------------------------------------------------------------------------
 * Base tokens and transitions
 * ---------------------------------------------------------------------- */

.so-btn {
	--so-btn-dur: 0.35s;
	--so-btn-ease: cubic-bezier( 0.22, 0.61, 0.36, 1 );
	--so-btn-hover-bg: var( --wp--preset--color--contrast, #111827 );
	--so-btn-hover-bg-img: linear-gradient(
		var( --wp--preset--color--contrast, #111827 ),
		var( --wp--preset--color--contrast, #111827 )
	);
	--so-btn-hover-text: var( --wp--preset--color--base, #ffffff );
	--so-btn-icon-color: currentColor;
	--so-btn-icon-size: 1em;
}

/* Establish a stacking context so the fill overlay (z-index -1) paints above
 * the button's own background yet below its text. */
.so-btn .wp-block-button__link {
	position: relative;
	z-index: 0;
	transition:
		transform var( --so-btn-dur ) var( --so-btn-ease ),
		box-shadow var( --so-btn-dur ) var( --so-btn-ease ),
		color var( --so-btn-dur ) var( --so-btn-ease ),
		filter var( --so-btn-dur ) var( --so-btn-ease ),
		letter-spacing var( --so-btn-dur ) var( --so-btn-ease ),
		border-radius var( --so-btn-dur ) var( --so-btn-ease );
	backface-visibility: hidden;
}

/* -------------------------------------------------------------------------
 * Icons (painted on ::after so ::before stays free for the fill overlay)
 * ---------------------------------------------------------------------- */

.so-btn-has-icon .wp-block-button__link {
	display: inline-flex;
	align-items: center;
}

.so-btn-has-icon .wp-block-button__link::after {
	content: "";
	flex: 0 0 auto;
	width: var( --so-btn-icon-size, 1em );
	height: var( --so-btn-icon-size, 1em );
	background: var( --so-btn-icon-color, currentColor );
	-webkit-mask: var( --so-btn-icon ) center / contain no-repeat;
	mask: var( --so-btn-icon ) center / contain no-repeat;
	transition: background-color var( --so-btn-dur ) var( --so-btn-ease );
}

.so-btn-has-icon.so-btn-icon--left .wp-block-button__link::after {
	order: -1;
	margin-inline-end: 0.5em;
}

.so-btn-has-icon.so-btn-icon--right .wp-block-button__link::after {
	order: 1;
	margin-inline-start: 0.5em;
}

.so-btn-has-icon .wp-block-button__link:hover::after,
.so-btn-has-icon[data-preview="on"] .wp-block-button__link::after {
	background: var(
		--so-btn-icon-hover,
		var( --so-btn-icon-color, currentColor )
	);
}

/* -------------------------------------------------------------------------
 * Standalone hover colours (all from theme.json)
 * ---------------------------------------------------------------------- */

.so-btn-has-text-hover .wp-block-button__link:hover,
.so-btn-has-text-hover[data-preview="on"] .wp-block-button__link {
	color: var( --so-btn-hover-text ) !important;
}

/* Plain hover background (no effect chosen). Higher specificity plus important
 * lets it win over the button's own solid or gradient background on hover. */
.so-btn-plain-hover .wp-block-button__link:hover,
.so-btn-plain-hover[data-preview="on"] .wp-block-button__link {
	background: var( --so-btn-hover-bg-img ) !important;
	color: var( --so-btn-hover-text, inherit ) !important;
}

/* -------------------------------------------------------------------------
 * Gradient border (static and animated clockwise)
 * ---------------------------------------------------------------------- */

.so-btn-grad-border {
	position: relative;
	padding: var( --so-btn-bw, 2px );
	border-radius: var( --so-btn-radius, 8px );
	background-clip: padding-box;
}

.so-btn-grad-border > .wp-block-button__link {
	position: relative;
	z-index: 1;
	border-radius: calc( var( --so-btn-radius, 8px ) - var( --so-btn-bw, 2px ) );
}

.so-btn-grad-border::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	padding: var( --so-btn-bw, 2px );
	background: var(
		--so-btn-border-paint,
		linear-gradient( 135deg, #6366f1, #06b6d4 )
	);
	-webkit-mask:
		linear-gradient( #000 0 0 ) content-box,
		linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	mask:
		linear-gradient( #000 0 0 ) content-box,
		linear-gradient( #000 0 0 );
	mask-composite: exclude;
	pointer-events: none;
}

@keyframes so-btn-rotate {
	to {
		--so-btn-angle: 360deg;
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	.so-btn-anim-border.so-btn-grad-border::before {
		background: conic-gradient(
			from var( --so-btn-angle ),
			var( --so-btn-conic, #6366f1, #06b6d4, #6366f1 )
		);
		animation: so-btn-rotate var( --so-btn-speed, 4s ) linear infinite;
	}
}

/* -------------------------------------------------------------------------
 * Keyframes for the motion effects
 * ---------------------------------------------------------------------- */

@keyframes so-btn-jelly {
	0% { transform: scale( 1 ); }
	25% { transform: scale( 1.14, 0.86 ); }
	50% { transform: scale( 0.9, 1.1 ); }
	70% { transform: scale( 1.05, 0.97 ); }
	100% { transform: scale( 1 ); }
}

@keyframes so-btn-wobble {
	0%, 100% { transform: rotate( 0deg ); }
	25% { transform: rotate( -3deg ); }
	75% { transform: rotate( 3deg ); }
}

@keyframes so-btn-float {
	0%, 100% { transform: translateY( 0 ); }
	50% { transform: translateY( -6px ); }
}

@keyframes so-btn-pulse {
	0%, 100% { transform: scale( 1 ); }
	50% { transform: scale( 1.06 ); }
}

@keyframes so-btn-slide {
	0% { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}

/* -------------------------------------------------------------------------
 * Fill overlay skeleton.
 * Shared by every fill and line effect. The overlay carries its own
 * background-image, so it is independent of the button's own background.
 * ---------------------------------------------------------------------- */

.so-btn-fx--fill-left .wp-block-button__link::before,
.so-btn-fx--fill-right .wp-block-button__link::before,
.so-btn-fx--fill-up .wp-block-button__link::before,
.so-btn-fx--fill-down .wp-block-button__link::before,
.so-btn-fx--fill-center-h .wp-block-button__link::before,
.so-btn-fx--fill-center-v .wp-block-button__link::before,
.so-btn-fx--bloom-center .wp-block-button__link::before,
.so-btn-fx--bloom-tl .wp-block-button__link::before,
.so-btn-fx--bloom-tr .wp-block-button__link::before,
.so-btn-fx--bloom-br .wp-block-button__link::before,
.so-btn-fx--bloom-bl .wp-block-button__link::before,
.so-btn-fx--split-v .wp-block-button__link::before,
.so-btn-fx--split-h .wp-block-button__link::before,
.so-btn-fx--corners .wp-block-button__link::before,
.so-btn-fx--zoom-bg .wp-block-button__link::before,
.so-btn-fx--frame .wp-block-button__link::before,
.so-btn-fx--underline .wp-block-button__link::before,
.so-btn-fx--underline-center .wp-block-button__link::before,
.so-btn-fx--underline-right .wp-block-button__link::before,
.so-btn-fx--overline .wp-block-button__link::before,
.so-btn-fx--strike .wp-block-button__link::before,
.so-btn-fx--double-line .wp-block-button__link::before,
.so-btn-fx--marker-up .wp-block-button__link::before,
.so-btn-fx--marker-down .wp-block-button__link::before,
.so-btn-fx--side-left .wp-block-button__link::before,
.so-btn-fx--side-right .wp-block-button__link::before,
.so-btn-fx--gradient-slide .wp-block-button__link::before,
.so-btn-fx--gradient-shift .wp-block-button__link::before,
.so-btn-fx--swap .wp-block-button__link::before,
.so-btn-fx--push .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	background-repeat: no-repeat;
	transition:
		background-size var( --so-btn-dur ) var( --so-btn-ease ),
		background-position var( --so-btn-dur ) var( --so-btn-ease ),
		opacity var( --so-btn-dur ) var( --so-btn-ease );
}

/* Text switches to the hover text colour for the effects that fully cover. */
.so-btn-fx--fill-left .wp-block-button__link:hover,
.so-btn-fx--fill-left[data-preview="on"] .wp-block-button__link,
.so-btn-fx--fill-right .wp-block-button__link:hover,
.so-btn-fx--fill-right[data-preview="on"] .wp-block-button__link,
.so-btn-fx--fill-up .wp-block-button__link:hover,
.so-btn-fx--fill-up[data-preview="on"] .wp-block-button__link,
.so-btn-fx--fill-down .wp-block-button__link:hover,
.so-btn-fx--fill-down[data-preview="on"] .wp-block-button__link,
.so-btn-fx--fill-center-h .wp-block-button__link:hover,
.so-btn-fx--fill-center-h[data-preview="on"] .wp-block-button__link,
.so-btn-fx--fill-center-v .wp-block-button__link:hover,
.so-btn-fx--fill-center-v[data-preview="on"] .wp-block-button__link,
.so-btn-fx--bloom-center .wp-block-button__link:hover,
.so-btn-fx--bloom-center[data-preview="on"] .wp-block-button__link,
.so-btn-fx--bloom-tl .wp-block-button__link:hover,
.so-btn-fx--bloom-tl[data-preview="on"] .wp-block-button__link,
.so-btn-fx--bloom-tr .wp-block-button__link:hover,
.so-btn-fx--bloom-tr[data-preview="on"] .wp-block-button__link,
.so-btn-fx--bloom-br .wp-block-button__link:hover,
.so-btn-fx--bloom-br[data-preview="on"] .wp-block-button__link,
.so-btn-fx--bloom-bl .wp-block-button__link:hover,
.so-btn-fx--bloom-bl[data-preview="on"] .wp-block-button__link,
.so-btn-fx--split-v .wp-block-button__link:hover,
.so-btn-fx--split-v[data-preview="on"] .wp-block-button__link,
.so-btn-fx--split-h .wp-block-button__link:hover,
.so-btn-fx--split-h[data-preview="on"] .wp-block-button__link,
.so-btn-fx--corners .wp-block-button__link:hover,
.so-btn-fx--corners[data-preview="on"] .wp-block-button__link,
.so-btn-fx--zoom-bg .wp-block-button__link:hover,
.so-btn-fx--zoom-bg[data-preview="on"] .wp-block-button__link,
.so-btn-fx--marker-up .wp-block-button__link:hover,
.so-btn-fx--marker-up[data-preview="on"] .wp-block-button__link,
.so-btn-fx--marker-down .wp-block-button__link:hover,
.so-btn-fx--marker-down[data-preview="on"] .wp-block-button__link,
.so-btn-fx--swap .wp-block-button__link:hover,
.so-btn-fx--swap[data-preview="on"] .wp-block-button__link,
.so-btn-fx--push .wp-block-button__link:hover,
.so-btn-fx--push[data-preview="on"] .wp-block-button__link,
.so-btn-fx--gradient-slide .wp-block-button__link:hover,
.so-btn-fx--gradient-slide[data-preview="on"] .wp-block-button__link,
.so-btn-fx--gradient-shift .wp-block-button__link:hover,
.so-btn-fx--gradient-shift[data-preview="on"] .wp-block-button__link {
	color: var( --so-btn-hover-text ) !important;
}

/* -------------------------------------------------------------------------
 * The 50 hover effects
 * ---------------------------------------------------------------------- */

/* 1. Fill Left */
.so-btn-fx--fill-left .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: left center;
	background-size: 0% 100%;
}
.so-btn-fx--fill-left .wp-block-button__link:hover::before,
.so-btn-fx--fill-left[data-preview="on"] .wp-block-button__link::before {
	background-size: 100% 100%;
}

/* 2. Fill Right */
.so-btn-fx--fill-right .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: right center;
	background-size: 0% 100%;
}
.so-btn-fx--fill-right .wp-block-button__link:hover::before,
.so-btn-fx--fill-right[data-preview="on"] .wp-block-button__link::before {
	background-size: 100% 100%;
}

/* 3. Fill Up */
.so-btn-fx--fill-up .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: center bottom;
	background-size: 100% 0%;
}
.so-btn-fx--fill-up .wp-block-button__link:hover::before,
.so-btn-fx--fill-up[data-preview="on"] .wp-block-button__link::before {
	background-size: 100% 100%;
}

/* 4. Fill Down */
.so-btn-fx--fill-down .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: center top;
	background-size: 100% 0%;
}
.so-btn-fx--fill-down .wp-block-button__link:hover::before,
.so-btn-fx--fill-down[data-preview="on"] .wp-block-button__link::before {
	background-size: 100% 100%;
}

/* 5. Fill Center H */
.so-btn-fx--fill-center-h .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: center center;
	background-size: 0% 100%;
}
.so-btn-fx--fill-center-h .wp-block-button__link:hover::before,
.so-btn-fx--fill-center-h[data-preview="on"] .wp-block-button__link::before {
	background-size: 100% 100%;
}

/* 6. Fill Center V */
.so-btn-fx--fill-center-v .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: center center;
	background-size: 100% 0%;
}
.so-btn-fx--fill-center-v .wp-block-button__link:hover::before,
.so-btn-fx--fill-center-v[data-preview="on"] .wp-block-button__link::before {
	background-size: 100% 100%;
}

/* 7. Bloom Center */
.so-btn-fx--bloom-center .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: center;
	background-size: 0% 0%;
}
.so-btn-fx--bloom-center .wp-block-button__link:hover::before,
.so-btn-fx--bloom-center[data-preview="on"] .wp-block-button__link::before {
	background-size: 300% 300%;
}

/* 8. Bloom Top Left */
.so-btn-fx--bloom-tl .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: top left;
	background-size: 0% 0%;
}
.so-btn-fx--bloom-tl .wp-block-button__link:hover::before,
.so-btn-fx--bloom-tl[data-preview="on"] .wp-block-button__link::before {
	background-size: 300% 300%;
}

/* 9. Bloom Top Right */
.so-btn-fx--bloom-tr .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: top right;
	background-size: 0% 0%;
}
.so-btn-fx--bloom-tr .wp-block-button__link:hover::before,
.so-btn-fx--bloom-tr[data-preview="on"] .wp-block-button__link::before {
	background-size: 300% 300%;
}

/* 10. Bloom Bottom Right */
.so-btn-fx--bloom-br .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: bottom right;
	background-size: 0% 0%;
}
.so-btn-fx--bloom-br .wp-block-button__link:hover::before,
.so-btn-fx--bloom-br[data-preview="on"] .wp-block-button__link::before {
	background-size: 300% 300%;
}

/* 11. Bloom Bottom Left */
.so-btn-fx--bloom-bl .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: bottom left;
	background-size: 0% 0%;
}
.so-btn-fx--bloom-bl .wp-block-button__link:hover::before,
.so-btn-fx--bloom-bl[data-preview="on"] .wp-block-button__link::before {
	background-size: 300% 300%;
}

/* 12. Split Vertical */
.so-btn-fx--split-v .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img ), var( --so-btn-hover-bg-img );
	background-position: top, bottom;
	background-size: 100% 0%, 100% 0%;
}
.so-btn-fx--split-v .wp-block-button__link:hover::before,
.so-btn-fx--split-v[data-preview="on"] .wp-block-button__link::before {
	background-size: 100% 50%, 100% 50%;
}

/* 13. Split Horizontal */
.so-btn-fx--split-h .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img ), var( --so-btn-hover-bg-img );
	background-position: left, right;
	background-size: 0% 100%, 0% 100%;
}
.so-btn-fx--split-h .wp-block-button__link:hover::before,
.so-btn-fx--split-h[data-preview="on"] .wp-block-button__link::before {
	background-size: 50% 100%, 50% 100%;
}

/* 14. Four Corners */
.so-btn-fx--corners .wp-block-button__link::before {
	background-image:
		var( --so-btn-hover-bg-img ), var( --so-btn-hover-bg-img ),
		var( --so-btn-hover-bg-img ), var( --so-btn-hover-bg-img );
	background-position: top left, top right, bottom left, bottom right;
	background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
.so-btn-fx--corners .wp-block-button__link:hover::before,
.so-btn-fx--corners[data-preview="on"] .wp-block-button__link::before {
	background-size: 120% 120%, 120% 120%, 120% 120%, 120% 120%;
}

/* 15. Zoom Background */
.so-btn-fx--zoom-bg .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: center;
	background-size: 0% 0%;
}
.so-btn-fx--zoom-bg .wp-block-button__link:hover::before,
.so-btn-fx--zoom-bg[data-preview="on"] .wp-block-button__link::before {
	background-size: 100% 100%;
}

/* 16. Frame Draw */
.so-btn-fx--frame .wp-block-button__link::before {
	background-image:
		var( --so-btn-hover-bg-img ), var( --so-btn-hover-bg-img ),
		var( --so-btn-hover-bg-img ), var( --so-btn-hover-bg-img );
	background-position: top left, top right, bottom right, bottom left;
	background-size: 0% 3px, 3px 0%, 0% 3px, 3px 0%;
}
.so-btn-fx--frame .wp-block-button__link:hover::before,
.so-btn-fx--frame[data-preview="on"] .wp-block-button__link::before {
	background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
}

/* 17. Underline Left */
.so-btn-fx--underline .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: left bottom;
	background-size: 0% 3px;
}
.so-btn-fx--underline .wp-block-button__link:hover::before,
.so-btn-fx--underline[data-preview="on"] .wp-block-button__link::before {
	background-size: 100% 3px;
}

/* 18. Underline Center */
.so-btn-fx--underline-center .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: center bottom;
	background-size: 0% 3px;
}
.so-btn-fx--underline-center .wp-block-button__link:hover::before,
.so-btn-fx--underline-center[data-preview="on"] .wp-block-button__link::before {
	background-size: 100% 3px;
}

/* 19. Underline Right */
.so-btn-fx--underline-right .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: right bottom;
	background-size: 0% 3px;
}
.so-btn-fx--underline-right .wp-block-button__link:hover::before,
.so-btn-fx--underline-right[data-preview="on"] .wp-block-button__link::before {
	background-size: 100% 3px;
}

/* 20. Overline */
.so-btn-fx--overline .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: left top;
	background-size: 0% 3px;
}
.so-btn-fx--overline .wp-block-button__link:hover::before,
.so-btn-fx--overline[data-preview="on"] .wp-block-button__link::before {
	background-size: 100% 3px;
}

/* 21. Strike Through */
.so-btn-fx--strike .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: left center;
	background-size: 0% 2px;
}
.so-btn-fx--strike .wp-block-button__link:hover::before,
.so-btn-fx--strike[data-preview="on"] .wp-block-button__link::before {
	background-size: 100% 2px;
}

/* 22. Double Line */
.so-btn-fx--double-line .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img ), var( --so-btn-hover-bg-img );
	background-position: left top, left bottom;
	background-size: 0% 3px, 0% 3px;
}
.so-btn-fx--double-line .wp-block-button__link:hover::before,
.so-btn-fx--double-line[data-preview="on"] .wp-block-button__link::before {
	background-size: 100% 3px, 100% 3px;
}

/* 23. Marker Up */
.so-btn-fx--marker-up .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: left bottom;
	background-size: 100% 0%;
}
.so-btn-fx--marker-up .wp-block-button__link:hover::before,
.so-btn-fx--marker-up[data-preview="on"] .wp-block-button__link::before {
	background-size: 100% 100%;
}

/* 24. Marker Down */
.so-btn-fx--marker-down .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: left top;
	background-size: 100% 0%;
}
.so-btn-fx--marker-down .wp-block-button__link:hover::before,
.so-btn-fx--marker-down[data-preview="on"] .wp-block-button__link::before {
	background-size: 100% 100%;
}

/* 25. Side Bar Left */
.so-btn-fx--side-left .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: left center;
	background-size: 3px 0%;
}
.so-btn-fx--side-left .wp-block-button__link:hover::before,
.so-btn-fx--side-left[data-preview="on"] .wp-block-button__link::before {
	background-size: 3px 100%;
}

/* 26. Side Bar Right */
.so-btn-fx--side-right .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-position: right center;
	background-size: 3px 0%;
}
.so-btn-fx--side-right .wp-block-button__link:hover::before,
.so-btn-fx--side-right[data-preview="on"] .wp-block-button__link::before {
	background-size: 3px 100%;
}

/* 27. Gradient Slide */
.so-btn-fx--gradient-slide .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-size: 200% 100%;
	background-position: 0 50%;
	opacity: 0;
}
.so-btn-fx--gradient-slide .wp-block-button__link:hover::before,
.so-btn-fx--gradient-slide[data-preview="on"] .wp-block-button__link::before {
	opacity: 1;
	background-position: 100% 50%;
}
@media ( prefers-reduced-motion: no-preference ) {
	.so-btn-fx--gradient-slide .wp-block-button__link:hover::before,
	.so-btn-fx--gradient-slide[data-preview="on"] .wp-block-button__link::before {
		animation: so-btn-slide 1.6s linear infinite alternate;
	}
}

/* 28. Gradient Shift */
.so-btn-fx--gradient-shift .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-size: 220% 220%;
	background-position: 0% 0%;
	opacity: 0;
}
.so-btn-fx--gradient-shift .wp-block-button__link:hover::before,
.so-btn-fx--gradient-shift[data-preview="on"] .wp-block-button__link::before {
	opacity: 1;
	background-position: 100% 100%;
}

/* 29. Colour Swap */
.so-btn-fx--swap .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-size: 100% 100%;
	opacity: 0;
}
.so-btn-fx--swap .wp-block-button__link:hover::before,
.so-btn-fx--swap[data-preview="on"] .wp-block-button__link::before {
	opacity: 1;
}

/* 30. Push Swap */
.so-btn-fx--push .wp-block-button__link::before {
	background-image: var( --so-btn-hover-bg-img );
	background-size: 100% 100%;
	opacity: 0;
}
.so-btn-fx--push .wp-block-button__link:hover::before,
.so-btn-fx--push[data-preview="on"] .wp-block-button__link::before {
	opacity: 1;
}
.so-btn-fx--push .wp-block-button__link:hover,
.so-btn-fx--push[data-preview="on"] .wp-block-button__link {
	transform: translateY( -3px );
}

/* 31. Lift */
.so-btn-fx--lift .wp-block-button__link:hover,
.so-btn-fx--lift[data-preview="on"] .wp-block-button__link {
	transform: translateY( -4px );
	box-shadow: 0 12px 26px rgba( 0, 0, 0, 0.18 );
}

/* 32. Press */
.so-btn-fx--press .wp-block-button__link:hover,
.so-btn-fx--press[data-preview="on"] .wp-block-button__link {
	transform: translateY( 2px ) scale( 0.99 );
}

/* 33. Pop */
.so-btn-fx--pop .wp-block-button__link:hover,
.so-btn-fx--pop[data-preview="on"] .wp-block-button__link {
	transform: scale( 1.07 );
}

/* 34. Shrink */
.so-btn-fx--shrink .wp-block-button__link:hover,
.so-btn-fx--shrink[data-preview="on"] .wp-block-button__link {
	transform: scale( 0.93 );
}

/* 35. Tilt */
.so-btn-fx--tilt .wp-block-button__link:hover,
.so-btn-fx--tilt[data-preview="on"] .wp-block-button__link {
	transform: rotate( -2.5deg ) scale( 1.03 );
}

/* 36. Skew */
.so-btn-fx--skew .wp-block-button__link:hover,
.so-btn-fx--skew[data-preview="on"] .wp-block-button__link {
	transform: skewX( -9deg );
}

/* 37. Skew Vertical */
.so-btn-fx--skew-y .wp-block-button__link:hover,
.so-btn-fx--skew-y[data-preview="on"] .wp-block-button__link {
	transform: skewY( -5deg );
}

/* 38. Jelly */
.so-btn-fx--jelly .wp-block-button__link:hover,
.so-btn-fx--jelly[data-preview="on"] .wp-block-button__link {
	transform: scale( 1.05 );
}
@media ( prefers-reduced-motion: no-preference ) {
	.so-btn-fx--jelly .wp-block-button__link:hover,
	.so-btn-fx--jelly[data-preview="on"] .wp-block-button__link {
		animation: so-btn-jelly 0.6s both;
		transform: none;
	}
}

/* 39. Wobble */
.so-btn-fx--wobble .wp-block-button__link:hover,
.so-btn-fx--wobble[data-preview="on"] .wp-block-button__link {
	transform: rotate( -2deg );
}
@media ( prefers-reduced-motion: no-preference ) {
	.so-btn-fx--wobble .wp-block-button__link:hover,
	.so-btn-fx--wobble[data-preview="on"] .wp-block-button__link {
		animation: so-btn-wobble 0.5s both;
		transform: none;
	}
}

/* 40. Float */
.so-btn-fx--float .wp-block-button__link:hover,
.so-btn-fx--float[data-preview="on"] .wp-block-button__link {
	transform: translateY( -4px );
}
@media ( prefers-reduced-motion: no-preference ) {
	.so-btn-fx--float .wp-block-button__link:hover,
	.so-btn-fx--float[data-preview="on"] .wp-block-button__link {
		animation: so-btn-float 1.4s ease-in-out infinite;
		transform: none;
	}
}

/* 41. Rise */
.so-btn-fx--rise .wp-block-button__link:hover,
.so-btn-fx--rise[data-preview="on"] .wp-block-button__link {
	transform: translateY( -3px );
	box-shadow: 0 8px 18px rgba( 0, 0, 0, 0.16 );
}

/* 42. 3D Depth */
.so-btn-fx--depth .wp-block-button__link:hover,
.so-btn-fx--depth[data-preview="on"] .wp-block-button__link {
	transform: perspective( 520px ) rotateX( 12deg ) translateY( -2px );
	box-shadow: 0 14px 22px rgba( 0, 0, 0, 0.2 );
}

/* 43. Flip */
.so-btn-fx--flip .wp-block-button__link:hover,
.so-btn-fx--flip[data-preview="on"] .wp-block-button__link {
	transform: perspective( 600px ) rotateY( 14deg );
}

/* 44. Scale Rotate */
.so-btn-fx--scale-rotate .wp-block-button__link:hover,
.so-btn-fx--scale-rotate[data-preview="on"] .wp-block-button__link {
	transform: scale( 1.05 ) rotate( 3deg );
}

/* 45. Corner Morph */
.so-btn-fx--morph .wp-block-button__link {
	border-radius: 8px;
}
.so-btn-fx--morph .wp-block-button__link:hover,
.so-btn-fx--morph[data-preview="on"] .wp-block-button__link {
	border-radius: 999px;
}

/* 46. Letter Spread */
.so-btn-fx--spread .wp-block-button__link:hover,
.so-btn-fx--spread[data-preview="on"] .wp-block-button__link {
	letter-spacing: 0.14em;
}

/* 47. Text Shift */
.so-btn-fx--shift-text .wp-block-button__link:hover,
.so-btn-fx--shift-text[data-preview="on"] .wp-block-button__link {
	letter-spacing: 0.06em;
	transform: translateX( 3px );
}

/* 48. Text Colour */
.so-btn-fx--text-color .wp-block-button__link:hover,
.so-btn-fx--text-color[data-preview="on"] .wp-block-button__link {
	color: var( --so-btn-hover-text ) !important;
}

/* 49. Uppercase */
.so-btn-fx--uppercase .wp-block-button__link:hover,
.so-btn-fx--uppercase[data-preview="on"] .wp-block-button__link {
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* 50. Pulse */
.so-btn-fx--pulse .wp-block-button__link:hover,
.so-btn-fx--pulse[data-preview="on"] .wp-block-button__link {
	transform: scale( 1.05 );
}
@media ( prefers-reduced-motion: no-preference ) {
	.so-btn-fx--pulse .wp-block-button__link:hover,
	.so-btn-fx--pulse[data-preview="on"] .wp-block-button__link {
		animation: so-btn-pulse 1s ease-in-out infinite;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Editor inspector: effect picker + live preview popover
 * ---------------------------------------------------------------------- */

.so-btn-picker__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	max-height: 300px;
	overflow-y: auto;
	margin-top: 10px;
	padding: 2px;
}

.so-btn-picker__item {
	display: block;
	width: 100%;
	text-align: left;
	font-size: 12px;
	line-height: 1.25;
	padding: 8px 9px;
	border: 1px solid color-mix( in srgb, currentColor 16%, transparent );
	border-radius: 6px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.so-btn-picker__item:hover {
	border-color: var( --wp-admin-theme-color, #3858e9 );
	background: color-mix(
		in srgb,
		var( --wp-admin-theme-color, #3858e9 ) 8%,
		transparent
	);
}

.so-btn-picker__item.is-selected {
	border-color: var( --wp-admin-theme-color, #3858e9 );
	background: var( --wp-admin-theme-color, #3858e9 );
	color: #fff;
}

.so-btn-hint {
	font-size: 12px;
	opacity: 0.7;
	margin: 0.6em 0 0;
}

.so-btn-color-field {
	margin-bottom: 16px;
}

.so-btn-preview {
	padding: 8px 6px 10px;
	min-width: 190px;
}

.so-btn-preview__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: 0.7;
	margin-bottom: 8px;
}

.so-btn-preview__stage {
	display: flex;
	justify-content: center;
	padding: 16px 12px;
	border-radius: 8px;
	background:
		repeating-conic-gradient(
			#0000 0 25%,
			color-mix( in srgb, currentColor 7%, transparent ) 0 50%
		)
		0 / 16px 16px;
	overflow: hidden;
}

.so-btn-preview .wp-block-button {
	display: inline-block;
	margin: 0;
}

.so-btn-preview .wp-block-button__link {
	display: inline-block;
	padding: 0.62em 1.3em;
	border-radius: 6px;
	background: var( --wp--preset--color--contrast, #1e1e1e );
	color: var( --wp--preset--color--base, #ffffff );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: none;
	cursor: default;
}