/*
 * Storybook button hover effect, shared by every theme button.
 *
 * On hover (and keyboard focus) a button lifts with a springy bounce, gains a
 * soft gold glow, a shine sweeps across it like light over a book cover, and
 * its gold star or heart twinkles. It presses down when clicked. Visitors who
 * prefer reduced motion get the glow and colour change without movement.
 */

:root {
	--ylb-btn-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ylb-btn-glow: rgba(236, 162, 37, 0.38);
	--ylb-btn-lift-shadow: 0 10px 18px rgba(59, 26, 79, 0.28), 0 0 0 3px var(--ylb-btn-glow);
}

/* Buttons that get the full effect: lift, glow, shine and twinkle. */
.wp-block-button__link,
.ylb-subscribe button,
:is(.fluentform.ff-inherit-theme-style, .ff_form_preview .fluentform:not(.ff-default)) :is(.ff-btn-submit, .ff_submit_btn_wrapper button) {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform 0.35s var(--ylb-btn-spring),
		box-shadow 0.3s ease,
		filter 0.3s ease;
}

/* The shine: painted above the button colour but below its text. */
.wp-block-button__link::before,
.ylb-subscribe button::before,
:is(.fluentform.ff-inherit-theme-style, .ff_form_preview .fluentform:not(.ff-default)) :is(.ff-btn-submit, .ff_submit_btn_wrapper button)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.5) 45%, rgba(255, 244, 214, 0.65) 50%, rgba(255, 255, 255, 0.5) 55%, transparent 75%);
	transform: translateX(-130%);
	transition: transform 0.7s ease;
	pointer-events: none;
}

/* Other theme-styled buttons (search, comments, plugin buttons): lift and glow only. */
.wp-element-button:not(.wp-block-button__link) {
	transition:
		transform 0.35s var(--ylb-btn-spring),
		box-shadow 0.3s ease,
		filter 0.3s ease;
}

@media (hover: hover) {
	.wp-block-button .wp-block-button__link:hover,
	.ylb-subscribe button:hover,
	:is(.fluentform.ff-inherit-theme-style, .ff_form_preview .fluentform:not(.ff-default)) :is(.ff-btn-submit, .ff_submit_btn_wrapper button):hover,
	.wp-element-button:hover {
		transform: translateY(-3px) scale(1.03);
		box-shadow: var(--ylb-btn-lift-shadow);
		filter: brightness(1.07) saturate(1.05);
	}

	.wp-block-button .wp-block-button__link:hover::before,
	.ylb-subscribe button:hover::before,
	:is(.fluentform.ff-inherit-theme-style, .ff_form_preview .fluentform:not(.ff-default)) :is(.ff-btn-submit, .ff_submit_btn_wrapper button):hover::before {
		transform: translateX(130%);
	}

	.wp-block-button .wp-block-button__link:hover mark,
	.ylb-subscribe button:hover .ylb-star,
	:is(.fluentform.ff-inherit-theme-style, .ff_form_preview .fluentform:not(.ff-default)) :is(.ff-btn-submit, .ff_submit_btn_wrapper button):hover::after {
		animation: ylb-btn-twinkle 0.7s var(--ylb-btn-spring);
	}
}

