/**
 * Syoska Motion Presets – Buttons & Links
 *
 * smp-btn-gradient-shift: Verlauf bewegt sich bei Hover (Background-Position).
 * smp-btn-scale-soft: leichte Skalierung + Schatten bei Hover/Focus.
 * smp-btn-shine: Lichtstreifen fährt einmal über den Button (Hover).
 * smp-link-underline-grow: Unterstreichung wächst von der Mitte.
 */

/* Gemeinsame Button-Basis (optional mit .button, .wp-block-button__link kombinierbar) */
.smp-btn-gradient-shift,
.smp-btn-scale-soft,
.smp-btn-shine {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition:
		transform var(--smp-duration) var(--smp-ease),
		box-shadow var(--smp-duration) var(--smp-ease),
		color var(--smp-duration) var(--smp-ease),
		background-position var(--smp-duration-slow) var(--smp-ease);
}

/* Verlauf-Shift: Theme-Hintergrund bleibt möglich, Overlay-Verlauf darüber */
.smp-btn-gradient-shift {
	background-image: linear-gradient(
		120deg,
		var(--smp-accent) 0%,
		var(--smp-accent-2) 50%,
		var(--smp-accent) 100%
	);
	background-size: 200% 100%;
	background-position: 0% 50%;
	color: #fff;
	border: none;
	cursor: pointer;
	text-decoration: none;
	border-radius: var(--smp-radius);
	padding: 0.65em 1.25em;
}

.smp-btn-gradient-shift:hover,
.smp-btn-gradient-shift:focus-visible {
	background-position: 100% 50%;
	transform: translateY(-1px);
	box-shadow: 0 0.35em 1.2em color-mix(in srgb, var(--smp-accent) 35%, transparent);
}

.smp-btn-gradient-shift:focus-visible {
	outline: 2px solid var(--smp-accent);
	outline-offset: 2px;
}

/* Sanfte Skalierung – nutzt currentColor / transparenten Rahmen */
.smp-btn-scale-soft {
	border-radius: var(--smp-radius);
	padding: 0.65em 1.25em;
	cursor: pointer;
	text-decoration: none;
	border: 1px solid color-mix(in srgb, var(--smp-foreground) 25%, transparent);
	background: color-mix(in srgb, var(--smp-accent) 12%, transparent);
	color: var(--smp-foreground);
}

.smp-btn-scale-soft:hover,
.smp-btn-scale-soft:focus-visible {
	transform: scale(1.03);
	box-shadow: 0 0.5em 1.5em color-mix(in srgb, var(--smp-accent) 20%, transparent);
}

.smp-btn-scale-soft:focus-visible {
	outline: 2px solid var(--smp-accent);
	outline-offset: 2px;
}

/* Shine: nur sichtbar bei Hover */
.smp-btn-shine {
	border-radius: var(--smp-radius);
	padding: 0.65em 1.25em;
	cursor: pointer;
	text-decoration: none;
	background: var(--smp-accent);
	color: #fff;
	border: none;
	isolation: isolate;
}

.smp-btn-shine::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		transparent 0%,
		color-mix(in srgb, #fff 45%, transparent) 45%,
		transparent 55%
	);
	transform: translateX(-120%);
	transition: transform var(--smp-duration-slow) var(--smp-ease-out);
	pointer-events: none;
	z-index: 1;
	border-radius: inherit;
}

.smp-btn-shine:hover::after,
.smp-btn-shine:focus-visible::after {
	transform: translateX(120%);
}

.smp-btn-shine:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Link-Unterstreichung */
.smp-link-underline {
	position: relative;
	text-decoration: none;
	color: inherit;
}

.smp-link-underline::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -0.12em;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--smp-accent), var(--smp-accent-2));
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
	transition: transform var(--smp-duration) var(--smp-ease);
}

.smp-link-underline:hover::after,
.smp-link-underline:focus-visible::after {
	transform: translateX(-50%) scaleX(1);
}

.smp-link-underline:focus-visible {
	outline: 2px solid var(--smp-accent);
	outline-offset: 4px;
	border-radius: 2px;
}