.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 2.5rem;
	padding: .65rem 1.3rem;
	border: 0;
	border-radius: 100vmax;
	background: var(--color-youthful-yellow);
	color: var(--color-new-growth-navy);
	font-size: var(--text-button);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s,transform .2s;
}

.button:not(.button-outline):hover {
	background: var(--color-building-block-blue);
	transform: translateY(-.125rem);
}

.button-outline {
	border: .0625rem solid currentColor;
	background: transparent;
	color: var(--secondary-button-color,var(--color-new-growth-navy));
}

.button-outline:hover {
	background: transparent;
	color: var(--secondary-button-color,var(--color-new-growth-navy));
}

.button:disabled {
	cursor: default;
	opacity: .5;
	transform: none;
}

.button:disabled:hover {
	background: var(--color-youthful-yellow);
}

/* Primary hover rotation and confetti share the existing desktop hover gate. */
.button:not(.button-outline) {
	position: relative;
	isolation: isolate;
}

@media (min-width:48rem) and (hover:hover) and (pointer:fine) {

	.button:not(.button-outline):not(:disabled)::after {
		content: "";
		position: absolute;
		pointer-events: none;
		width: 3.5em;
		aspect-ratio: 191/171;
		left: calc(100% - .75rem);
		bottom: calc(100% - 1rem);
		background: url('../images/ornament-button-confetti.png') center/contain no-repeat;
		opacity: 0;
		transform: rotate(-28deg) scale(.12);
		transform-origin: 0 100%;
		transition: transform .42s var(--ease-out),opacity .2s ease;
		z-index: 1;
	}

	.button:not(.button-outline):not(:disabled):is(:hover,:focus-visible) {
		background: var(--color-youthful-yellow);
		transform: rotate(5deg);
	}

	.button:not(.button-outline):not(:disabled):is(:hover,:focus-visible)::after {
		opacity: 1;
		transform: rotate(0) scale(1);
	}
}

@media (prefers-reduced-motion:reduce) {

	.button {
		transform: none!important;
	}

	.button::after {
		transition: none!important;
		transform: none!important;
	}
}

.button-outline:disabled:hover {
	background: transparent;
}