/* Keyboard focus gets the same treatment plus a clear gold outline. */
.wp-block-button .wp-block-button__link:focus-visible,
.ylb-subscribe button:focus-visible,
:is(.fluentform.ff-inherit-theme-style, .ff_form_preview .fluentform:not(.ff-default)) :is(.ff-btn-submit, .ff_submit_btn_wrapper button):focus-visible,
.wp-element-button:focus-visible {
	transform: translateY(-3px) scale(1.03);
	box-shadow: var(--ylb-btn-lift-shadow);
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

.wp-block-button .wp-block-button__link:focus-visible::before,
.ylb-subscribe button:focus-visible::before,
:is(.fluentform.ff-inherit-theme-style, .ff_form_preview .fluentform:not(.ff-default)) :is(.ff-btn-submit, .ff_submit_btn_wrapper button):focus-visible::before {
	transform: translateX(130%);
}

/* The star or heart needs to be a box to rotate and scale. */
.wp-block-button__link mark,
.ylb-subscribe button .ylb-star {
	display: inline-block;
}

/* Pressed. */
.wp-block-button .wp-block-button__link:active,
.ylb-subscribe button:active,
:is(.fluentform.ff-inherit-theme-style, .ff_form_preview .fluentform:not(.ff-default)) :is(.ff-btn-submit, .ff_submit_btn_wrapper button):active,
.wp-element-button:active {
	transform: translateY(1px) scale(0.98);
	box-shadow: 0 2px 4px rgba(59, 26, 79, 0.25);
	transition-duration: 0.08s;
}

@keyframes ylb-btn-twinkle {
	0% {
		transform: rotate(0) scale(1);
	}

	35% {
		transform: rotate(-18deg) scale(1.45);
	}

	65% {
		transform: rotate(12deg) scale(1.15);
	}

	100% {
		transform: rotate(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.ylb-subscribe button,
	:is(.fluentform.ff-inherit-theme-style, .ff_form_preview .fluentform:not(.ff-default)) :is(.ff-btn-submit, .ff_submit_btn_wrapper button),
	.wp-element-button {
		transition: box-shadow 0.2s ease, filter 0.2s ease;
	}

	.wp-block-button .wp-block-button__link:hover,
	.wp-block-button .wp-block-button__link:focus-visible,
	.wp-block-button .wp-block-button__link:active,
	.ylb-subscribe button:hover,
	.ylb-subscribe button:focus-visible,
	.ylb-subscribe button:active,
	:is(.fluentform.ff-inherit-theme-style, .ff_form_preview .fluentform:not(.ff-default)) :is(.ff-btn-submit, .ff_submit_btn_wrapper button):hover,
	:is(.fluentform.ff-inherit-theme-style, .ff_form_preview .fluentform:not(.ff-default)) :is(.ff-btn-submit, .ff_submit_btn_wrapper button):focus-visible,
	:is(.fluentform.ff-inherit-theme-style, .ff_form_preview .fluentform:not(.ff-default)) :is(.ff-btn-submit, .ff_submit_btn_wrapper button):active,
	.wp-element-button:hover,
	.wp-element-button:focus-visible,
	.wp-element-button:active {
		transform: none;
	}

	.wp-block-button__link::before,
	.ylb-subscribe button::before,
	:is(.fluentform.ff-inherit-theme-style, .ff_form_preview .fluentform:not(.ff-default)) :is(.ff-btn-submit, .ff_submit_btn_wrapper button)::before {
		display: none;
	}

	.wp-block-button .wp-block-button__link:hover mark,
	.ylb-subscribe button:hover .ylb-star,
	:is(.fluentform.ff-inherit-theme-style, .ff_form_preview .fluentform:not(.ff-default)) :is(.ff-btn-submit, .ff_submit_btn_wrapper button):hover::after {
		animation: none;
	}
}

/*
 * Appearance > YLBT Settings can switch the animation off. The body then has
 * the ylb-no-button-hover class: buttons keep their colours but don't move,
 * shine or twinkle.
 */
.ylb-no-button-hover .wp-block-button .wp-block-button__link:hover,
.ylb-no-button-hover .wp-block-button .wp-block-button__link:focus-visible,
.ylb-no-button-hover .wp-block-button .wp-block-button__link:active,
.ylb-no-button-hover .ylb-subscribe button:hover,
.ylb-no-button-hover .ylb-subscribe button:focus-visible,
.ylb-no-button-hover .ylb-subscribe button:active,
.ylb-no-button-hover .wp-element-button:hover,
.ylb-no-button-hover .wp-element-button:focus-visible,
.ylb-no-button-hover .wp-element-button:active,
.ylb-no-button-hover :is(.fluentform.ff-inherit-theme-style, .ff_form_preview .fluentform:not(.ff-default)) :is(.ff-btn-submit, .ff_submit_btn_wrapper button):is(:hover, :focus-visible, :active) {
	transform: none;
	box-shadow: none;
	filter: none;
}

.ylb-no-button-hover .wp-block-button__link::before,
.ylb-no-button-hover .ylb-subscribe button::before,
.ylb-no-button-hover :is(.fluentform.ff-inherit-theme-style, .ff_form_preview .fluentform:not(.ff-default)) :is(.ff-btn-submit, .ff_submit_btn_wrapper button)::before {
	display: none;
}

.ylb-no-button-hover .wp-block-button__link mark,
.ylb-no-button-hover .ylb-subscribe button .ylb-star,
.ylb-no-button-hover :is(.fluentform.ff-inherit-theme-style, .ff_form_preview .fluentform:not(.ff-default)) :is(.ff-btn-submit, .ff_submit_btn_wrapper button)::after {
	animation: none !important;
}

/*
 * Formidable Forms submit buttons (theme-styled forms only; see
 * assets/css/compat-formidable.css) get the same effect. The star is the
 * button's ::after, as with Fluent Forms.
 */
:is(.frm_forms:not(.with_frm_style), .frm_forms.with_frm_style.frm_style_formidable-style):not(.ylb-frm-native) .frm_submit button {
	transition:
		transform 0.35s var(--ylb-btn-spring),
		box-shadow 0.3s ease,
		filter 0.3s ease;
}

:is(.frm_forms:not(.with_frm_style), .frm_forms.with_frm_style.frm_style_formidable-style):not(.ylb-frm-native) .frm_submit button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.5) 45%, rgba(255, 244, 214, 0.65) 50%, rgba(255, 255, 255, 0.5) 55%, transparent 75%);
	transform: translateX(-130%);
	transition: transform 0.7s ease;
	pointer-events: none;
}

