// ============================================================
// Osmo — Button 043 (Komma header CTA pattern)
// data-button-043 must not be renamed.
// Typo via .text-* in Twig; colors via Genesis tokens.
// ============================================================

.button-043 {
	--button-043-color: var(--c-white);
	--button-043-color-background: var(--c-black);
	--button-043-hover-color-background: var(--c-primary);
	--button-043-icon-color: var(--c-black);
	--button-043-icon-color-background: var(--c-white);
	--button-043-color-focus: var(--c-primary);
	--button-043-padding: 1.05em 1.9em;
	--button-043-border-radius: 100em;
	--button-043-icon-border-radius: 100em;
	--button-043-text-duplicate-distance: 1.5em;
	--button-043-focus-inset: -0.125em;
	--button-043-dash-inset: 0.35em;
	--button-043-dash-color: color-mix(in srgb, var(--button-043-color) 30%, transparent);
	--button-043-ease-hover: cubic-bezier(0.625, 0.05, 0, 1);
	--button-043-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);

	-webkit-user-select: none;
	user-select: none;
	color: var(--button-043-color);
	background-color: transparent;
	outline-style: none;
	padding: 0;
	border: 0;
	border-radius: var(--button-043-border-radius);
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	display: inline-grid;
	position: relative;
	overflow: clip;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

// Inset dotted contour (follows pill shape).
.button-043::before {
	content: '';
	display: block;
	position: absolute;
	inset: var(--button-043-dash-inset);
	border: 1px dashed var(--button-043-dash-color);
	border-radius: inherit;
	pointer-events: none;
	z-index: 2;
	transition: border-color 0.35s var(--button-043-ease-hover);
}

.button-043::after {
	content: '';
	display: block;
	position: absolute;
	inset: var(--button-043-focus-inset);
	border-radius: var(--button-043-border-radius);
	transition: box-shadow 0.2s var(--button-043-ease-focus);
	pointer-events: none;
	z-index: 1;
}

.button-043:is(:focus-visible)::after {
	box-shadow: 0 0 0 0.125em var(--button-043-color-focus);
}

.button-043__bg {
	background-color: var(--button-043-color-background);
	border-radius: var(--button-043-border-radius);
	grid-area: 1 / 1;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.button-043__bg-hover {
	background-color: var(--button-043-hover-color-background);
	position: absolute;
	inset: 0;
	transition: transform 0.525s var(--button-043-ease-hover);
	transform: translate3d(0, 101%, 0);
}

.button-043__inner {
	column-gap: 0.55em;
	row-gap: 0.55em;
	width: 100%;
	height: 100%;
	padding: var(--button-043-padding);
	grid-area: 1 / 1;
	justify-content: center;
	align-items: center;
	display: flex;
	position: relative;
	z-index: 3;
}

.button-043__mask {
	clip-path: inset(-10% 0);
	flex: none;
	justify-content: center;
	align-items: center;
	display: flex;
}

.button-043__text {
	transition: transform 0.525s var(--button-043-ease-hover);
	text-shadow: 0 var(--button-043-text-duplicate-distance) currentColor;
}

.button-043__icon-wrap {
	width: 1.125em;
	height: 1.125em;
	color: var(--button-043-icon-color);
	border-radius: var(--button-043-icon-border-radius);
	flex: none;
	display: grid;
	position: relative;
	transform: translateY(-0.08em);
}

.button-043__icon-bg {
	background-color: var(--button-043-icon-color-background);
	border-radius: var(--button-043-icon-border-radius);
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	padding: 0;
	transition: transform 0.525s var(--button-043-ease-hover);
}

.button-043__icon-mask {
	grid-area: 1 / 1;
	justify-content: flex-end;
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
	overflow: clip;
}

.button-043__icon-list {
	flex-flow: row;
	grid-area: 1 / 1;
	display: flex;
	position: absolute;
}

.button-043__icon {
	width: 1.125em;
	height: 1.125em;
	padding: 0.2em;
	display: block;
	transition: transform 0.525s var(--button-043-ease-hover);
}

.button-043:is(:hover, :focus-visible) {
	color: var(--c-white);
	--button-043-dash-color: color-mix(in srgb, var(--c-white) 42%, transparent);
}

// White pill — black label (dark sections: nav, formula cards…).
.button-043--white {
	--button-043-color: var(--c-black);
	--button-043-color-background: var(--c-white);
}

.button-043--icon {
	--button-043-text-duplicate-distance: 1.25em;

	.button-043__mask {
		display: block;
		height: var(--button-043-text-duplicate-distance);
		overflow: clip;
	}

	.button-043__text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		text-shadow: none;
	}

	// Lock row colors — don't inherit hover `color` (avoids white→black flash).
	&:is(:hover, :focus-visible) {
		color: var(--button-043-color);
	}
}

.button-043__row {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	height: var(--button-043-text-duplicate-distance);
	flex: none;

	&:first-child {
		color: var(--button-043-color);
	}

	&:last-child {
		color: var(--c-white);
	}
}

.button-043__leading-icon {
	display: block;
	width: 1.125em;
	height: 1.125em;
	flex: none;
	color: inherit;

	svg {
		display: block;
		width: 100%;
		height: 100%;
	}
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.button-043:is(:hover, :focus-visible) .button-043__bg-hover {
		transform: translate3d(0, 0, 0);
	}

	.button-043:is(:hover, :focus-visible) .button-043__text {
		transform: translateY(calc(-1 * var(--button-043-text-duplicate-distance)));
	}

	.button-043:is(:hover, :focus-visible) .button-043__icon-bg {
		transform: rotate(90deg);
	}

	.button-043:is(:hover, :focus-visible) .button-043__icon {
		transform: translate3d(200%, 0, 0);
	}
}
