/**
 * Laconic hover effects for filled + outline buttons (site-wide).
 * Classes .wylga-btn-filled / .wylga-btn-outline are applied by frontend-buttons.js.
 */

.wylga-btn-filled,
.wylga-btn-outline {
	--wylga-btn-hover-duration: 200ms;
	--wylga-btn-hover-easing: ease;
	transition:
		background-color var(--wylga-btn-hover-duration) var(--wylga-btn-hover-easing),
		color var(--wylga-btn-hover-duration) var(--wylga-btn-hover-easing),
		border-color var(--wylga-btn-hover-duration) var(--wylga-btn-hover-easing),
		transform var(--wylga-btn-hover-duration) var(--wylga-btn-hover-easing);
}

/*
 * Filled (orange): same color — one diagonal shine sweep on hover.
 */
.wylga-btn-filled {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.wylga-btn-filled::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		105deg,
		transparent 28%,
		rgba(255, 255, 255, 0.35) 42%,
		rgba(255, 255, 255, 0.75) 50%,
		rgba(255, 255, 255, 0.35) 58%,
		transparent 72%
	);
	transform: translateX(-130%) skewX(-12deg);
	opacity: 0;
}

@keyframes wylga-btn-shine {
	0% {
		transform: translateX(-130%) skewX(-12deg);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	100% {
		transform: translateX(130%) skewX(-12deg);
		opacity: 0;
	}
}

.wylga-btn-filled:hover::after,
.wylga-btn-filled:focus-visible::after {
	animation: wylga-btn-shine 0.7s ease-out 1;
}

/* Keep label above the shine. */
.wylga-btn-filled > * {
	position: relative;
	z-index: 2;
}

/*
 * Outline: fill with border color, invert text.
 * --wylga-btn-outline-fill is set by JS from computed border-color.
 */
.wylga-btn-outline:hover,
.wylga-btn-outline:focus-visible {
	background-color: var(--wylga-btn-outline-fill, currentColor) !important;
	border-color: var(--wylga-btn-outline-fill, currentColor) !important;
	color: var(--wylga-btn-outline-ink, #fff) !important;
}

.wylga-btn-outline:not(.wylga-carousel__btn):hover,
.wylga-btn-outline:not(.wylga-carousel__btn):focus-visible {
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.wylga-btn-filled:hover::after,
	.wylga-btn-filled:focus-visible::after {
		animation: none !important;
	}

	.wylga-btn-outline:hover,
	.wylga-btn-outline:focus-visible {
		transform: none !important;
	}
}