@media (hover: hover) {
	:is(.frm_forms:not(.with_frm_style), .frm_forms.with_frm_style.frm_style_formidable-style):not(.ylb-frm-native) .frm_submit button:hover {
		transform: translateY(-3px) scale(1.03);
		box-shadow: var(--ylb-btn-lift-shadow);
		filter: brightness(1.07) saturate(1.05);
	}

	:is(.frm_forms:not(.with_frm_style), .frm_forms.with_frm_style.frm_style_formidable-style):not(.ylb-frm-native) .frm_submit button:hover::before {
		transform: translateX(130%);
	}

	:is(.frm_forms:not(.with_frm_style), .frm_forms.with_frm_style.frm_style_formidable-style):not(.ylb-frm-native) .frm_submit button:hover::after {
		display: inline-block;
		animation: ylb-btn-twinkle 0.7s var(--ylb-btn-spring);
	}
}

:is(.frm_forms:not(.with_frm_style), .frm_forms.with_frm_style.frm_style_formidable-style):not(.ylb-frm-native) .frm_submit button:focus-visible {
	transform: translateY(-3px) scale(1.03);
	box-shadow: var(--ylb-btn-lift-shadow);
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

:is(.frm_forms:not(.with_frm_style), .frm_forms.with_frm_style.frm_style_formidable-style):not(.ylb-frm-native) .frm_submit button:focus-visible::before {
	transform: translateX(130%);
}

:is(.frm_forms:not(.with_frm_style), .frm_forms.with_frm_style.frm_style_formidable-style):not(.ylb-frm-native) .frm_submit button:active {
	transform: translateY(1px) scale(0.98);
	box-shadow: 0 2px 4px rgba(59, 26, 79, 0.25);
	transition-duration: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
	:is(.frm_forms:not(.with_frm_style), .frm_forms.with_frm_style.frm_style_formidable-style):not(.ylb-frm-native) .frm_submit button:is(:hover, :focus-visible, :active) {
		transform: none;
	}

	:is(.frm_forms:not(.with_frm_style), .frm_forms.with_frm_style.frm_style_formidable-style):not(.ylb-frm-native) .frm_submit button::before {
		display: none;
	}

	:is(.frm_forms:not(.with_frm_style), .frm_forms.with_frm_style.frm_style_formidable-style):not(.ylb-frm-native) .frm_submit button:hover::after {
		animation: none;
	}
}

.ylb-no-button-hover :is(.frm_forms:not(.with_frm_style), .frm_forms.with_frm_style.frm_style_formidable-style):not(.ylb-frm-native) .frm_submit button:is(:hover, :focus-visible, :active) {
	transform: none;
	box-shadow: none;
	filter: none;
}

.ylb-no-button-hover :is(.frm_forms:not(.with_frm_style), .frm_forms.with_frm_style.frm_style_formidable-style):not(.ylb-frm-native) .frm_submit button::before {
	display: none;
}

.ylb-no-button-hover :is(.frm_forms:not(.with_frm_style), .frm_forms.with_frm_style.frm_style_formidable-style):not(.ylb-frm-native) .frm_submit button::after {
	animation: none !important;
}

/*
 * Storybook button colours, picked from a Button block's Styles panel:
 * Blue / Purple / Gold pill, each optionally with a gold star (or a red heart
 * for gold). The star or heart is decorative and added after the text, so it
 * can't be deleted by accident. A colour chosen in the block's Color settings
 * (.has-background / .has-text-color) still wins over the style.
 */
.wp-block-button[class*="is-style-ylb-pill-"] .wp-block-button__link {
	border-radius: 999px;
	padding: 0.6em 1.35em;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18), 0 5px 8px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.wp-block-button:is(.is-style-ylb-pill-blue, .is-style-ylb-pill-blue-star) .wp-block-button__link:not(.has-background) {
	background-color: var(--wp--preset--color--button-blue);
}

.wp-block-button:is(.is-style-ylb-pill-purple, .is-style-ylb-pill-purple-star) .wp-block-button__link:not(.has-background) {
	background-color: var(--wp--preset--color--royal-purple);
}

.wp-block-button:is(.is-style-ylb-pill-gold, .is-style-ylb-pill-gold-heart) .wp-block-button__link:not(.has-background) {
	background-color: var(--wp--preset--color--gold);
}

.wp-block-button:is(.is-style-ylb-pill-blue, .is-style-ylb-pill-blue-star, .is-style-ylb-pill-purple, .is-style-ylb-pill-purple-star) .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--white);
}

