/* Reusable class: add this only on button fields */
button.webitof-btn-effect,
input[type="button"].webitof-btn-effect,
input[type="submit"].webitof-btn-effect,
input[type="reset"].webitof-btn-effect {
	position: relative;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	transform: translateZ(0);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

button.webitof-btn-effect:hover,
button.webitof-btn-effect:focus-visible,
input[type="button"].webitof-btn-effect:hover,
input[type="button"].webitof-btn-effect:focus-visible,
input[type="submit"].webitof-btn-effect:hover,
input[type="submit"].webitof-btn-effect:focus-visible,
input[type="reset"].webitof-btn-effect:hover,
input[type="reset"].webitof-btn-effect:focus-visible {
	transform: translateY(-3px) scale(1.015);
	box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.5), 0 8px 16px -12px rgba(0, 0, 0, 0.35);
	outline: none;
}

button.webitof-btn-effect:active,
input[type="button"].webitof-btn-effect:active,
input[type="submit"].webitof-btn-effect:active,
input[type="reset"].webitof-btn-effect:active {
	transition-duration: 0.12s;
	transform: translateY(0) scale(0.985);
	box-shadow: 0 6px 14px -12px rgba(0, 0, 0, 0.45);
}

/* Premium hover sweep for actual <button> elements */
button.webitof-btn-effect::after {
	content: "";
	position: absolute;
	top: -140%;
	left: -35%;
	width: 35%;
	height: 280%;
	background: linear-gradient(
		115deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.5) 48%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: translateX(-260%) rotate(18deg);
	pointer-events: none;
	opacity: 0;
}

button.webitof-btn-effect:hover::after,
button.webitof-btn-effect:focus-visible::after {
	opacity: 1;
	animation: webitof-btn-shine 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1;
}

@keyframes webitof-btn-shine {
	0% {
		transform: translateX(-260%) rotate(18deg);
	}

	100% {
		transform: translateX(420%) rotate(18deg);
	}
}