/* Webbler Button */

.wbtn-wrap {
	--wbtn-width: auto;
	display: flex;
	justify-content: flex-start;
}

.wbtn {
	--wbtn-duration: 350ms;
	--wbtn-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
	--wbtn-focus: #101921;

	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wbtn-width);
	max-width: 100%;
	padding: 16px 30px;
	overflow: hidden;
	isolation: isolate;
	border-radius: 8px;
	background-color: transparent;
	color: #101921;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition:
		color var(--wbtn-duration) var(--wbtn-ease),
		background-color var(--wbtn-duration) var(--wbtn-ease),
		border-color var(--wbtn-duration) var(--wbtn-ease),
		box-shadow var(--wbtn-duration) var(--wbtn-ease),
		transform var(--wbtn-duration) var(--wbtn-ease),
		backdrop-filter var(--wbtn-duration) var(--wbtn-ease),
		-webkit-backdrop-filter var(--wbtn-duration) var(--wbtn-ease);
}

.wbtn,
.wel-can-hover .wbtn:hover,
.wbtn:focus,
.wbtn:visited {
	text-decoration: none;
}

.wbtn:focus {
	outline: none;
}

.wbtn:focus-visible {
	outline: 2px solid var(--wbtn-focus);
	outline-offset: 3px;
}

/* Content */

.wbtn__inner {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
}

.wbtn--icon-right .wbtn__inner {
	flex-direction: row-reverse;
}

.wbtn__text {
	display: inline-block;
}

.wbtn__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 1em;
	line-height: 1;
	transition:
		transform var(--wbtn-duration) var(--wbtn-ease),
		color var(--wbtn-duration) var(--wbtn-ease),
		background-color var(--wbtn-duration) var(--wbtn-ease),
		opacity var(--wbtn-duration) var(--wbtn-ease),
		max-width var(--wbtn-duration) var(--wbtn-ease),
		margin var(--wbtn-duration) var(--wbtn-ease);
}

.wbtn__icon i {
	font-size: inherit;
	line-height: 1;
}

.wbtn__icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ---------- Hover background fill (the .wbtn__fill layer gets the hover color) ---------- */

.wbtn__fill {
	position: absolute;
	inset: -1px;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	transition:
		transform var(--wbtn-duration) var(--wbtn-ease),
		opacity var(--wbtn-duration) var(--wbtn-ease),
		clip-path var(--wbtn-duration) var(--wbtn-ease);
}

/* fade */
.wbtn--fill-fade .wbtn__fill {
	opacity: 0;
}
.wel-can-hover .wbtn--fill-fade:hover .wbtn__fill,
.wbtn--fill-fade:focus-visible .wbtn__fill {
	opacity: 1;
}

/* sweeps */
.wbtn--fill-left .wbtn__fill {
	transform: scaleX(0);
	transform-origin: left center;
}
.wbtn--fill-right .wbtn__fill {
	transform: scaleX(0);
	transform-origin: right center;
}
.wbtn--fill-up .wbtn__fill {
	transform: scaleY(0);
	transform-origin: center bottom;
}
.wbtn--fill-down .wbtn__fill {
	transform: scaleY(0);
	transform-origin: center top;
}
.wbtn--fill-center .wbtn__fill {
	transform: scaleX(0);
	transform-origin: center;
}
.wel-can-hover .wbtn--fill-left:hover .wbtn__fill,
.wel-can-hover .wbtn--fill-right:hover .wbtn__fill,
.wel-can-hover .wbtn--fill-up:hover .wbtn__fill,
.wel-can-hover .wbtn--fill-down:hover .wbtn__fill,
.wel-can-hover .wbtn--fill-center:hover .wbtn__fill,
.wbtn--fill-left:focus-visible .wbtn__fill,
.wbtn--fill-right:focus-visible .wbtn__fill,
.wbtn--fill-up:focus-visible .wbtn__fill,
.wbtn--fill-down:focus-visible .wbtn__fill,
.wbtn--fill-center:focus-visible .wbtn__fill {
	transform: none;
}

/* circle */
.wbtn--fill-circle .wbtn__fill {
	clip-path: circle(0% at 50% 50%);
}
.wel-can-hover .wbtn--fill-circle:hover .wbtn__fill,
.wbtn--fill-circle:focus-visible .wbtn__fill {
	clip-path: circle(75% at 50% 50%);
}

/* diagonal */
.wbtn--fill-diagonal .wbtn__fill {
	clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%);
}
.wel-can-hover .wbtn--fill-diagonal:hover .wbtn__fill,
.wbtn--fill-diagonal:focus-visible .wbtn__fill {
	clip-path: polygon(0 0, 130% 0, 100% 100%, -30% 100%);
}

/* ---------- Shine sweep ---------- */

.wbtn--shine::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -75%;
	z-index: 3;
	width: 50%;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
}

.wel-can-hover .wbtn--shine:hover::after,
.wbtn--shine:focus-visible::after {
	animation: wbtn-shine calc(var(--wbtn-duration) * 2) var(--wbtn-ease) 1;
}

@keyframes wbtn-shine {
	from { left: -75%; }
	to { left: 130%; }
}