.wp-block-button:is(.is-style-ylb-pill-gold, .is-style-ylb-pill-gold-heart) .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--plum);
}

.wp-block-button:is(.is-style-ylb-pill-blue-star, .is-style-ylb-pill-purple-star, .is-style-ylb-pill-gold-heart) .wp-block-button__link::after {
	display: inline-block;
	margin-left: 0.35em;
	line-height: 1;
}

.wp-block-button:is(.is-style-ylb-pill-blue-star, .is-style-ylb-pill-purple-star) .wp-block-button__link::after {
	content: "\2605";
	color: var(--wp--preset--color--gold);
}

.wp-block-button.is-style-ylb-pill-gold-heart .wp-block-button__link::after {
	content: "\2665";
	color: var(--wp--preset--color--heart-red);
}

@media (hover: hover) {
	.wp-block-button:is(.is-style-ylb-pill-blue-star, .is-style-ylb-pill-purple-star, .is-style-ylb-pill-gold-heart) .wp-block-button__link:hover::after {
		animation: ylb-btn-twinkle 0.7s var(--ylb-btn-spring);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button:is(.is-style-ylb-pill-blue-star, .is-style-ylb-pill-purple-star, .is-style-ylb-pill-gold-heart) .wp-block-button__link:hover::after {
		animation: none;
	}
}

.ylb-no-button-hover .wp-block-button:is(.is-style-ylb-pill-blue-star, .is-style-ylb-pill-purple-star, .is-style-ylb-pill-gold-heart) .wp-block-button__link::after {
	animation: none !important;
}