/* MoxKit button widget: shapes, hover animations, icon animations, attention loops and click feedback.
   Colors, gap and padding arrive as variables from the Style tab (--mx-bg, --mx-bg-h, --mx-ink, --mx-ink-h,
   --mx-line, --mx-line-h, --mx-gap, --mx-pt/pr/pb/pl); the fallbacks reproduce the plain button. */
.moxkit-button-wrap .moxkit-button{
	--mx-dur:450ms;
	--mx-ease:cubic-bezier(.2,.8,.2,1);
	--mx-c:var(--mx-bg,#635bff);
	--mx-f:var(--mx-fx,var(--mx-c));
	position:relative;
	isolation:isolate;
	gap:var(--mx-gap,10px);
	padding:var(--mx-pt,14px) var(--mx-pr,24px) var(--mx-pb,14px) var(--mx-pl,24px);
	background-color:var(--mx-c);
	color:var(--mx-ink,#fff);
	border-color:var(--mx-line,transparent);
	transition:transform var(--mx-dur) var(--mx-ease),box-shadow var(--mx-dur) var(--mx-ease),background-color var(--mx-dur) ease,color var(--mx-dur) ease,border-color var(--mx-dur) ease,letter-spacing var(--mx-dur) var(--mx-ease);
}
.moxkit-button-wrap .moxkit-button:is(:hover,:focus-visible){
	background-color:var(--mx-bg-h,var(--mx-bg,#4d43de));
	color:var(--mx-ink-h,var(--mx-ink,#fff));
	border-color:var(--mx-line-h,var(--mx-line,transparent));
}
/* Elementor writes the global default color on .elementor-widget-moxkit-button .moxkit-button; the plugin's own
   color always won over it, so it is dropped here. A color picked in the panel (a stronger selector) still applies. */
.moxkit-root.moxkit-button-wrap .moxkit-button{--mx-bg:initial}
.moxkit-button .moxkit-btn-arrow{fill:none}
.moxkit-button-label{position:relative;display:inline-block}
.moxkit-btn-text{display:inline-block}
/* Painted layers: clipped to the button, under the text. */
.moxkit-btn-layers{position:absolute;z-index:-1;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}

/* ---------- Shapes ---------- */
.moxkit-button.moxkit-btn--pill{border-radius:999px}
.moxkit-button.moxkit-btn--sharp{border-radius:0;letter-spacing:.08em;text-transform:uppercase}
.moxkit-button.moxkit-btn--outline{background-color:transparent;color:var(--mx-c);box-shadow:inset 0 0 0 2px var(--mx-c)}
.moxkit-button.moxkit-btn--outline:is(:hover,:focus-visible){
	background-color:var(--mx-bg-h,var(--mx-c));
	color:var(--mx-ink-h,var(--mx-ink,#fff));
	box-shadow:inset 0 0 0 2px var(--mx-bg-h,var(--mx-c));
}
.moxkit-button.moxkit-btn--tonal{
	background-color:rgba(99,91,255,.14);
	background-color:color-mix(in srgb,var(--mx-c) 14%,transparent);
	color:var(--mx-c);
}
.moxkit-button.moxkit-btn--tonal:is(:hover,:focus-visible){
	background-color:rgba(99,91,255,.24);
	background-color:color-mix(in srgb,var(--mx-bg-h,var(--mx-c)) 24%,transparent);
	color:var(--mx-ink-h,var(--mx-c));
}
.moxkit-button.moxkit-btn--link{padding:.25em 0;border-radius:0;background-color:transparent;color:var(--mx-c)}
.moxkit-button.moxkit-btn--link::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:2px;
	background:currentColor;
	transform:scaleX(.35);
	transform-origin:0 50%;
	transition:transform var(--mx-dur) var(--mx-ease);
}
.moxkit-button.moxkit-btn--link:is(:hover,:focus-visible){background-color:transparent;color:var(--mx-bg-h,var(--mx-c))}
.moxkit-button.moxkit-btn--link:is(:hover,:focus-visible)::after{transform:none}
.moxkit-button.moxkit-btn--bubble{border-radius:999px;padding:.4em .4em .4em var(--mx-pl,24px);gap:var(--mx-gap,14px)}
.moxkit-btn-bub{
	position:relative;
	isolation:isolate;
	display:grid;
	place-items:center;
	flex:none;
	width:2.8em;
	height:2.8em;
	border-radius:50%;
	background-color:var(--mx-ink,#fff);
	color:var(--mx-c);
	transition:transform var(--mx-dur) var(--mx-ease),background-color .3s ease .1s,color .3s ease;
}
.moxkit-button.moxkit-btn--ticket{gap:0;padding:0;overflow:hidden}
.moxkit-button.moxkit-btn--ticket .moxkit-button-label{padding:var(--mx-pt,14px) var(--mx-pr,24px) var(--mx-pb,14px) var(--mx-pl,24px)}
.moxkit-btn-block{
	display:grid;
	place-items:center;
	align-self:stretch;
	flex:none;
	width:3.4em;
	background-color:rgba(0,0,0,.2);
	background-color:var(--mx-fx,color-mix(in srgb,var(--mx-c) 72%,#000));
	transition:width var(--mx-dur) var(--mx-ease);
}
.moxkit-button.moxkit-btn--ticket:is(:hover,:focus-visible) .moxkit-btn-block{width:4.3em}
.moxkit-button.moxkit-btn--brutal{
	border-radius:8px;
	box-shadow:inset 0 0 0 2px var(--mx-edge,#111),5px 5px 0 var(--mx-edge,#111);
	transition:transform .18s ease,box-shadow .18s ease,background-color .2s ease,color .2s ease;
}
.moxkit-button.moxkit-btn--brutal:is(:hover,:focus-visible){
	transform:translate(3px,3px);
	box-shadow:inset 0 0 0 2px var(--mx-edge,#111),2px 2px 0 var(--mx-edge,#111);
}
.moxkit-button.moxkit-btn--brutal:active{transform:translate(5px,5px);box-shadow:inset 0 0 0 2px var(--mx-edge,#111),0 0 0 var(--mx-edge,#111)}
.moxkit-button.moxkit-btn--depth{
	border-radius:12px;
	--mx-e:var(--mx-edge,color-mix(in srgb,var(--mx-c) 62%,#000));
	box-shadow:0 6px 0 #3b33b8,0 12px 18px -6px rgba(0,0,0,.35);
	box-shadow:0 6px 0 var(--mx-e),0 12px 18px -6px rgba(0,0,0,.35);
	transition:transform .12s ease,box-shadow .12s ease,background-color .2s ease,color .2s ease;
}
.moxkit-button.moxkit-btn--depth:is(:hover,:focus-visible){transform:translateY(2px);box-shadow:0 4px 0 var(--mx-e),0 8px 14px -6px rgba(0,0,0,.35)}
.moxkit-button.moxkit-btn--depth:active{transform:translateY(6px);box-shadow:0 0 0 var(--mx-e),0 4px 8px -6px rgba(0,0,0,.35)}
@property --mx-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.moxkit-button.moxkit-btn--gradient{
	--mx-f:var(--mx-fx,var(--mx-g1,#635bff));
	border:2px solid transparent;
	background:linear-gradient(var(--mx-c),var(--mx-c)) padding-box,conic-gradient(from var(--mx-a),var(--mx-g1,#635bff),var(--mx-g2,#ec4899),var(--mx-g3,#f59e0b),var(--mx-g1,#635bff)) border-box;
	animation:moxkit-btn-spin calc(var(--mx-dur) * 7) linear infinite;
}
.moxkit-button.moxkit-btn--gradient:is(:hover,:focus-visible){
	background:linear-gradient(var(--mx-bg-h,var(--mx-c)),var(--mx-bg-h,var(--mx-c))) padding-box,conic-gradient(from var(--mx-a),var(--mx-g1,#635bff),var(--mx-g2,#ec4899),var(--mx-g3,#f59e0b),var(--mx-g1,#635bff)) border-box;
}
@keyframes moxkit-btn-spin{to{--mx-a:360deg}}
.moxkit-button.moxkit-btn--notch{border-radius:0;clip-path:polygon(.9em 0,100% 0,100% calc(100% - .9em),calc(100% - .9em) 100%,0 100%,0 .9em)}
.moxkit-button.moxkit-btn--glass{
	border-radius:14px;
	background-color:rgba(255,255,255,.16);
	background-color:color-mix(in srgb,var(--mx-c) 24%,transparent);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 10px 30px -10px rgba(0,0,0,.4);
	-webkit-backdrop-filter:blur(12px) saturate(1.4);
	backdrop-filter:blur(12px) saturate(1.4);
}
.moxkit-button.moxkit-btn--glass:is(:hover,:focus-visible){
	background-color:rgba(255,255,255,.26);
	background-color:color-mix(in srgb,var(--mx-bg-h,var(--mx-c)) 40%,transparent);
}
.moxkit-button.moxkit-btn--neon{
	--mx-n:var(--mx-fx,var(--mx-c));
	background-color:transparent;
	color:var(--mx-n);
	box-shadow:inset 0 0 0 2px var(--mx-n),0 0 14px color-mix(in srgb,var(--mx-n) 45%,transparent),inset 0 0 14px color-mix(in srgb,var(--mx-n) 25%,transparent);
	text-shadow:0 0 8px color-mix(in srgb,var(--mx-n) 70%,transparent);
}
.moxkit-button.moxkit-btn--neon:is(:hover,:focus-visible){
	background-color:var(--mx-n);
	color:var(--mx-ink-h,#0f1020);
	box-shadow:0 0 6px var(--mx-n),0 0 26px var(--mx-n),0 0 60px color-mix(in srgb,var(--mx-n) 60%,transparent);
	text-shadow:none;
}
.moxkit-button.moxkit-btn--icon{width:3.4em;height:3.4em;padding:0;border-radius:50%;gap:0}
.moxkit-button.moxkit-btn--icon .moxkit-button-label{
	position:absolute;
	width:1px;
	height:1px;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
}

/* ---------- Hover animations ---------- */
/* Fill sweep, doors and bloom paint the hover background in, so the button's own background stays put. */
/* The background stops at the border, so a transparent border does not leave a ring of it around the fill. */
.moxkit-button:is(.moxkit-btn-filled,.moxkit-btn--brutal),.moxkit-button:is(.moxkit-btn-filled,.moxkit-btn--brutal):is(:hover,:focus-visible){
	background-clip:padding-box;
}
.moxkit-button.moxkit-btn-filled:is(:hover,:focus-visible){background-color:var(--mx-c)}
.moxkit-btn-fill{position:absolute;inset:0;background-color:var(--mx-bg-h,#111827);transition:transform var(--mx-dur) var(--mx-ease)}
.moxkit-btn-h-sweep .moxkit-btn-fill{transform:scaleX(0);transform-origin:100% 50%}
.moxkit-btn-h-sweep:is(:hover,:focus-visible) .moxkit-btn-fill{transform:none;transform-origin:0 50%}
.moxkit-btn-dir--right .moxkit-btn-fill{transform-origin:0 50%}
.moxkit-btn-dir--right:is(:hover,:focus-visible) .moxkit-btn-fill{transform-origin:100% 50%}
.moxkit-btn-dir--up .moxkit-btn-fill{transform:scaleY(0);transform-origin:50% 100%}
.moxkit-btn-dir--down .moxkit-btn-fill{transform:scaleY(0);transform-origin:50% 0}
.moxkit-btn-dir--up:is(:hover,:focus-visible) .moxkit-btn-fill{transform-origin:50% 100%}
.moxkit-btn-dir--down:is(:hover,:focus-visible) .moxkit-btn-fill{transform-origin:50% 0}
.moxkit-btn-h-doors .moxkit-btn-fill{width:51%}
.moxkit-btn-h-doors .moxkit-btn-fill.is-l{right:auto;transform:translateX(-101%)}
.moxkit-btn-h-doors .moxkit-btn-fill.is-r{left:auto;transform:translateX(101%)}
.moxkit-btn-h-doors:is(:hover,:focus-visible) .moxkit-btn-fill{transform:none}
.moxkit-btn-h-bloom .moxkit-btn-fill{
	inset:auto;
	left:var(--mx-x,50%);
	top:var(--mx-y,50%);
	width:10px;
	height:10px;
	margin:-5px 0 0 -5px;
	border-radius:50%;
	transform:scale(0);
	transition-duration:calc(var(--mx-dur) * 1.4);
}
.moxkit-btn-h-bloom:is(:hover,:focus-visible) .moxkit-btn-fill{transform:scale(var(--mx-r,40))}
.moxkit-btn-h-takeover .moxkit-btn-bub::before{
	content:"";
	position:absolute;
	z-index:-1;
	inset:0;
	border-radius:50%;
	background-color:var(--mx-bg-h,#111827);
	transform:scale(0);
	transition:transform calc(var(--mx-dur) * 1.3) var(--mx-ease);
}
.moxkit-btn-h-takeover:is(:hover,:focus-visible) .moxkit-btn-bub{background-color:transparent;color:var(--mx-ink-h,var(--mx-ink,#fff))}
.moxkit-btn-h-takeover:is(:hover,:focus-visible) .moxkit-btn-bub::before{transform:scale(14)}
.moxkit-button.moxkit-btn-h-takeover{overflow:hidden}
.moxkit-btn-h-takeover .moxkit-button-label{z-index:1}
.moxkit-btn-h-roll .moxkit-button-label{overflow:hidden;vertical-align:top}
.moxkit-btn-h-roll .moxkit-btn-text{transition:transform var(--mx-dur) var(--mx-ease)}
.moxkit-btn-h-roll .moxkit-btn-text::after{content:attr(data-t);position:absolute;left:0;top:100%;white-space:nowrap}
.moxkit-btn-h-roll:is(:hover,:focus-visible) .moxkit-btn-text{transform:translateY(-100%)}
.moxkit-btn-ch{display:inline-block;white-space:pre}
.moxkit-btn-h-wave:is(:hover,:focus-visible) .moxkit-btn-ch{
	animation:moxkit-btn-wave .5s var(--mx-ease) both;
	animation-delay:calc(var(--mx-i) * 30ms);
}
@keyframes moxkit-btn-wave{40%{transform:translateY(-.4em)}100%{transform:none}}
.moxkit-button.moxkit-btn-h-spread:is(:hover,:focus-visible){letter-spacing:.06em}
.moxkit-btn-shine{
	position:absolute;
	inset:0;
	background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.55) 52%,transparent 70%);
	transform:translateX(-120%);
}
.moxkit-btn-h-shine:is(:hover,:focus-visible) .moxkit-btn-shine{transform:translateX(120%);transition:transform calc(var(--mx-dur) * 1.8) ease}
.moxkit-button.moxkit-btn-h-glow:is(:hover,:focus-visible){
	transform:translateY(-2px);
	box-shadow:0 0 0 5px rgba(99,91,255,.22),0 14px 34px -8px rgba(99,91,255,.75);
	box-shadow:0 0 0 5px color-mix(in srgb,var(--mx-f) 22%,transparent),0 14px 34px -8px color-mix(in srgb,var(--mx-f) 75%,transparent);
}
.moxkit-btn-draw{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.moxkit-btn-draw::before,.moxkit-btn-draw::after{
	content:"";
	position:absolute;
	box-sizing:border-box;
	width:0;
	height:0;
	border:2px solid transparent;
	opacity:0;
	transition:width calc(var(--mx-dur) * .55) ease calc(var(--mx-dur) * .55),height calc(var(--mx-dur) * .55) ease,opacity 0s calc(var(--mx-dur) * 1.1);
}
.moxkit-btn-draw::before{top:0;left:0;border-top-color:var(--mx-f);border-right-color:var(--mx-f)}
.moxkit-btn-draw::after{right:0;bottom:0;border-bottom-color:var(--mx-f);border-left-color:var(--mx-f)}
.moxkit-btn-h-draw:is(:hover,:focus-visible) .moxkit-btn-draw::before,.moxkit-btn-h-draw:is(:hover,:focus-visible) .moxkit-btn-draw::after{
	width:100%;
	height:100%;
	opacity:1;
	transition:width calc(var(--mx-dur) * .55) ease,height calc(var(--mx-dur) * .55) ease calc(var(--mx-dur) * .55),opacity 0s;
}
.moxkit-button.moxkit-btn-h-flow,.moxkit-button.moxkit-btn-h-flow:is(:hover,:focus-visible){
	background-image:linear-gradient(100deg,var(--mx-g1,#635bff),var(--mx-g2,#ec4899),var(--mx-g3,#f59e0b),var(--mx-g1,#635bff));
	background-size:300% 100%;
	transition:background-position calc(var(--mx-dur) * 2.6) ease,transform var(--mx-dur) var(--mx-ease),color var(--mx-dur) ease;
}
.moxkit-button.moxkit-btn-h-flow:is(:hover,:focus-visible){background-position:100% 0}
.moxkit-button.moxkit-btn-h-jelly:is(:hover,:focus-visible){animation:moxkit-btn-jelly calc(var(--mx-dur) * 1.6) both}
@keyframes moxkit-btn-jelly{0%{transform:scale(1)}30%{transform:scale(1.12,.88)}45%{transform:scale(.92,1.08)}60%{transform:scale(1.05,.95)}75%{transform:scale(.98,1.02)}100%{transform:scale(1)}}
.moxkit-btn-spot{
	position:absolute;
	inset:0;
	background:radial-gradient(7em circle at var(--mx-x,50%) var(--mx-y,50%),rgba(255,255,255,.38),transparent 60%);
	opacity:0;
	transition:opacity var(--mx-dur) ease;
}
.moxkit-btn-h-spotlight:is(:hover,:focus-visible) .moxkit-btn-spot{opacity:1}
.moxkit-button.moxkit-btn-h-tilt{
	transition:transform .15s ease,box-shadow var(--mx-dur) ease,background-color var(--mx-dur) ease,color var(--mx-dur) ease;
}
.moxkit-button.moxkit-btn-h-magnetic{
	transition:transform .25s ease,box-shadow var(--mx-dur) ease,background-color var(--mx-dur) ease,color var(--mx-dur) ease;
}

/* ---------- Icon animations ---------- */
.moxkit-btn-i-nudge .moxkit-icon,.moxkit-btn-i-turn .moxkit-icon{transition:transform var(--mx-dur) var(--mx-ease)}
.moxkit-btn-i-nudge:is(:hover,:focus-visible) .moxkit-icon{transform:translateX(.3em)}
.moxkit-btn-i-turn:is(:hover,:focus-visible) .moxkit-icon{transform:rotate(-45deg)}
.moxkit-icon.moxkit-btn-swap{position:relative;display:inline-grid;overflow:hidden}
.moxkit-btn-swap>span{grid-area:1/1;display:inline-flex;transition:transform var(--mx-dur) var(--mx-ease)}
.moxkit-btn-swap>span+span{transform:translateX(-160%)}
.moxkit-btn-i-swap:is(:hover,:focus-visible) .moxkit-btn-swap>span:first-child{transform:translateX(160%)}
.moxkit-btn-i-swap:is(:hover,:focus-visible) .moxkit-btn-swap>span+span{transform:none}
.moxkit-button.moxkit-btn-i-reveal{gap:0}
.moxkit-btn-i-reveal .moxkit-icon{
	max-width:0;
	opacity:0;
	transform:translateX(-.5em);
	transition:max-width var(--mx-dur) var(--mx-ease),margin var(--mx-dur) var(--mx-ease),opacity .25s ease,transform var(--mx-dur) var(--mx-ease);
}
.moxkit-btn-i-reveal:is(:hover,:focus-visible) .moxkit-icon{max-width:3em;opacity:1;transform:none}
.moxkit-btn-i-reveal:is(:hover,:focus-visible) .moxkit-button-label~.moxkit-icon{margin-inline-start:var(--mx-gap,10px)}
.moxkit-btn-i-reveal:is(:hover,:focus-visible) .moxkit-icon:has(~.moxkit-button-label){margin-inline-end:var(--mx-gap,10px)}
.moxkit-btn-i-loop .moxkit-icon{animation:moxkit-btn-nudge calc(var(--mx-dur) * 3.6) ease-in-out infinite}
@keyframes moxkit-btn-nudge{0%,100%{transform:none}50%{transform:translateX(.3em)}}

/* ---------- Attention loops ---------- */
.moxkit-btn-ring{position:absolute;z-index:-2;inset:0;border-radius:inherit;pointer-events:none;animation:moxkit-btn-pulse 2s infinite}
@keyframes moxkit-btn-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mx-f) 55%,transparent)}70%{box-shadow:0 0 0 16px color-mix(in srgb,var(--mx-f) 0%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
.moxkit-btn-a-shimmer .moxkit-btn-shine{animation:moxkit-btn-shimmer 3s ease-in-out infinite}
@keyframes moxkit-btn-shimmer{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.moxkit-button.moxkit-btn-a-wiggle{animation:moxkit-btn-wiggle 4s ease-in-out infinite}
@keyframes moxkit-btn-wiggle{0%,86%,100%{transform:none}88%{transform:rotate(-4deg)}90%{transform:rotate(4deg)}92%{transform:rotate(-3deg)}94%{transform:rotate(2deg)}96%{transform:rotate(0)}}
.moxkit-button.moxkit-btn-a-breathe{animation:moxkit-btn-breathe 2.8s ease-in-out infinite}
.moxkit-button.moxkit-btn--gradient.moxkit-btn-a-breathe{
	animation:moxkit-btn-spin calc(var(--mx-dur) * 7) linear infinite,moxkit-btn-breathe 2.8s ease-in-out infinite;
}
@keyframes moxkit-btn-breathe{50%{transform:scale(1.045)}}
.moxkit-button:is(.moxkit-btn-a-wiggle,.moxkit-btn-a-breathe):is(:hover,:focus-visible){animation-play-state:paused}

/* ---------- Click feedback ---------- */
.moxkit-button:is(.moxkit-btn-c-press,.moxkit-btn-c-ripple):active{transform:scale(.95)}
.moxkit-btn-ripple{
	position:absolute;
	width:12px;
	height:12px;
	margin:-6px 0 0 -6px;
	border-radius:50%;
	background:rgba(255,255,255,.55);
	animation:moxkit-btn-ripple .6s ease-out forwards;
}
@keyframes moxkit-btn-ripple{to{transform:scale(28);opacity:0}}

@media(prefers-reduced-motion:reduce){
.moxkit-button-wrap .moxkit-button,.moxkit-button-wrap .moxkit-button *,.moxkit-button-wrap .moxkit-button::after,.moxkit-button-wrap .moxkit-button *::before,.moxkit-button-wrap .moxkit-button *::after{
	animation:none!important;
	transition:none!important;
}
}