.wel-can-hover /* ---------- Movement on hover ---------- */

.wbtn--motion-grow:hover,
.wbtn--motion-grow:focus-visible {
	transform: scale(1.06);
}

.wel-can-hover .wbtn--motion-shrink:hover,
.wbtn--motion-shrink:focus-visible {
	transform: scale(0.94);
}

.wel-can-hover .wbtn--motion-lift:hover,
.wbtn--motion-lift:focus-visible {
	transform: translateY(-4px);
}

.wel-can-hover .wbtn--motion-sink:hover,
.wbtn--motion-sink:focus-visible {
	transform: translateY(3px);
}

.wel-can-hover .wbtn--motion-tilt:hover,
.wbtn--motion-tilt:focus-visible {
	transform: rotate(-3deg) scale(1.03);
}

.wel-can-hover .wbtn--motion-pulse:hover,
.wbtn--motion-pulse:focus-visible {
	animation: wbtn-pulse 1s ease-in-out infinite;
}

.wel-can-hover .wbtn--motion-bounce:hover,
.wbtn--motion-bounce:focus-visible {
	animation: wbtn-bounce 0.7s ease 1;
}

.wel-can-hover .wbtn--motion-shake:hover,
.wbtn--motion-shake:focus-visible {
	animation: wbtn-shake 0.5s ease 1;
}

@keyframes wbtn-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.06); }
}

@keyframes wbtn-bounce {
	0%, 100% { transform: translateY(0); }
	30% { transform: translateY(-7px); }
	55% { transform: translateY(0); }
	75% { transform: translateY(-3px); }
}

@keyframes wbtn-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-4px); }
	40% { transform: translateX(4px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(2px); }
}

.wel-can-hover /* ---------- Icon movement ---------- */

.wbtn--icon-right.wbtn--icon-slide:hover .wbtn__icon,
.wbtn--icon-right.wbtn--icon-slide:focus-visible .wbtn__icon {
	transform: translateX(4px);
}

.wel-can-hover .wbtn--icon-left.wbtn--icon-slide:hover .wbtn__icon,
.wbtn--icon-left.wbtn--icon-slide:focus-visible .wbtn__icon {
	transform: translateX(-4px);
}

.wel-can-hover .wbtn--icon-spin:hover .wbtn__icon,
.wbtn--icon-spin:focus-visible .wbtn__icon {
	transform: rotate(360deg);
}

/* Reveal: icon hidden (takes no space) until hover */
.wbtn--icon-reveal .wbtn__icon {
	max-width: 0;
	opacity: 0;
	overflow: hidden;
}

.wbtn--icon-reveal .wbtn__inner {
	gap: 0;
}

.wbtn--icon-reveal.wbtn--icon-right .wbtn__icon {
	transform: translateX(-8px);
}

.wbtn--icon-reveal.wbtn--icon-left .wbtn__icon {
	transform: translateX(8px);
}

.wel-can-hover .wbtn--icon-reveal:hover .wbtn__icon,
.wbtn--icon-reveal:focus-visible .wbtn__icon {
	max-width: 3em;
	opacity: 1;
	transform: none;
}

.wel-can-hover .wbtn--icon-reveal.wbtn--icon-right:hover .wbtn__icon,
.wbtn--icon-reveal.wbtn--icon-right:focus-visible .wbtn__icon {
	margin-left: 10px;
}

.wel-can-hover .wbtn--icon-reveal.wbtn--icon-left:hover .wbtn__icon,
.wbtn--icon-reveal.wbtn--icon-left:focus-visible .wbtn__icon {
	margin-right: 10px;
}

/* ---------- Attention effects (always running) ---------- */

.wbtn--attention-pulse {
	animation: wbtn-ring 2.2s ease-out infinite;
}

.wel-can-hover .wbtn--attention-pulse:hover,
.wbtn--attention-pulse:focus-visible {
	animation-play-state: paused;
}

@keyframes wbtn-ring {
	0% { box-shadow: 0 0 0 0 var(--wbtn-ring, rgba(255, 198, 0, 0.6)); }
	70% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.wbtn--attention-wiggle:not(:hover) {
	animation: wbtn-wiggle 4s ease-in-out infinite;
}

@keyframes wbtn-wiggle {
	0%, 84%, 100% { transform: rotate(0); }
	87% { transform: rotate(-4deg); }
	90% { transform: rotate(4deg); }
	93% { transform: rotate(-3deg); }
	96% { transform: rotate(2deg); }
}

/* Icon-only button */
.wbtn--icon-only {
	aspect-ratio: 1;
	padding: 0.9em;
}

.wbtn--icon-only .wbtn__inner {
	gap: 0;
}

/* Respect visitors who turned off animations in their system settings */
@media (prefers-reduced-motion: reduce) {
	.wbtn,
	.wbtn__fill,
	.wbtn__icon {
		transition-duration: 0ms !important;
	}

	.wbtn,
	.wbtn::before,
	.wbtn::after {
		animation: none !important;
	}

	.wel-can-hover .wbtn:hover,
.wbtn:focus-visible {
		transform: none !important;
	}
}